https://github.com/addfox/addfox

🧩 Accelerate your browser extension development. Built on Rsbuild — fast, simple, and free
https://github.com/addfox/addfox

add-on browser-extension chrome chrome-extension firefox firefox-addon hmr rsbuild

Last synced: 21 days ago
JSON representation

🧩 Accelerate your browser extension development. Built on Rsbuild — fast, simple, and free

• Host: GitHub
• URL: https://github.com/addfox/addfox
• Owner: addfox
• License: mit
• Created: 2026-03-21T18:43:57.000Z (about 1 month ago)
• Default Branch: main
• Last Pushed: 2026-04-02T09:02:25.000Z (26 days ago)
• Last Synced: 2026-04-03T00:37:50.669Z (25 days ago)
• Topics: add-on, browser-extension, chrome, chrome-extension, firefox, firefox-addon, hmr, rsbuild
• Language: TypeScript
• Homepage: https://addfox.dev
• Size: 3.95 MB
• Stars: 68
• Watchers: 0
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README-zh_CN.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-rstack - Addfox

README

          


  



Addfox

基于 Rsbuild 的浏览器扩展开发框架




  

  

  





  官方文档 · npm · Skills · English | 中文



---

## 架构

Addfox 基于 Rsbuild（Rspack/Rstack）封装扩展能力；构建产物在 Chrome 或 Firefox 中加载。



  



---

## 特点

- 🔥 **快速开发与热更新** — `addfox dev` 监听变更并自动重建、热重载扩展。

- 📦 **构建即打包 zip** — `addfox build` 同时输出扩展目录与 `.addfox` 下可上架 zip。

- 📁 **文件式入口** — 从 `app/` 自动发现 background/content/popup/options/sidepanel/devtools，并支持自定义入口。

- 🌐 **跨浏览器支持** — `-b` 可指定 Chromium 系与 Firefox，支持按浏览器拆分 manifest。

- ⚛️ **框架无关** — 支持 Vue、React、Svelte、Solid 和原生 JS，兼容 TS/JS。

- 🤖 **AI 友好调试** — `--debug` 终端展示按入口聚合的错误信息。

- 🧪 **测试流程内置** — `addfox test` 转发参数到 Rstest，覆盖单测与 e2e 流程。

- 📊 **Rsdoctor 分析** — 在 dev/build 加 `--report` 可生成打包分析报告。

- 🧩 **Skills 集成** — 可通过脚手架或 `skills add` 使用 [addfox/skills](https://github.com/addfox/skills)。

- 🔐 **环境变量控制** — 加载 `.env`，通过 `envPrefix` 控制变量暴露范围。

## 安装与使用

**新项目：**

```bash

pnpm create addfox-app

# 或：npx create-addfox-app

```

按提示选择框架（Vanilla / Vue / React / Preact / Svelte / Solid）、语言、包管理工具、入口及可选 [Skills](https://github.com/addfox/skills)，会生成完整目录与 `addfox.config`。

**已有项目：**

```bash

pnpm add -D addfox

```

在项目根目录添加 `addfox.config.ts`（或 `.js` / `.mjs`），入口放在 `app/`（或配置 `appDir`）。然后：

- `addfox dev` — 开发模式，watch + 热更新

- `addfox build` — 构建到 `.addfox/extension`（可选打 zip）

使用 `-b chrome` 或 `-b firefox` 指定目标浏览器。

---

**完整文档、配置说明与示例：** [https://addfox.dev](https://addfox.dev)  

**Skills（AI 工作流模块）：** [https://github.com/addfox/skills](https://github.com/addfox/skills)