Introduction to Chrome Web Extensions

A quick introduction to help anyone understand the structure and the building process of an extension for the Chrome Web Browser.

Let’s get started! 📦

Contents of the Chrome Extension Package

The Chrome extension contains these main files:

  1. Manifest (Manifest.json)
  2. HTML (popup.html)
  3. CSS
  4. JavaScript

These files are packaged into a .crx zipped file, which is deployed to the web store. Users can then download the file from the web-store or manually install it through the developer section.

Types of Chrome Extensions

  1. Browser Action Extension → This stays in the browser’s toolbar and is accessible at all times.
  2. Page Action Extension → These work only on certain pages, which are decided by the developer. These extensions stay in the toolbar, but are greyed and get activated only on approved pages.
  3. Background Extensions → These primarily run in the background at all times and are executed on each page launch and refresh.

Both the BA and PA extensions function with user interaction, which could be anything from clicking a button or selection of text. The BG extension launches and functions more automatically.

What is the Manifest file?

This file contains information about the extension and helps Chrome recognise the architecture of the extension. It is a JSON formatted file and therefore should definitely contain the following mandatory entries.

  • Manifest Version
  • Name of the Extension
  • Version of the Extension

There are optional entries to that help in making the extension more expressive, and these are:

  • Description of the Extension
  • Icons for Extension
  • Type of Extension → BA/PA/BG
/*  Example Manifest.json. */
 
{
    "manifest_version": 2, 
    "name": "Hello World", 
    "version": "1.0.0",
    "description": "A manifest example for getting started",
    "icons": {
        "128": "icon128.png",
        "48": "icon48.png",
        "16": "icon16.png"
    },
    "browser_action": {
        "default_icon": "icon16.png",
        "default_popup": "popup.html"
    }
}

The Default Popup

As the name suggests, the default popup is the first file that is presented to a user when they click on the extension in the toolbar. This is a standard HTML file that will layout the first pop-up view of the extension.

/*    Example popup.html       */

<!DOCTYPE html>
<html lang="en">
<head>
    <title>First Extension</title>
</head>
<body>
    <h2>Hello World</h2>
</body>
</html>

Icons for the Chrome Extension

The logo identifies your product and in addition, expresses information about it. Your extension too, should have a clean icon!

Chrome recommends that you have icons in the following three sizes so it can scale appropriately for different screens.

  • 16px x 16px
  • 48px x 48px
  • 128px x 128px
  • 512px x 512px

Specifying them to the manifest.json file.

/*  Example Manifest.json. */
 
{
    "manifest_version": 2, 
    "name": "Hello World", 
    "version": "1.0.0",
    "description": "A manifest example for getting started",
    "icons": {
				"512": "icon512.png"
        "128": "icon128.png",
        "48": "icon48.png",
        "16": "icon16.png"
    },
    "browser_action": {
        "default_icon": "icon512.png",
        "default_popup": "popup.html"
    }
}

Adding the Extension to Chrome

To run it in the Chrome Browser:

  • Type chrome://extensions in the browser.
  • Turn on Developer Mode.
  • After that, click on Load Unpacked.
  • Following that, select the folder with the manifest.json, popup.html and Icons Files.
  • Your extension is now added the Chrome and you can click on it in the Toolbar on the top right.

Congratulations! With this, the Hello World extension is ready. Yes, it is this simple to get started with Chrome Web Extensions. 🌟


Adding some interaction to the Chrome Extension ✨

because what is an extension without some interaction?

Running JavaScript files within our Chrome extension

Interestingly, Chrome Extensions do not support embedding scripts in the HTML tag. However, you can have a script tag and make use of the source tag to reference any external JavaScript that you wish to use!

Create a new JS file and add it to the directory. This file can be named anything, however we will call it popup.js because it is the JavaScript File which is first interacting with our extension popup.

For the interaction demo, let’s add an input field to take some input from the user and then use that to replace the content in the extension.


/* giving an id to the h2 tag and creating an input field */
<body>
    <h2 id="greetings">Hello World</h2>
    <input type="text" id="name">
</body>

/* adding script tag to the popup.html */
<script src="popup.js"></script>

Let’s add some logic to the popup.js file

/*     Example popup.js       */

var nameInput = document.getElementById("name");
var greetings = document.getElementById('greetings');

nameInput.addEventListener('keyup', displayName);

function displayName() {
    greetings.textContent = 'Hello ' + nameInput.value + '!';
}

Save and refresh the extension on the Chrome’s Extension page.

You will now see the following results:


Congratulations! 🎉

You have successfully built the Hello World of Chrome web extensions. Yes, it is this simple to get started with Chrome Extensions, and the possibilities are infinite.

Moreover, all practices from Web Development carry over to building chrome extensions. It is essentially like running a web application within a small popup window. Chrome provides a few APIs to make the extensions work with the browser environment, which we will explore in the next part.

At Webloom Solutions, we are currently building an extension to track your e-commerce product rates and get an active notification on WhatsApp as soon as the cost of the product you want falls below your desired price. Stay tuned for updates!

Leave A Comment