Chrome Extension 101: A Beginner’s Guide

What is a browser extension?

Extensions are small software programs that customize the browsing experience. They enable users to tailor browsers functionality and behavior to individual needs or preferences. They are built on web technologies such as HTML, JavaScript, and CSS [source: Google].

In simpler terms, extensions are add-ons built on top of existing browsers to enhance the experience and smoothen functionalities that might not be provided by the browser itself.

What Powers a Chrome Extension?

The main driving force behind browser extensions are the Developer APIs that different browsers provide. Let’s take Google Chrome, a chromium-based browser, as an example to explore the APIs it offers for extension development:

• Tabs API: This API enables you to manage tabs, including creating them, navigating between them, moving them, and performing other operations.
  Example: Let’s say you always want a particular webpage to be the first tab. You can use the .move function provided by the Tabs API to achieve this.
• Storage API: This is a powerful API offered by Chrome that allows you to use the browser’s local storage. It provides various functions like .local, .managed, .session, and .sync. This can be used for various purposes.
  Example: Imagine building a more advanced bookmarking system than Chrome’s default one. You could allow users to bookmark specific sections of a webpage. You could then leverage .local or even .sync to synchronize data across different devices.
• Runtime API: This API allows you to execute code based on events in the extension’s lifecycle, such as installation, startup, or receiving messages. This can be used to perform actions like tracking user actions or executing background processes.

There are many other APIs available, but these are some of the most commonly used ones.

Things required to create a chrome extension:

Required Files:

• manifest.json
• popup.html
• content.js
• background.js

Let’s see what does all these contains:

• Manifest (version 3): This JSON file contains metadata about your extension, including its name, description, version, icons, permissions, and which files are needed for different functionalities.

{
  "name": "<name-of-your-extension>",
  "description": "<decription-of-your-extension>",
  "version": "<version>",
  "manifest_version": 3,
  "icons": {
    "16": "path/to/image",
    "32": "path/to/image",
    "48": "path/to/image"
  },
  "action": {
    "default_popup": "popup.html",
    "default_icon": "path/to/image"
  },
  "background": {
    "service_worker": "path/to/sw",
    "type": "module"
  },
  "content_scripts": [
    {
      "js": [
        "path/to/js"
      ],
      "matches": [
        "*",
        "urls"
      ]
    }
  ],
  "permissions": [
    "activeTab",
    "storage"
  ]
}

“action”: This handles the appearance of the extension.

“background”: This handles the service worker registration for handling events

“content_scripts”: This specifies the js, css files and urls matches that tells on which url will these scripts be injected

“permissions”: Shows what all api permissions are provided to this extension.

• popup.html: This HTML file defines the content that appears when the user clicks on the extension icon.

Screenshot of extension’s popup appearing on click of icon

• content.js: File containing javaScript code that will be getting executed having main logic for the extension. Example:

const findMultipleAdsComponent = () => {
    const multipleAdsComponent = document.querySelector(".abc")
    if (multipleAdsComponent) {
        const durationOfFirstAdComponent = document.querySelector(".xyz")
        if (durationOfFirstAdComponent) {
            const duration = durationOfFirstAdComponent.textContent
            return true
        }

    }
    return false
}

findMultipleAdsComponent()

• background.js: File in which we can register our service worker to listen to events. Example:

chrome.runtime.onMessage.addListener(function(message, sender, sendResponse) {
  if (message.action === 'adSkipped') {
    chrome.storage.local.get('adCount', function(data) {
      const adCount = data.adCount || 0;
      chrome.storage.local.set({ 'adCount': adCount + 1 });
    });
  }
});

The above file listens for event having object with a key names “action” and value “adSkipped”. Then we are just getting the local storage value with key ‘adCount’. Then we are just incrementing and setting that back again to local storage.

In this blog post, we’ve explored the basics of Chrome extensions. In the next installment, I’ll be diving deeper and explaining how I built my YouTube ad skipper extension from scratch.

In the meantime, feel free to check out the YouTube ad skipper extension here:

YouTube Skipper Chrome Extension

I’m eager to hear your feedback! Whether you have questions, comments, or suggestions, feel free to leave them below.

I hope this blog post provided a valuable introduction to Chrome extensions. If you’d like to learn more or have any issues, feel free to leave a comment. Additionally, don’t forget to subscribe for updates on the next part of the series, where I’ll be building a YouTube ad skipper extension!