How to create chrome extension

To create chrome extension follow this article, In the end of this article you will have a simple chrome extension. we further discuss how can we add unpacked extension to chrome.

We need to add unpacked extension to chrome in order to test our application during development phase, though sometime it also require to add extensions which are not on chrome store.

Table of Contents

Prerequisite to Create a chrome extension

Basic knowledge of HTML, CSS and Javascript
Text Editor, Any one, I am using vscode
Chrome browser installed

Let’s start creating extension for chrome

An extension is made up of many components/resources it may include scripts,images,ui elements and most important is extension logic

Extension is created using HTML, CSS, and JavaScript.

We first create a directory better named it same as our extension name. In our case we named it as hello-world.

Further, most important file is manifest.json. Most of the installation errors are due to errors in this file. We need to discuss each part clearly.

Creating Manifest file

Create a file inside your directory and named it as manifest.json.

This is the file which tell all about the extension, so add the below code to it.

{
    "name": "Hello World",
    "description": "Test Extension to visit a site",
    "version": "1.0",
    "manifest_version": 2,
    "content_scripts": [
        {
            "matches": [
                "*://*.worthread.in/*"
            ],
            "js": [               
                "resources/js/content.js"
            ],
            "css": [
                "resources/style/helloworld.css"
            ],
            "all_frames": false
        }
    ],
    "permissions": [
        "activeTab"
    ],
    "icons": {
        "128": "resources/image/icon.png"
    },
    "browser_action": {
        "default_title": "Run only when default site open",
        "default_icon": "resources/image/icon.png",
        "default_popup": "popup.html"
    },
    "web_accessible_resources": [
        "resources/image/*.png",
        "resources/js/helloworld.js",        
        "resources/style/helloworld.css"
    ]
    
}

Ok, we have created manifest file, lets understand each line. The first four lines are extension name, description, extension version and manifest version.

The fifth line is ‘content_script’ it will tell chrome about resources of the extension and further the domains on which these resources are available. ‘all_frame’ parameter is used to tell whether extension is available on all frames or just on primary window. By default it is true and extension will also work on iframes also.

‘Permissions’ This parameter define extension permission it value may be storage, activetab or any other api. We use activetab as we only want it to work only on active tab.

‘icons’ it is used to define extension icon.
‘web_accessible_resources’ This is used to define accessible resources by this extension.

‘browser_action’ this is used to define extension title, image used and our popup.

Adding UI to extension

Extensions can have many forms of a UI, but we are using a popup. Create and add a file titled popup.html to the directory. This extension uses a link to visit a site.

<!DOCTYPE html>
<html>
    <head>
        <style>
            body {
                width: 310px;
                height: 145px;
                padding: 10px;
            }
            #pv_desc a {
                font-size: 14px;
                text-decoration: none;
                color: #ff9a00;
                ;
                font-weight: 500;
            }
        </style>
    </head>
    <body>
        <div id="pv_popup_box">
            <div id="pv_image" class="inline"><img height="20" width="20" src="resources/image/icon.png" alt="Hello world extension"></div>
            <div id="pv_desc" class="inline">
                <h3>Hello World Extension</h3>
                <p>Click to visit site</p>
                <a href="https://worthread.in" target="_blank">Visit Site</a>
            </div>
        </div>
    </body>
</html>

The above HTML is used to create a popup, which will display when user click on the extension. This is because we already define this in our manifest file under browser action.

Now, we need to install it on chrome browser and check it functionality.

Adding unpacked extension to chrome

To install unpacked extension, we need to open extensions in chrome browser for this follow the steps.

Goto Chrome Settings using three dots on the top right corner select ‘More tools’ and the click on ‘Extensions’. You may also directly visit ‘chrome://extensions’.
Now, Enable developer mode
Click on Load Unpacked and select your extension directory.