English | 简体中文

A Rsbuild plugin for developing and building browser extensions, making browser extension development simple and efficient.

• Declarative Development. Automatically generate configuration based on directory structure, no complex setup needed.
• HMR + Live-Reloading. Live page updates with HMR and Live-Reloading.
• TypeScript Support. Out-of-the-box type support without additional configuration.
• Browser Compatibility. Unified APIs and polyfills for easy multi-browser support.
• Framework Agnostic. Freedom to use any frontend framework and libraries.
• Lightning Fast. Blazing fast development and build powered by Rsbuild.

npm add rsbuild-plugin-web-ext -D

1. Create your extension entry files: (refer to Declarative Development for more details)

src/
├── assets/       # Icon Assets
├── popup.ts      # Extension popup
├── background.ts # Background service worker
└── content.ts    # Content script

2. Add the plugin in rsbuild.config.ts:

import { pluginWebExt } from "rsbuild-plugin-web-ext";

export default {
  plugins: [pluginWebExt()],
};

3. Add npm scripts:

{
  "scripts": {
    "dev": "rsbuild dev",
    "build": "rsbuild build"
  }
}

• Run npm run dev to start the development server.
• Enable developer mode in browser extensions page and load the dist directory.
• Run npm run build to build for production.

The manifest configuration for the browser extension. If not specified, it will be automatically generated based on the directory structure.

Source directory path. Defaults to ./src, falling back to project root (./) if src directory doesn't exist.

Target browser, supports:

• chrome-mv3 (default)
• firefox-mv3
• firefox-mv2
• safari-mv3

Output directory path. Defaults to dist/<target>-<mode>, e.g. dist/chrome-mv3-dev in development mode, dist/chrome-mv3-prod in production mode.

Supports automatic configuration generation based on the following directory structure:

Note: Entry files are located in srcDir (defaults to ./src), except for public directory which is located in the project root.

Default build target is Chrome MV3. Other browsers can be specified using the target option.

For cross-browser support, it's recommended to use:

• webextension-polyfill - Unified browser extension APIs.
• @types/webextension-polyfill - TypeScript type definitions.

There are lots of examples for you to refer to.

MIT