How to build a Google Chrome extensión Manifest Version 3

Overview

1. Create a new directory for your extension and create a manifest file named “manifest.json” in it.
2. In the manifest file, specify the basic information about your extension such as its name, version, and permissions.
3. Create a HTML file that will serve as the extension’s popup window.
4. Create a JavaScript file that will contain the logic for your extension.
5. Reference the HTML and JavaScript files in the manifest file.
6. Go to chrome://extensions in Google Chrome, enable “Developer mode” and then use “Load unpacked” to load your extension directory.
7. Test your extension and make any necessary changes.
8. Once you are satisfied with your extension, you can package it and publish it to the Chrome Web Store.

manifest.json

Start by creating a folder in your computer with the name: my first chrome extension. Inside the folder create a file manifest.json with the following code:

{
    "name": "my first chrome extension",
    "description": "Learning all about Chrome Extensions Manifest Version 3!",
    "version": "0.1.0",
    "manifest_version": 3,
    "icons": {
        "16": "icon16.png",
        "32": "icon32.png"
    },
    "background": {
        "service_worker": "background.js"
    },
    "action": {
        "default_popup": "popup.html",
        "default_icon": {
            "16": "icon16.png",
            "32": "icon32.png"
        }
    },
    "options_page": "options.html",
    "permissions": [
        "storage",
        "activeTab",
        "scripting",
        "tabs"
    ],
    "host_permissions": [
        "https://www.google.com/*"
    ]
}

• The extension is using version 3 of the manifest format.
• The extension’s name is “My Extension” and it has a description “A simple extension that does something cool.”.
• The version of the extension is 1.0.
• The extension has permission to access the activeTab.
• The extension has a browser action with a default popup of “popup.html” and icons of size 16 and 32 in the path “icon16.png” and “icon32.png” respectively.
• The extension has a content script that runs on all URLs, uses a script named “content.js” and runs at document_idle.
• The extension has an options page “options.html” which opens in a new tab.
• The extension has a background script “background.js” which is non-persistent.
• The extension has a web accessible resource “image.png”.
• The minimum required version of chrome is 85.
• content_scripts to manipulate the DOM of the webpage by our extension.

Content Script (content.js)

To manipulate the DOM.

Service Workers (background.js)

Service workers are at the core of progressive web app techniques for resource caching and push notifications. You need to understand a service worker lifecycle and service worker events.

A Service worker is a client-side programmable proxy between your web app and the outside world. It gives you fine control over network requests.

They are an object that executes a script separately from the main browser thread.

• They run independent of the application they are associated with.
• They can receive messages when not active. (either because application is in the background or not open, or the browser is closed).

The primary uses for service workers are:

• To act as a caching agent
• To handle network requests
• To store content for offline use
• Handle push messaging.

Index workers can be idle when not needed and restart when needed. If is needed information to persist across restarts then service workers indexedDB databases.

Service workers are promise based. (an object that is used as a kind of placeholder for the eventual results of a deferred and possibly asynchronous computation).

Two API’s are needed for service workers: fetch (to retrieve data) catch (to store data).

Lifecycle of a service worker

• Registration
• Instalation
• Activation

References