How to Build a Chrome Extension with Manifest Version 3 (MV3)

A Beginner's Guide to Developing a Chrome Extension with MV3.

Good day!

In this blog we will be learning how to build a Chrome extension in Manifest version 3. The main components of a Chrome extension are:

1. Manifest file(manifest.json)

2. Background Script

3. Content Script

4. UI - Popup

5. Chrome APIs

In this blog we will be using a simple extension that I created to demonstrate the core components of a extension. This sample project (extension) is called “Google Background Changer“. This extension changes the background of google.com. You can find the source code of the extension here.

You can download the source code and load the extension in your chrome browser and view the output. The output after loading the extension will look something like this.

Manifest File (manifest.json)

This is the configuration file for the extension, which includes information such as the extension's name, icon, version, permissions, content scripts, actions and background scripts. Below is a sample manifest.json file.

{
  "name": "Google Background Changer",
  "version": "1.0",
  "description": "Changes the background color of google.com",
  "permissions": [
      "storage" 
  ],
  "host_permissions": [
      "<all_urls>"
  ],
  "icons": {
      "16": "icons/brush16.png",
      "32": "icons/brush32.png",
      "48": "icons/brush48.png",
      "128": "icons/brush128.png"
  },
  "content_scripts": [
      {
          "matches": [ "https://www.google.com/*" ],
          "js": [ "content/content.js" ],
          "css": [ "content/content.css" ]
      }
  ],
  "background": {
      "service_worker": "background.js"
  },
  "action": {
      "default_icon": "icons/brush128.png",
      "default_title": "Google Background Changer",
      "default_popup": "popup/popup.html"
  },
  "manifest_version": 3
}

Above are some important fields that goes in the manifest file. We will be talking about every field in detail.

name & description: Keep your extension’s name and description SEO friendly, so that users can easily find your extension.

permissions: This is a very important field. You only need to specify the permissions that is needed for your extension to function. Specifying unused permissions may lead your extension approval to get rejected.

host_permissions: This is another important field. Accepts an array of string url match patterns. host_permissions allows your extension to read or modify host data, such as cookies, webRequest, and tabs. <all_urls> can be specified if you want to access every url.

icons: One or more icons that represent the extension or theme. You should always provide a 128x128 icon; it's used during installation and by the Chrome Web Store. Extensions should also provide a 48x48 icon, which is used in the extensions management page (chrome://extensions). You can also specify a 16x16 icon to be used as the favicon for an extension's pages.

Background Scipt

A service worker is a JavaScript file that runs in the background of a web browser and acts as a proxy server between the web application, the browser, and the network.

In the context of a Chrome extension, a service worker can be used to perform tasks such as caching assets, intercepting network requests, and handling push notifications. Extensions are event-based programs used to modify or enhance the Chrome browsing experience.

Events are browser triggers, such as navigating to a new page, removing a bookmark, or closing a tab. Extensions monitor these events using scripts in an extension service worker (previously called a background script), which then executes specified instructions. Learn more. Below is a sample code that creates a new tab and opens google.com when the background receives a new message called “open-new-tab“

// background.js
chrome.runtime.onMessage.addListener(function(response, sender, sendResponse){
    const { message } = response

    if(message === "open-new-tab") {
        chrome.tabs.create({ url: "https://www.google.com"})
    }
})

Content Scipt

The purpose of a content script is to manipulate the page's DOM (Document Object Model) and interact with the content on the page. This allows an extension to add or remove elements, modify the appearance of the page, or interact with other JavaScript code that may be running on the page.

For example, a content script can be used to add a button to a page that triggers a specific action within the extension when clicked. It can also be used to modify the CSS styles of the page to improve readability or remove distracting elements.

It's important to note that content scripts have limited access to the Chrome extension APIs, and they can only interact with the web page that they are injected into. This is done for security reasons, to prevent malicious code from accessing sensitive user data or modifying other parts of the browser. Learn more.

// content.js
document.getElementsByTagName("body")[0].style.backgroundColor = "pink"

In the above code, I’m targeting the body element in the DOM and changing it’s background color to pink. Refer the above manifest to see on which url is this content script getting injected.

Actions (Popup)

Actions refer to the buttons or icons that are displayed in the browser's user interface, typically in the toolbar or the browser menu.

you can use actions to control the toolbar button for your extension in Chrome's UI. Note that every extension will have an icon in the toolbar in Chrome, even if the action key is not specified.

Overall, actions are an important part of the user interface of a Chrome extension, as they provide a convenient and accessible way for users to interact with the extension and access its functionality. Learn more

Chrome APIs

Chrome extension APIs are a set of JavaScript functions and interfaces provided by the Chrome browser that allow developers to interact with the browser and its environment. These APIs provide a way for developers to extend the functionality of the browser and create powerful, feature-rich extensions.

There are many different Chrome extension APIs available, covering a wide range of functionality. Here are some of the most commonly used APIs:

1. Tabs API: This API allows developers to manipulate browser tabs, such as opening new tabs, closing tabs, and updating the content of existing tabs.

2. Storage API: This API provides a way for extensions to store and retrieve data, such as user settings or preferences.

3. Message Passing API: This API allows different components of the extension, such as the background script and the content script, to communicate with each other.

4. Notifications API: This API allows extensions to display notifications to the user, such as pop-up messages or alerts.

There are many other Chrome extension APIs available as well, covering a wide range of functionality.

Conclusion

Developing a Chrome extension with MV3 can be a fun and rewarding experience for beginners. By following the steps outlined in this guide, anyone can create a custom extension that enhances their browsing experience or solves a specific problem they face. It's important to remember that MV3 provides a more secure and efficient framework for extension development, making it a great choice for developers of all skill levels.

While creating an extension may seem daunting at first, the key is to break the process down into manageable steps and take advantage of the wealth of resources available online. By experimenting and exploring the possibilities of MV3, you can create a unique and useful extension that can make your browsing experience more enjoyable and productive. So, get started today and discover the exciting world of Chrome extension development with MV3!

In the upcoming blogs, I will be taking through detailed explanation of concepts and build real world applications (extensions).