Creating a Chrome Extension with Manifest V3

🔧

Creating a Chrome Extension with Manifest V3

Build secure, performant browser extensions

Chrome extensions are a great way to add functionality to the browser and enhance user experience. With Manifest V3, Google has made the process more secure, performant, and privacy-conscious.

📋

What is Manifest V3?

The latest Chrome extension platform

Manifest V3 is the latest version of Chrome's extension platform. It offers several improvements over Manifest V2, including enhanced security, better privacy standards, and optimized performance.

🔒

Enhanced Security

Stronger permissions control and security enforcement

🛡️

Better Privacy

Limitations on background scripts for privacy

⚡

Optimized Performance

Service workers replacing background pages

ℹ️
Learn More: Check out the official documentation for detailed information about Manifest V3.
🚀

Setting Up the Project

Create your extension directory and files

1

Create Project Directory

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

BASH
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

Core configuration for your extension

The manifest.json file is the core of any Chrome extension. It defines permissions, background scripts, and UI components.

JSON
{
  "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:

1

manifest_version is set to 3

This tells Chrome to use the latest extension platform

2

background.service_worker replaces background pages

Improves performance and resource usage

3

action.default_popup specifies the popup UI

Defines what appears when the extension icon is clicked

⚙️

Adding Background Scripts

Service workers for background functionality

Background scripts in Manifest V3 are handled by service workers. They provide better performance and resource management compared to background pages in Manifest V2.

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

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

How it works: This script listens for when the extension is installed and when the extension icon is clicked. The service worker approach ensures better performance and resource management.

🎨

Creating the User Interface

Popup HTML and JavaScript for user interaction

1

Create Popup HTML

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

HTML
<!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>
2

Add Popup JavaScript

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

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

Testing the Extension

Load and test your extension in Chrome

Steps to Test Your Extension:

1

Open Chrome Extensions

Navigate to chrome://extensions/

2

Enable Developer Mode

Toggle the switch in the top-right corner

3

Load Unpacked Extension

Click 'Load unpacked' and select your extension directory

4

Test Functionality

Click the extension icon to see the popup and test features

🎯

Conclusion

Next steps and advanced features

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. Start with this foundation and gradually add more complex features as you learn.

🔧 Advanced Features

Add content scripts, web page interaction, and Chrome APIs for more functionality.

📚 Learn More

Explore Chrome's extension APIs and Manifest V3 documentation for advanced techniques.