Basics of Creating a Chrome Extension

#javascript #css #extension

In this blog, we will learn the basics of creating a Chrome extension. In the process, we will create a very basic chrome extension - a word enhancing application. In this extension, we will be enhancing the word "Rainbow" and put a rainbow icon after the word and put a basic animation on the text.

So let's begin!

Requirements

For creating a Chrome extension, the workspace setup is really simeple. You just need 2 things: a text editor(like VS code, sublime text etc.) and a browser(we will be using Google Chrome).

1. Creating a Manifest file

Manifest file is the most important one for creating a Chrome extension as it contains the meta data of the extension. It defines information like name, description, icons, version and other important details of the extension.

Thus every chrome extension consists of a manifest.json file.
Below is the manifest.json file for our word enhancing application:

{
    "manifest_version": 2,
    "name": "Rainbow Glory",
    "version": "0.1.0",
    "description": "This extension glorifies the word 'Rainbow'",
    "content_scripts": [
        {
            "matches": ["<all_urls>"],
            "js": ["script.js"],
            "css": ["styles.css"] 
        }
    ],
    "icons": {
        "128": "images/rainbow128.png",
        "48": "images/rainbow48.png" 
    },
    "browser_action": {
        "default_icon": "images/rainbow48.png"
    }
}

There are some things defined in the above code. Let's take a closer look on each of them:

a) manifest_version: It defines the version of manifest file your package requires. The latest version currently is '3' but in this example we will be using version '2'.
b) name: This is the name of your Chrome Extension.
c) version: This is the version of the Chrome Extension that we are developing.
d) description: This is the text that will be visible about the Chrome Extension.
e) content_scripts: These are files that run in context of web pages. This means that they are able to read details of the web pages and make changes to them.
f) icons: These are the icons that represent our app. The 128x128 icon is used during installation and is visible on the Chrome Web Store and the 48x48 icon is visible on the extensions management page(chrome://extensions).
g) browser_action: This is used to put icon on the Google Chrome Toolbar. In addition, we can also put tooltip, a badge and a popup.

2. Code Logic

Now that our manifest.json file is created, let's start building our code logic. We have defined 'script.js' as our 'js' file in the 'content_script' in the 'manifest.json'. So we'll put our code for doing DOM manipulation here.

We want to enhance each and every occurance of the word 'Rainbow' and put a rainbow icon along with some animations. For this, first we need to identify each and every occurance of the word 'Rainbow'.

We will run a recursive function to reach to the nth level of child in the DOM and use regex to search for the pattern of the word(case insensitive). After that, we will create a new element with the respective word, put a rainbow icon (🌈) just after it and give a class to that element for applying animations on it. The whole function will be called at the load time of the web page itself.

Given below is the code for the 'script.js' file:

replaceText(document.body);

function replaceText(element) {
    if (element.hasChildNodes()) {
        element.childNodes.forEach(replaceText);
    } else if (element.nodeType === Text.TEXT_NODE) {
        if (element.textContent.match(/rainbow/gi)){
            const newElement = document.createElement('span')
            newElement.innerHTML = element.textContent.replace(/(rainbow)/gi, '<span class="rainbow">$1 🌈</span>')
            element.replaceWith(newElement);
        }
    }
}

replaceText is the recursive function which is using DOM to search for the nth child and then through regex, we are searching for each and every occurance of the word 'Rainbow'. Whenever we find a match we create a new element(here we are creating a element) and then replace the word with the element with class 'rainbow'.

3. CSS (for Animation)

Now it's time to add some css to apply animation on the replaced element.

We will add an animation loop of 800ms which will run for infinite times and in keyframes we will change the text color to all the colors of the rainbow during each iteration of the loop.

Given below is the code in styles.css file:

.rainbow {
    animation: rainbow 800ms;
    animation-iteration-count: infinite;
}

@keyframes rainbow {
    0% {
        color: red;
    }

    15% {
        color: orange;
    }
    30% {
        color: yellow;
    }
    45% {
        color: green;
    }
    60% {
        color: blue;
    }
    75% {
        color : indigo;
    }
    90% {
        color: purple;
    }
}

4. Directory tree

The whole project directory consists of these files: manifest.json, scripts.js, styles.css, images folder with rainbow48.png & rainbow128.png.

Given below is the final Directory tree that we have now:

In case there were any difficulties with the code, go to this repository.

5. Using extension

To use the chrome extension, we can either host the extension on the Chrome Web Store or locally upload the extension in extensions management page(chrome://extensions).

To host your extension, follow the Chrome Web Store Developer Dashboard

To upload the extension locally, follow the given steps:
a) Go to extensions management page(chrome://extensions).

b) Enable the Developer Mode on the page. This will provide additional options for the Chrome Extension Developer.

Developer Mode:

Developer Options:

c) Click on Load unpacked button in the Developer Option mentioned above. Now navigate to the project folder that you have created and select it. The extension will be added in the extensions management page(chrome://extensions).