Recently, I completed freeCodeCamp's JavaScript course. I had also learned HTML and CSS previously. So, I thought of building a project to test my skills. But, I had a problem I didn't know what to build. So, I searched in google for beginner Web development projects and found out that chrome extensions are nice starter projects. So, I started reading about them and got to know so many things!! This blogs intends to document my learnings about chrome extensions.

Chrome extensions are software applications, which are combination of HTML, CSS and JavaScript, which improve user's browsing experience by making use of various API's provided by the browser. Extensions developed for Google Chrome can run on any Chromium based browsers(eg. Brave). We can also run them on other browsers like Firefox and Edge with minor changes.

Let's understand the architecture of extensions:

1. Manifest:

Every chrome extensions has a special JSON formatted file called mainfest.json. This file specifies the details about the extensions like name, description, author, version, permissions required by the extensions and the files associated with it.

Sample manifest.json file

 {
  // Required
  "manifest_version": 3,
  "name": "My Extension",
  "version": "versionString",

  // Recommended
  "action": {...},
  "default_locale": "en",
  "description": "A plain text description",
  "icons": {...},

  // Optional
  "author": ...,
  "automation": ...,
  "background": {
    // Required
    "service_worker": "background.js",
    // Optional
    "type": ...
  },
  "content_scripts": [{
      // Optional
      "matches":[...],
      "js":[...]
  }],
  "permissions": ["tabs"]
}

Current version of manifest i.e v3 was introduced in 2020, Google has also said it will not allow new extensions with manifest v2.

2.Content Scripts:

Content scripts are JavaScript files that run in the context of the present web page. They contain logic to read and modify the webpage with help of Document Object Model(DOM). Now you might think, what if I have more than one content scripts? Well, that's why content scripts are run in isolated world.

An isolated world is a private execution environment that isn't accessible to the page or other extensions This helps to differentiate between JavaScript variables of the host page or other extension scripts.

To add a content scripts to extensions, manifest.json needs to be updated with:

"content_scripts":[
        {   // Websites to run this script on
            "matches":["http://www.youtube.com/*"], 
            // Required JavaScript files
            "js":["script.js"] 
        }
    ]

3.Service Worker:

Service Worker (also known as Background Scripts in manifest v2) are files that are used by extensions to monitor events and react to these events. Service workers are dormant until a specified event occurs, they are loaded when needed and unloaded when idle. To add Service Worker to extensions, manifest.json needs to be updated with:

"background": {
    // Note only one service worker can be scpeciifed, but chrome provides
    // options for importing files as modules also.
    "service_worker": "background.js"
  }

4.UI Components:

UI compontes of an extension helps the user to navigate through various applications of the extension or show him required information. It include:

a) Icons:

Extensions have Icons to differnetiate fro other extensions on the toolbar. Users can click on this icon to access the Popup.
To add Icons to the extensions, manifest.json needs to be updated with:

"action": {
    "default_icon": {
      // Favicon on the extension's pages and context menu icon.
      "16": "extension_toolbar_icon16.png",
      // Windows computers often require this size.
      "32": "extension_toolbar_icon32.png",
      // Displays on the extension management page.
      "64": "extension_toolbar_icon64.png",
      // Displays on installation and in the Chrome Web Store.
      "128": "extension_toolbar_icon128.png"

    }
  }

b) Popup:

Popup is a special HTML file which is displayed when the users clicks on the Icons. This file can contain images, links to stylesheets, script files, etc. like a normal webpage, except inline JavaScript.
To add Popup to the extensions, manifest.json needs to be updated with:

"action": {
    "default_popup": "popup.html"
  }

Working:

Working of a Chrome Extension

Similarly, we can extend the extension's capability using service workers, which listens for events and communicates with content scripts using message passing. Also, popup js can access global variables of service workers directly.

Conclusion:

I hope you might have understood about the basics of how chrome extensions work and its architecture. In my next blog series, I will show you guys how to build a chrome extension from scratch. Thank You for reading till the end!! Have a great day!