Creating a Chrome Extension with Manifest V3

Chrome extensions are a great way to add functionality to the browser and enhance user experience. With the introduction of Manifest V3, Google has made the process of building extensions more secure, performant, and privacy-conscious. In this article, we will walk through the steps to create a simple Chrome extension using Manifest V3.

What is Manifest V3?

Manifest V3 is the latest version of Chrome’s extension platform. It offers several improvements over Manifest V2, including:

  • Enhanced security by enforcing stronger permissions control.
  • Better privacy standards through limitations on background scripts.
  • Optimized performance with service workers replacing background pages.

To read more, check out the official documentation.

Setting Up the Project

To begin, create a new directory for your extension project:

mkdir my-chrome-extension
cd my-chrome-extension

Inside this directory, we’ll set up the following essential files:

  • `manifest.json` (Defines the extension configuration)
  • `background.js` (Contains background script functionality)
  • `popup.html` and `popup.js` (The user interface)

Writing the Manifest File

The `manifest.json` file is the core of any Chrome extension. Here's a simple example using Manifest V3:

{
  "manifest_version": 3,
  "name": "My Chrome Extension",
  "version": "1.0",
  "action": {
    "default_popup": "popup.html"
  },
  "background": {
    "service_worker": "background.js"
  },
  "permissions": [
    "storage"
  ]
}

Key Changes in Manifest V3:

  • `manifest_version` is set to 3.
  • `background.service_worker` replaces background pages, improving performance.
  • `action.default_popup` specifies the popup UI that will appear when the extension icon is clicked.

Adding Background Scripts

Background scripts in Manifest V3 are handled by service workers. Here's a basic `background.js` file:

chrome.runtime.onInstalled.addListener(() => {
  console.log('Extension installed');
});

chrome.action.onClicked.addListener((tab) => {
  console.log('Extension icon clicked!');
});

This script listens for when the extension is installed and when the extension icon is clicked.

Creating the User Interface (Popup)

Create a `popup.html` file that defines the UI when a user clicks on the extension’s icon:

<!DOCTYPE html>
<html>
  <head>
    <title>My Chrome Extension</title>
    <style>
      body { font-family: Arial, sans-serif; padding: 10px; }
      button { margin-top: 10px; }
    </style>
  </head>
  <body>
    <h1>Welcome to My Extension</h1>
    <button id="clickMe">Click Me!</button>
    <script src="popup.js"></script>
  </body>
</html>

In `popup.js`, you can define what happens when the user interacts with the popup:

document.getElementById('clickMe').addEventListener('click', () => {
  alert('Button clicked!');
});

Testing the Extension

To test your extension in Chrome:

  1. Open Chrome and navigate to `chrome://extensions/`.
  2. Enable Developer mode in the top-right corner.
  3. Click Load unpacked and select your extension’s directory.
  4. Your extension should now appear in the toolbar.

Click the extension icon to see the popup and test the functionality.

Conclusion

Congratulations! You’ve built a simple Chrome extension using Manifest V3. This basic setup can be expanded with more features like interacting with web pages, storing user data, and utilizing Chrome’s APIs. Manifest V3 brings improved security and performance, making it the future of Chrome extensions.