Overview:

This article provides a guide on how to build a browser extension using React, TypeScript, and esbuild. It supports both Firefox and Chrome browsers. The article covers the basic usage, installation instructions, and customization options for the browser extension.

Features:

Build a browser extension with React + TypeScript + esbuild.
Supports both Firefox and Chrome browsers.
Provides basic usage examples and instructions.
Allows customization options for add-on ID and other settings.

Build for Firefox:

Enable watch mode: yarn watch
Enable source map: yarn build --sourcemap

Build for Chrome:

Build for both browsers: yarn build

Run with browsers:

Firefox:

Load the "web-ext" tool: yarn global add web-ext
Run the extension in Firefox: web-ext run --browser firefox

Chrome:

Load the extension in Chrome:
- Open Chrome and type chrome://extensions in the address bar.
- Enable "Developer mode" using the toggle switch.
- Click on "Load unpacked" and select the extension folder.

Create a package for Firefox (zip):

To install an unsigned add-on, follow these steps:

Use Firefox Developer Edition.
Change the settings to allow unsigned add-ons.
- Reference: Firefox Add-on Signing

Type check:

Run type checking using ESLint: yarn lint

Fix Prettier:

Fix code formatting using Prettier: yarn format

Customization:

To change the add-on ID for Firefox, follow these steps:

Edit firefox.json.
Update the ID to match the required format: {<UUID>}<alphanum>@<alphanum>

Summary:

This article provides a comprehensive guide on building a browser extension using React, TypeScript, and esbuild. It covers the basic usage, installation, and customization options for both Firefox and Chrome browsers. The provided code snippets and instructions make it easy to follow along and build a browser extension with the desired features.

Hiterm

Web Ext React Template