How to create a Chrome extension

Google Chrome extensions are small apps created using HTML, CSS, and javascript to add some special functionality to chrome. Many popular Chrome extensions serve users with a variety of options and functionality. Some of the popular chrome extensions are Grammarly, wappalyzer, etc. These extensions are developed for a single purpose like the Grammarly extension is for writers to check grammar. The wappalyzer extension is used to know the technologies from which a website is built. There are many extensions like this. You can search them and install them by visiting the chrome web store.

Creating a Chrome extension

Though there are many extensions available in the chrome web store, sometimes we require a custom chrome extension. Due to this, we need to learn how to make a chrome extension to develop it as per our requirements. To create an extension, we need to create a folder for the chrome extension and add the required files there.

Creating the manifest file

While creating a chrome extension, the first step is to create the project folder. Then in the folder, we need to create a file with the name manifest.json. The manifest.json file is a JSON(Javascript Object Notation) file. This file provides important information about the extension. This information includes the extension name, description, icons path, required permissions, background scripts, etc. A simple manifest file is shown below.

{
    "name": "The Name of the extension",
    "version": "1.0",
    "description": "The description of the extension",
    "manifest_version": 3
}

In the above manifest file, we have provided the name, description, version of the chrome extension, and the version of the manifest file. By creating a manifest file, we have created a simple chrome extension. Now let us see how we can load this extension in Google chrome.

Loading the extension in Chrome

To load a chrome extension manually in chrome, we need to follow the steps mentioned below.

Step 1: First of all, we need to go to the extension page of google chrome by typing chrome://extensions/ in the URL bar.

Step 2: After going to the extension page, we need to turn on the developer mode present in the top right corner of the extension page. See the below image for an illustration.

Step 3: Click on the load unpacked button present in the top left corner and then browse to the extension folder which we have created.

Step 5: After that, the extension will be loaded into the chrome as shown in the below image.

Adding functionality to the Extension

We have created a chrome extension that does nothing, but we can add many functionalities to the extension using javascript. Let us discuss the functionalities that we can add to the extension are.

Adding the Icon

The extension that we have created have no icons. However, we can add icons to this extension by using the icons parameter in the manifest file. See the below manifest file code for an illustration.

{
    "name": "The Name of the extension",
    "version": "1.0",
    "description": "The description of the extension",
    "manifest_version": 3,
    "icons": {
        "16": "path_to_the_image_file_of_size_16",
        "32": "path_to_the_image_file_of_size_32",
        "48": "path_to_the_image_file_of_size_48",
        "128":"path_to_the_image_file_of_size_128"
    }
}

Add your image path in the icons parameter in the manifest file shown above. This will lead to an icon be displayed in the extension.

Background

We have created an extension and added an icon to the extension, but the extension does nothing. We can add functionality to the extension by adding a background script. The background script will run in the background while the extension is active and perform the declared operations in the background script file. To add a background script to our extension, we need to use the background parameter of the manifest file. See the below sample manifest.

{
    "name": "The Name of the extension",
    "version": "1.0",
    "description": "The description of the extension",
    "manifest_version": 3,
    "background": {
        "service_worker": "background.js"
    }
}

In the above manifest file, we have used the background parameter of the manifest file to register a service worker by providing the file name as background.js. After adding the line in the manifest, now we can create a background.js file in the extension folder. The code written inside the background.js file will run in the background whenever the extension is active.

Popup

We can also build a user interface for the extension, so if a user clicks the extension icon from the top bar of chrome, something will pop up. This can be achieved by using the action parameter of the manifest file. See the below sample manifest file.

{
    "name": "The Name of the extension",
    "version": "1.0",
    "description": "The description of the extension",
    "manifest_version": 3,
    "background": {
        "service_worker": "background.js"
    },
    "action": {
        "default_popup": "popup.html"
    }
}

In the above JSON file, we use the default_popup option of the action parameter and give it a file “popup.html.” If someone clicks on the extension icon(present on the top of chrome on the right side of the search bar), then the content inside the popup.html will be executed. This file is beneficial while building extensions. For example, we can build a calculator using the popup.html by adding some javascript which lets us easily access and use the calculator in chrome by just clicking the extension icon.

Permissions

Many chrome API functions were restricted to be used in the chrome extension and required special permissions. While building an extension for google chrome, we need to ask for permissions by listing all the permission we required in the manifest file. There are many permissions that we may want to use for our app like,

Storage: This permission will let the chrome extension store data by using the storage API of chrome.
Bookmarks: Using this permission, our app can create and edit bookmarks.

To see the full list of permission, visit the official docs of google chrome extensions. To use any of the restricted functionality in our chrome extension, we need to request permission by adding it to the manifest file. For example, see the below sample manifest file.

{
    "name": "The Name of the extension",
    "version": "1.0",
    "description": "The description of the extension",
    "manifest_version": 3,
    "background": {
        "service_worker": "background.js"
    },
    "action": {
        "default_popup": "popup.html"
    },
    "permissions": [
        "storage",
        "bookmarks",
        "history"
    ]
}

In the above sample manifest, we have asked for three permissions viz. storage, bookmarks, history. Now we can use these functionalities in our extension.

Conclusion

In this tutorial, we have learned how to build chrome extensions. However, there are many more features that can be added to a chrome extension. You can learn about them by visiting the official documentation for building chrome extensions.