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
- 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
- Add the plugin in
rsbuild.config.ts
:
import { pluginWebExt } from "rsbuild-plugin-web-ext";
export default {
plugins: [pluginWebExt()],
};
- 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:
Manifest Field | File Path |
---|---|
name |
displayName or name in package.json |
version |
version in package.json |
description |
description in package.json |
author |
author in package.json |
homepage_url |
homepage in package.json |
icons |
assets/icon-[size].png |
action |
popup.ts or popup/index.ts
|
background |
background.ts or background/index.ts
|
content_scripts |
single file content.ts or multiple files contents/*.ts
|
options_ui |
options.ts or options/index.ts
|
devtools_page |
devtools.ts or devtools/index.ts
|
sandbox |
single file sandbox.ts or multiple files sandboxes/*.ts
|
newtab |
newtab.ts or newtab/index.ts
|
bookmarks |
bookmarks.ts or bookmarks/index.ts
|
history |
history.ts or history/index.ts
|
side_panel |
sidepanel.ts or sidepanel/index.ts
|
_locales |
public/_locales/* |
web_accessible_resources |
public/* |
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.