How to Create Your First Chrome Extension

There are around 200 thousand Chrome extensions already available for all kinds of situations so what might be the reason to develop your own new Chrome extension, well the reason can be one of the below.

If you are a developer then it is a great project idea and can really make your resume stand out.
There isn’t a solution for your problem so build your own solution and help others who may also encounter the same problem.
If you want to make money by making Chrome extensions then there are several ways to do it like by selling the premium of your extension or getting a sponsor for your extension.

There are many more similar reasons but for now, as you are ready to create your own Chrome extension so let’s build one in the following steps.

#1. Setup Your Project

Creating a basic Chrome extension is a very easy task, but making a complex extension is also not hard if done properly by setting up the project structure nicely.

Create a new project folder and create the following files inside that.

manifest.json: This file contains metadata and configurations for a Chrome extension.
popup.html: This is the page or window which is going to show when you click the extension icon.
popup.js: It will contain the javascript code for the logic of your extension.
style.css: This is the stylesheet for the popup window or popup.html file.

#2. Setup manifest.json

Manifest.json if the file in which metadata like extensions name, descriptions, versions, icons, and permissions are going to be written.

It is the most important part of a Chrome extension, and the following is the basic setup for this.

{
  "manifest_version": 3,
  "name": "My First Entension",
  "description": "Very basic extension",
  "version": "1.0",
  "icons": {
    "16": "icon16.png",
    "32": "icon32.png",
    "48": "icon48.png",
    "128": "icon128.png"
  },
  "action": {
    "default_popup": "popup.html"
   }
  
}

In the above configuration

manifest_version: 3: means this extension follows the manifest version 3 guidelines as there have been multiple versions of manifest and all of them have some differences with respect to features and compatibility as of now Chome Web Store only supports the latest version 3 so it is recommended to use version 3 for new projects.
name: name of your extension.
description: a short description of what your extension is about.
version: Your extension version.
action: action configuration is for when we click on the extension icon,
- default_popup: it specifies which html file should open when we click on the icon.
icons: specifies icons of different sizes acceptable 16×16, 32×32, 48×48, and 128×128 pixels which will be displayed in different contexts of chrome extensions like chrome toolbar, and extension manager.

Replaces the values according to your project and make sure to place icons of different sizes in the project folder to show it as your icon.

This is how my project looks after adding an icons

#3. Design the popup window

Now it’s time to create your own popup window by writing HTML code inside the popup.html file.

Because in default_popup in the manifest, we gave popup.html as our popup window it will be shown every time we click on our extension icon in Chrome browser.

Write down the following HTML code in the popup.html file

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <h1>My First Extension</h1>
  <form id="messageForm">
    <label for="message">Enter your message:</label>
    <input type="text" id="message" name="message">
    <button type="submit">Submit</button>
  </form>
  <script src="popup.js"></script>
</body>
</html>

This will create a form window which will be shown when we click on the extension icon.

Notice: we are importing style.css and popup.js in this html file instead we can also write inline CSS and Javascript code, but for the simplicity of the project let’s keep them separate.

#4. Styling popup window with CSS

Now let’s style our window page a little bit by writing the following CSS code inside the style.css file.

body {
  font-family: Arial, sans-serif;
  width: 300px;
  padding: 10px;
}

button {
  background-color: #4CAF50;
  border: none;
  color: white;
  padding: 5px 10px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 14px;
  margin: 5px 2px;
  cursor: pointer;
}

#5. Add logic with the help of Javascript

As we have created a form window and styled it with CSS now let’s give it life by adding interactivity by adding Javascript logic with the help of the following code. inside popup.js file.

document.getElementById('messageForm').addEventListener('submit', function(event) {
  event.preventDefault();
  const message = document.getElementById('message').value;
  alert('You entered: ' + message);
});

In the above code, we are displaying the message entered by the user with the help of the alert function.

#6. Test Your extension

Congratulations you just created your first Chrome extension.

To test it

Open the extension manager in Chrome from setting or type chrome://extensions/chrome://extensions/ in the URL bar in Chrome to open it,
Enable ‘Developer mode’ by clicking the toggle switch in the top right corner.
Click ‘Load unpacked’ and select the folder containing your extension files.

Now your extension should be live in Chrome you can find it in the extension manager.

and in the Chrome toolbar

Try clicking on your icon and it will show you a popup window with a form, try to submit by writing some message in it.

It should show an alert in your browser with the message you just submitted.

And that’s how you can build you own chrome extension, now explore it and develop the best extension you can imagine.

Thanks for reading, Happy Coding 🙂