AddFox
  • 简体中文

      • 构建更好的浏览器扩展为开发者和AI

      加速你的浏览器插件开发。基于 Rsbuild，快速，简单，自由。

      快速开始在 GitHub 查看
      bash
      $ addfox dev
      [Addfox] 0.0.1 with Rsbuild 0.4.x
      [Addfox] ● Parse config 25ms
      EntryFile
      backgroundapp/background.ts
      contentapp/content/index.ts
      popupapp/popup/index.tsx
      [Addfox] ● Rsbuild ready 136ms
      [Rsbuild] start building app\content\index.ts
      [Rsbuild] ready built in 0.08 s
      [Addfox] ● Dev server http://localhost:3000 2ms
      [Addfox] ● Extension size: 1.24 MB
      🔒chrome-extension://.../welcome.html

      Addfox + React

      Your extension is ready. Happy building!

      为开发者

      热更新、多浏览器支持与极简配置，助你更快交付扩展。

      极速HMR

      使用独立 Reloader 控制扩展更新，不仅快速，content_script 和 background 均能实现极速HMR。

      ReloaderExtensionAddfoxRsbuild

      全方位的浏览器支持

      支持主流 Chromium 系浏览器和 Firefox。无需配置即可自动识别浏览器默认安装地址并启动。

      ChromeFirefoxOperaBrave
      VivaldiArcYandexChromium

      框架无关

      你可以用 Vanilla，也可以使用 Vue、React、Preact、Svelte、Solid 或 React+UnoCSS 等框架。

      VueReactPreactSvelteSolid
      TypeScriptJavaScript

      支持 content-ui

      提供了内置的 createContentUI 方法，可轻松集成 Iframe、ShadowDom 和原生内容。

      https://example.com/article
      Translate
      Original
      Selected text...
      Translation
      Translated result
      EN → ZH

      Rstack 生态

      内置支持 Rsdoctor 与 Rstest，可快速完成打包分析及单元、e2e 测试。

      支持 Zip 输出

      构建时自动输出扩展 zip 包，便于安装与分发。

      为AI

      结构化 meta、终端错误输出与 Skills，让 AI 能理解并扩展你的扩展。

      llms.txt 和 markdown 元信息支持

      提供明确的插件信息、错误信息和 prompts，帮助 AI agent 开发。

      AIllms.txtMmeta.md!error.mdAI Agent

      AI 友好的错误监控

      使用 --debug 时启用终端错误输出。无需在浏览器操作即可掌握插件所有报错信息，方便你在任何 Editor 中直接 Ask AI。

      bash
      $ addfox dev --debug
      error
      --- BEGIN AI PROMPT ---
      You are a frontend and browser extension development expert, proficient with the Addfox framework.
      This is an Addfox-based browser extension runtime error (MV3).
      Before proposing fixes:
      1) Read `.addfox/llms.txt` first.
      2) Apply the `addfox-debugging` skills to analyze this report (and `.addfox/error.md` / `.addfox/meta.md` if available).
      --- END AI PROMPT ---
      --- Addfox extension error ---
      bundler: rsbuild
      front-end-framework: React
      entry: content
      type: error
      time: 2026/3/21 20:58:51
      message: fff is not defined
      location: chrome-extension://fbnnalickbkocmeokpogajmocmcejemg/content/index.js:2966:1
      stack:
      ReferenceError: fff is not defined
      at ./app/content/index.ts (chrome-extension://fbnnalickbkocmeokpogajmocmcejemg/content/index.js:1635:45)
      at __webpack_require__ (chrome-extension://fbnnalickbkocmeokpogajmocmcejemg/content/index.js:2962:29)
      at chrome-extension://fbnnalickbkocmeokpogajmocmcejemg/content/index.js:4125:27
      at chrome-extension://fbnnalickbkocmeokpogajmocmcejemg/content/index.js:4126:3
      ---------------------------
      --- BEGIN AI PROMPT ---
      You are a frontend and browser extension development expert, proficient with the Addfox framework.
      This is an Addfox-based browser extension runtime error (MV3).
      Before proposing fixes:
      1) Read `.addfox/llms.txt` first.
      2) Apply the `addfox-debugging` skills to analyze this report (and `.addfox/error.md` / `.addfox/meta.md` if available).
      --- END AI PROMPT ---
      --- Addfox extension error ---
      bundler: rsbuild
      front-end-framework: React
      entry: content
      type: error
      time: 2026/3/21 20:58:51
      message: fff is not defined
      location: chrome-extension://fbnnalickbkocmeokpogajmocmcejemg/content/index.js:2966:1
      stack:
      ReferenceError: fff is not defined
      at ./app/content/index.ts (chrome-extension://fbnnalickbkocmeokpogajmocmcejemg/content/index.js:1635:45)
      at __webpack_require__ (chrome-extension://fbnnalickbkocmeokpogajmocmcejemg/content/index.js:2962:29)
      at chrome-extension://fbnnalickbkocmeokpogajmocmcejemg/content/index.js:4125:27
      at chrome-extension://fbnnalickbkocmeokpogajmocmcejemg/content/index.js:4126:3
      ---------------------------

      Skills 支持

      可扩展的 Skills，支持 Agent 与自动化。

      migrate-to-addfox
      addfox-best-practices
      extension-functions-best-practices
      addfox-debugging
      addfox-testing
      migrate-to-addfox
      addfox-best-practices
      extension-functions-best-practices
      addfox-debugging
      addfox-testing
      migrate-to-addfox
      addfox-best-practices
      extension-functions-best-practices
      addfox-debugging
      addfox-testing
      migrate-to-addfox
      addfox-best-practices
      extension-functions-best-practices
      addfox-debugging
      addfox-testing
      addfox-debugging
      addfox-testing
      addfox-best-practices
      migrate-to-addfox
      extension-functions-best-practices
      addfox-debugging
      addfox-testing
      addfox-best-practices
      migrate-to-addfox
      extension-functions-best-practices
      addfox-debugging
      addfox-testing
      addfox-best-practices
      migrate-to-addfox
      extension-functions-best-practices
      addfox-debugging
      addfox-testing
      addfox-best-practices
      migrate-to-addfox
      extension-functions-best-practices

      听听作者怎么说

      "
      Gomi
      Gomi
      Creator of VideoRoll and AddFox
      我是 Gomi，也是浏览器插件 Video Roll 的作者。尽管我开发的插件在 Chrome Web Store 和 Edge 上都成为了精选插件，用户量也超过了 35K，但开发浏览器插件的过程中，我依然感觉到不满足。在尝试了 Parcel、Vite 等开发工具后，我决定尝试解决一些插件开发中的痛点。即使业界已经存在 WXT、Plasmo 这种非常优秀和完善的解决方案，但我坚决不会重复造轮子。基于 Rsbuild 的速度和 AI 友好的开发范式，让我着迷，于是我创造了 Addfox。

      常见问题

      关于 Addfox 的常见问题快速解答

      是的，Addfox 采用 MIT 协议完全开源。你可以在 GitHub 上查看源代码、为项目贡献代码，或者根据需要进行 Fork。
      目前 Addfox 专注于 Chromium 系浏览器（Chrome、Edge、Arc、Brave 等）和 Firefox。由于 Safari 的扩展 API 和打包要求不同，暂不支持 Safari。
      当然支持！Addfox 是框架无关的，支持 React、Vue、Preact、Svelte、Solid 以及原生 JavaScript/TypeScript。你可以使用喜欢的框架，只需极少的配置。
      WXT、Plasmo 和 Extension.js 都是非常优秀的框架，它们极大地推动了浏览器扩展开发生态的发展。WXT 带来了 Vite 的强大性能和精心设计的插件系统；Plasmo 提供了完善的云服务集成和出色的开发体验；Extension.js 则以简洁易用著称。Addfox 选择了不同的路径：基于 Rsbuild 构建以获得极致的构建速度；专为 AI 辅助开发设计，提供结构化元数据和终端错误输出；通过最小化的约定给予你最大的灵活性——你可以按自己喜欢的方式组织代码，同时享受开箱即用的热更新和多浏览器支持。