Mastering Chrome Extension Manifest v3: A Step-by-Step Tutorial for Developers

‍
As a developer, I know how important it is to keep up with the latest updates and changes in technology. One of the most popular web browsers, Google Chrome, has recently released an update to their extension manifest, called Manifest v3. In this article, I will walk you through the changes in Manifest v3, provide a step-by-step tutorial for creating a basic Chrome extension using Manifest v3, and offer best practices for developing with Manifest v3.

Introduction to Chrome extensions

Chrome extensions are small software programs that customize the browsing experience. They enable users to tailor Chrome functionality and behavior to individual needs or preferences. There are thousands of extensions available in the Chrome Web Store, and they are used by millions of people worldwide.

Extensions can be used to perform a variety of tasks such as blocking ads, managing passwords, and taking screenshots. They are built using web technologies such as HTML, CSS, and JavaScript. Chrome extensions have access to a wide range of APIs that allow them to interact with the browser and its underlying system.

Overview of Chrome Extension Manifest v3

The Chrome extension manifest is a JSON file that contains information about the extension such as its name, version, and permissions. Manifest v3 is the latest version of the extension manifest, and it brings several changes and improvements over its predecessor, Manifest v2.

Manifest v3 introduces a new architecture for extensions, which is designed to improve security, privacy, and performance. It also introduces a new permissions system that is more granular and restricts the access of extensions to sensitive user data. Moreover, Manifest v3 removes some of the features that were available in Manifest v2, such as inline scripts and the ability to modify network requests.

Changes in Chrome Extension Manifest v3

One of the significant changes in Manifest v3 is the introduction of a new background service worker model. In Manifest v2, extensions could use a background page to run code that needed to execute continuously. However, this model had some limitations, such as a high memory footprint and potential security risks.

Manifest v3 introduces a new background service worker model that solves these issues. The service worker runs in a separate process from the extension, which reduces memory usage and improves performance. Additionally, the service worker has limited access to the extension’s data, which enhances security.

Another change in Manifest v3 is the introduction of a new permissions system. The new system is more granular and restricts the access of extensions to sensitive user data such as browsing history, bookmarks, and network activity. Extensions will need to declare the permissions they require explicitly, and users will have more control over the data they share with extensions.

Step-by-step tutorial for developers – Creating a basic Chrome extension using Manifest v3

Now that we have covered the changes in Manifest v3 let’s move on to creating a basic Chrome extension using Manifest v3. We will create an extension that changes the background color of the current tab.

Step 1: Create a new directory and files

Create a new directory for your extension and create the following files inside it:

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

Step 2: Add content to manifest.json

Open the manifest.json file and add the following code:

{
  "manifest_version": 3,
  "name": "My Extension",
  "version": "1.0",
  "description": "Change the background color of the current tab",
  "background": {
    "service_worker": "background.js"
  },
  "permissions": [
    "activeTab"
  ],
  "action": {
    "default_popup": "popup.html"
  }
}

This code defines the basic properties of the extension, such as its name, version, and description. It also declares the background service worker and permissions required by the extension.

Step 3: Add content to background.js

Open the background.js file and add the following code:

chrome.action.onClicked.addListener((tab) => {
  chrome.scripting.executeScript({
    target: { tabId: tab.id },
    func: () => {
      document.body.style.backgroundColor = 'red';
    }
  });
});

This code listens for a click event on the extension’s action button and executes a script that changes the background color of the current tab to red.

Step 4: Add content to popup.html

Open the popup.html file and add the following code:

<!DOCTYPE html>
<html>
  <head>
    <title>My Extension</title>
    <script src="popup.js"></script>
  </head>
  <body>
    <h1>Change the Background Color</h1>
    <button id="change-color">Change</button>
  </body>
</html>

This code defines the popup window that appears when the extension’s action button is clicked. It includes a button that triggers the background script when clicked.

Step 5: Add content to popup.js

Open the popup.js file and add the following code:

document.getElementById('change-color').addEventListener('click', () => {
  chrome.tabs.query({ active: true, currentWindow: true }, (tabs) => {
    chrome.tabs.sendMessage(tabs[0].id, { message: 'change-color' });
  });
});

This code listens for a click event on the button and sends a message to the background script to change the background color of the current tab.

Step 6: Load the extension

To load the extension in Chrome, follow these steps:

1. Open Chrome and go to chrome://extensions/
2. Turn on Developer mode
3. Click on Load unpacked
4. Select the directory where you saved your extension files

Step 7: Test the extension

To test the extension, follow these steps:

1. Open a new tab in Chrome
2. Click on the extension’s action button
3. Click on the Change button in the popup window
4. See the background color of the current tab change to red

Visit our blog on chrome Extension Development Tutorial Capture Tab