Developing Chrome Extensions with Manifest V3 and TypeScript: A Step-by-Step Guide

Introduction to Chrome Extensions and Manifest V3

If you’ve ever found yourself wishing for a bit more functionality or a personal touch in your browsing experience, you’re not alone. Chrome extensions are the perfect way to customize your browser to fit your needs, and with the latest Manifest V3, developing these extensions has become both more secure and more efficient. In this article, we’ll dive into the world of Chrome extension development using Manifest V3 and TypeScript, with a dash of React for good measure.

Setting Up Your Development Environment

Before we start coding, make sure you have the necessary tools installed:

• Node.js: Download and install Node.js from the official website. This will also install npm, which you’ll use to manage your project dependencies[4].

• Vite: Vite is a fast and modern development server that we’ll use to streamline our development process. You can set up a new Vite project with React and TypeScript using the following command:

  npm create vite@latest my-chrome-extension -- --template react-ts
  

• Vite Plugin for Chrome Extensions: To make bundling your Chrome extension easier, you’ll need a Vite plugin. Install it using:

  npm i @crxjs/vite-plugin@beta -D
  

Creating the Manifest File

The manifest.json file is the heart of your Chrome extension. Here’s an example of what it might look like for a basic extension using Manifest V3:

{
  "manifest_version": 3,
  "name": "My Chrome Extension",
  "version": "1.0.0",
  "description": "A Chrome extension built with Vite and React",
  "action": {
    "default_popup": "index.html"
  },
  "permissions": ["activeTab", "storage"],
  "background": {
    "service_worker": "background.js"
  },
  "content_scripts": [
    {
      "matches": ["<all_urls>"],
      "js": ["content_scripts/content.js"]
    }
  ]
}

Key Components of the Manifest File

• manifest_version: Specifies that you’re using Manifest V3.
• permissions: Requests access to the active tab and storage API.
• background: Specifies the background script file.
• content_scripts: Defines which script should be injected into web pages.
• action: Specifies the HTML file for the extension’s popup[5].

Setting Up Vite Configuration

To integrate the Vite plugin for Chrome extensions, update your vite.config.ts file as follows:

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import { crx } from '@crxjs/vite-plugin';
import manifest from './manifest.json';

export default defineConfig({
  plugins: [
    react(),
    crx({ manifest }),
  ],
});

Developing the Extension

Background Script

In Manifest V3, the background script is replaced with a service worker. Here’s an example of what your background.js might look like:

chrome.runtime.onInstalled.addListener(function() {
  chrome.storage.sync.set({ colorCount: 0 });
});

chrome.runtime.onMessage.addListener(
  function(request, sender, sendResponse) {
    if (request.action === "colorChanged") {
      console.log("Background color was changed");
    }
  }
);

Content Script

The content script is injected into web pages to interact with the DOM. Here’s an example:

chrome.runtime.onMessage.addListener(
  function(request, sender, sendResponse) {
    if (request.action === "changeColor") {
      document.body.style.backgroundColor = getRandomColor();
      sendResponse({ status: "Color changed" });
    }
  }
);

function getRandomColor() {
  var letters = '0123456789ABCDEF';
  var color = '#';
  for (var i = 0; i < 6; i++) {
    color += letters[Math.floor(Math.random() * 16)];
  }
  return color;
}

Popup Script

The popup script is the entry point for your extension’s UI. Here’s an example using React and TypeScript:

// popup.tsx
import React, { useState, useEffect } from 'react';
import ReactDOM from 'react-dom';

const Popup = () => {
  const [colorCount, setColorCount] = useState(0);

  useEffect(() => {
    chrome.storage.sync.get('colorCount', (result) => {
      setColorCount(result.colorCount);
    });
  }, []);

  const changeColor = () => {
    chrome.runtime.sendMessage({ action: "changeColor" });
    chrome.storage.sync.get('colorCount', (result) => {
      chrome.storage.sync.set({ colorCount: result.colorCount + 1 });
    });
  };

  return (
    <div>
      <h1>Color Changer</h1>
      <button onClick={changeColor}>Change Color</button>
      <p>Color changed {colorCount} times</p>
    </div>
  );
};

ReactDOM.render(<Popup />, document.getElementById('root'));

Loading and Testing the Extension

To test your extension, follow these steps:

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 folder.
4. Your extension should now appear in the Chrome toolbar.
5. Open any webpage and click on your extension icon.
6. Click the “Change Color” button and observe the changes.

Sequence Diagram for Extension Interaction

Here’s a sequence diagram showing how the different parts of your extension interact:

Best Practices and Migration from Manifest V2

Background Service Worker vs Background Page

In Manifest V3, the traditional background page is replaced with a background service worker. This change improves performance and security but requires adjustments in how you handle persistent scripts and events[3].

Content Scripts Isolation

Content scripts in Manifest V3 are isolated from the extension and can only interact with it through messaging. This adds a layer of security but requires careful handling of communication between scripts[3].

Permissions Restructuring

Permissions in Manifest V3 have been restructured to reduce complexity and ambiguity. Ensure you carefully analyze each permission to minimize unwanted exposure risks[3].

Conclusion

Developing a Chrome extension with Manifest V3 and TypeScript is a rewarding experience that combines modern web technologies with the power of browser customization. By following the steps outlined here, you can create a functional and secure extension that enhances your browsing experience.

Remember, the key to successful extension development is attention to detail, especially when it comes to permissions and communication between scripts. With practice and patience, you’ll be creating extensions like a pro in no time.

So, go ahead and dive into the world of Chrome extensions. Your browser (and your users) will thank you