AddFox
  • 日本語

      • より良いブラウザ拡張を構築開発者とAIのために

      ブラウザ拡張開発を加速。Rsbuild ベースで、高速、シンプル、自由。

      クイックスタート
      pnpm create addfox-app
      Star us
      bash
      $ addfox dev
      [Addfox] Addfox 0.1.1-beta.11 with Rsbuild 1.7.3
      [Addfox] ● Parse config 84ms
      Entry├── background -> app/background/index.ts├── content -> app/content/index.ts├── popup -> app/popup/index.tsx└── options -> app/options/index.tsx
      [Addfox] ● Rsbuild ready 6ms[Addfox] ● Hot reload WebSocket: ws://127.0.0.1:23333 31ms
      [Rsbuild] start build started...[Addfox] ● Dev server http://198.18.0.1:3000 297ms
      [Rsbuild] ready built in 0.62 s[Addfox] Press R to reload extension (and Ctrl-C to quit)
      [Addfox] ● chrome started, extensions loaded. 300ms[Addfox] ● Extension size: 2.21 MB
      🔒chrome-extension://.../welcome.html
      Addfox
      Popup Page
      Options
      Manage Extension

      Addfox + React

      Your extension is ready. Happy building!

      超高速

      ビジネスを開始し、即座の起動と最適化されたビルド

      開発サーバー起動

      addfoxRsbuild 1.7.5
      2.04s
      extensionjsRspack
      2.34s
      wxtVite
      2.36s
      plasmoParcel
      3.39s

      開発サーバー起動の最小時間（短い方が良い）

      ビルド時間

      addfoxRsbuild 1.7.5
      1.51s
      extensionjsRspack
      1.57s
      wxtVite
      1.95s
      plasmoParcel
      2.8s

      拡張機能ビルドの最小時間（短い方が良い）

      同一プロジェクトでのベンチマーク結果。プロジェクトの複雑さにより結果は異なる場合があります。

      benchmark详情 →

      開発者のために

      ホットリロード、マルチブラウザサポート、最小限の設定で、より迅速な拡張機能の提供を支援します。

      極速 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のために

      構造化されたメタ情報、ターミナルエラー出力、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 で特集され、ユーザー数が 35,000 人を超えたものの、ブラウザ拡張機能の開発には満足していませんでした。Parcel や Vite などの開発ツールを試した後、拡張機能開発におけるいくつかの課題を解決することを決意しました。業界にはすでに WXT や Plasmo のような優れたソリューションが存在しますが、私は車輪の再発明を断固として行いません。Rsbuild の速度と AI に優しい開発パラダイムに魅了され、Addfox を生み出しました。

      よくある質問

      Addfox に関するよくある質問へのクイックガイド

      はい、Addfox は MIT ライセンスの下で完全にオープンソースです。GitHub でソースコードを閲覧したり、プロジェクトに貢献したり、必要に応じて Fork したりすることができます。
      現在、Addfox は Chromium 系ブラウザ（Chrome、Edge、Arc、Brave など）と Firefox に焦点を当てています。Safari の拡張 API とパッケージ要件が異なるため、現在はサポートしていません。
      もちろんです！Addfox はフレームワークに依存せず、React、Vue、Preact、Svelte、Solid、およびネイティブ JavaScript/TypeScript をサポートしています。お気に入りのフレームワークを使用でき、最小限の設定で済みます。
      WXT、Plasmo、Extension.js はすべて優れたフレームワークで、ブラウザ拡張機能開発エコシステムの発展に大きく貢献しています。WXT は Vite の強力なパフォーマンスと洗練されたプラグインシステムを提供しています。Plasmo は包括的なクラウドサービス統合と優れた開発体験を提供しています。Extension.js はシンプルで使いやすいことで知られています。Addfox は異なるアプローチを選択しました：Rsbuild を基盤とし、究極のビルド速度を実現；AI 支援開発のために設計され、構造化されたメタデータとターミナルエラー出力を提供；最小限の規約により最大限の柔軟性を提供—お好みの方法でコードを構成しながら、即座に使えるホットリロードとマルチブラウザサポートを享受できます。