#はじめに

Addfox は Rsbuild ベースのブラウザ拡張機能開発フレームワークで、同一のプロジェクト内で Chrome と Firefox の拡張機能を開発・ビルドできます。

#なぜ Addfox を選ぶのか

ブラウザ拡張機能の開発は本来シンプルなはずです。HTML、JavaScript、CSS といった Web 技術だけでよいはずです。しかし実際には、ホットリロード、エラーデバッグ、フロントエンドフレームワークとの統合などの問題が開発者を悩ませてきました。

Addfox の目標は、拡張機能開発をシンプルに戻すことです：

AI 時代において、Addfox はさらに一歩進み、AI があなたの拡張機能開発をよりよく理解し支援できるようにします：

• AI フレンドリーなプロジェクト構造 — llms.txt、meta.md などの構造化ドキュメントを自動生成し、AI アシスタントがプロジェクトのアーキテクチャと設定を迅速に理解できるようにします
• ターミナルエラー出力 — 開発時のエラーをブラウザの DevTools を開かずにターミナルに直接出力し、あらゆるエディターで Ask AI 機能を使いやすくします
• Skills サポート — migrate-to-addfox、addfox-debugging などの再利用可能な AI スキルライブラリを内蔵し、AI アシスタントがより専門的に開発とデバッグを支援できます
• 最小限のコード制約 — 特定のコード構成方法を強制せず、AI が生成したコードをプロジェクトにシームレスに統合できます

開発者であろうと AI 支援付き開発を使用する方であろうと、Addfox はより良い体験を提供します。

#機能特性

#開発者のため

ホットリロード、マルチブラウザサポート、極小設定で、拡張機能をより速くデリバリーできます。

#AI のため

構造化メタ情報、ターミナルエラー出力、Skills により、AI があなたの拡張機能を理解し拡張できます。

#コアコンセプト

Addfox は拡張機能開発における一般的な課題をカプセル化しています：

• エントリー自動検出 — 規約に従ってファイルを配置するだけで、entry の手動設定は不要
• Manifest インテリジェント処理 — ビルド後のパスを自動注入
• 開発時自動リロード — WebSocket でビルド完了を監視し、拡張機能を自動更新

#他のソリューションとの比較

ブラウザ拡張機能開発エコシステムは、これらの優れたフレームワークによってさらに豊かになりました。WXT は Vite の強力なパフォーマンスと設計されたプラグインシステム、そして直感的な規約ベースの開発体験をもたらしました。Plasmo は充実したクラウドサービス統合とすぐに使える優れた開発体験を提供しました。Extension.js はシンプルで使いやすく、迅速なプロトタイピングに最適です。各フレームワークは拡張機能開発のハードルを下げるために重要な貢献をしています。

Addfox はこれらの優れた実践を参考にしながら、独自の道を歩んでいます：

Addfox のユニークな優位性：

• Rsbuild の極限速度 — Vite/Parcel ソリューションと比較して、コールドスタートとホットアップデートがより高速
• AI ファースト設計 — 内蔵 llms.txt、構造化エラー出力、Skills サポートで、AI 支援開発のために特別に設計
• 最大限の自由 — ファイル構造を強制せず、カスタム API がなく、お好みのコード構成方法を使用可能
• 真のフレームワーク非依存 — コンポーネントのラッピングや特殊なアダプターは不要で、あらゆる UI フレームワークとシームレスに連携

#クイックスタート

# 脚手架を使用してプロジェクトを作成
pnpm create addfox-app

# プロジェクトディレクトリに移動
cd my-extension

# 開発サーバーを起動
pnpm dev

app/popup/index.tsx ファイルを編集し、保存すると拡張機能が自動的にリロードされます。

#次のステップ

• インストールガイド — 詳細なプロジェクト作成手順
• ディレクトリ構造 — プロジェクト構成方法について
• 設定リファレンス — すべての設定オプションを確認