Building a Chrome Extension with React and TypeScript

Building browser extensions has evolved significantly with the introduction of Manifest V3. In this comprehensive guide, I'll walk you through creating a production-ready Chrome extension using React and TypeScript.

Why React for Chrome Extensions?

While Chrome extensions can be built with vanilla JavaScript, using React offers several advantages:

• Component-based architecture for better code organization
• State management becomes much simpler
• Reusable UI components across popup, options, and content scripts
• TypeScript integration for type safety

Project Structure

A well-organized Chrome extension typically follows this structure:

extension/
├── manifest.json
├── popup/
│   ├── index.html
│   ├── App.tsx
│   └── components/
├── background/
│   └── service-worker.ts
├── content/
│   └── content-script.ts
└── options/
    ├── index.html
    └── Options.tsx

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: