Building a Chrome Extension with React and TypeScript

The Manifest File

With Manifest V3, the manifest.json has some important changes:

{
  "manifest_version": 3,
  "name": "My Extension",
  "version": "1.0.0",
  "action": {
    "default_popup": "popup.html",
    "default_icon": "icon.png"
  },
  "background": {
    "service_worker": "background.js",
    "type": "module"
  },
  "permissions": ["storage", "tabs"]
}

Building the Popup

The popup is where users interact with your extension. Here's a simple React component:

import { useState, useEffect } from 'react';

export default function Popup() {
  const [data, setData] = useState<string>('');

  useEffect(() => {
    // Load saved data from chrome.storage
    chrome.storage.local.get(['savedData'], (result) => {
      if (result.savedData) {
        setData(result.savedData);
      }
    });
  }, []);

  const handleSave = () => {
    chrome.storage.local.set({ savedData: data });
  };

  return (
    <div className="p-4 w-80">
      <h1 className="text-lg font-bold">My Extension</h1>
      <input
        value={data}
        onChange={(e) => setData(e.target.value)}
        className="border p-2 w-full mt-2"
      />
      <button onClick={handleSave} className="bg-blue-500 text-white p-2 mt-2">
        Save
      </button>
    </div>
  );
}

Communication Between Scripts

One of the trickier aspects is communication between different parts of your extension:

// In content script - send message to background
chrome.runtime.sendMessage({ type: 'GET_DATA' }, (response) => {
  console.log('Received:', response);
});

// In background script - listen for messages
chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
  if (message.type === 'GET_DATA') {
    sendResponse({ data: 'Hello from background!' });
  }
  return true; // Keep the message channel open
});

Best Practices

1. Use TypeScript - It catches errors early and improves code quality
2. Minimize permissions - Only request what you need
3. Handle errors gracefully - Extensions should fail silently for users
4. Test across browsers - Consider Firefox and Edge compatibility
5. Optimize bundle size - Users prefer lightweight extensions

Conclusion

Building Chrome extensions with React and TypeScript provides a modern development experience while creating powerful browser tools. The component-based approach makes it easy to build complex UIs, and TypeScript ensures your code is robust and maintainable.

In my next post, I'll cover how to publish your extension to the Chrome Web Store and handle the review process.