rsbuild-plugin-web-ext v0.0.1-alpha.11

rsbuild-plugin-web-ext

English | 简体中文

一个用于开发和构建浏览器扩展的 Rsbuild 插件，让浏览器扩展开发变得简单高效。

特性

• 声明式开发 - 基于目录结构自动生成配置，无需复杂设置
• 无缝的开发体验 - 实时页面更新，支持 HMR 和 Live-Reloading
• TypeScript 支持 - 开箱即用的类型支持，无需额外配置
• 浏览器兼容 - 统一的 API 和 polyfills，轻松实现多浏览器支持
• 框架无关 - 可以自由使用任何前端框架和库
• 极速性能 - 基于 Rsbuild 实现极速开发和构建

快速开始

安装

npm add rsbuild-plugin-web-ext -D

项目设置

1. 为你的浏览器扩展创建入口文件：（参考声明式开发了解更多）

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

2. 在 rsbuild.config.ts 中添加插件：

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

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

3. 添加 npm 脚本：

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

开发

• 运行 npm run dev 启动开发服务
• 在浏览器扩展页面开启开发者模式，加载 dist 目录
• 运行 npm run build 构建生产版本

选项

manifest

浏览器扩展的 manifest 配置。如果未指定配置项，将基于目录结构自动生成。

srcDir

源码目录路径，默认为 ./src，如果 ./src 不存在，则默认为项目根目录。

target

目标浏览器，支持：

• chrome-mv3（默认）
• firefox-mv3
• firefox-mv2
• safari-mv3

支持基于以下目录结构自动生成配置：

注意：入口文件位于 srcDir 目录下（默认为 ./src），而 public 目录位于项目根目录。

默认构建目标为 Chrome MV3，可以通过 target 选项指定其他浏览器。

如需跨浏览器支持，推荐使用：

• webextension-polyfill - 统一的浏览器扩展 API
• @types/webextension-polyfill - TypeScript 类型定义

示例

查看示例项目了解更多使用方式。

许可证

MIT