ディレクトリ構造

Addfox は「設定より規約」のデザイン理念を採用しています。標準的なディレクトリ構造を理解することで、素早く始めてベストプラクティスに従うことができます。

プロジェクトルート

典型的な Addfox プロジェクトの構造は以下の通りです：

my-extension/
├── .addfox/           # ビルド出力とキャッシュ（自動生成）
├── app/                # アプリケーションソースコード（設定可能）
├── public/             # 静的リソース
├── addfox.config.ts       # Addfox 設定ファイル
└── package.json        # プロジェクト依存関係

.addfox ディレクトリ

.addfox はフレームワークによって自動生成され、以下を含みます：

extension/ — デフォルトのビルド出力ディレクトリ（outDir で変更可能）
cache/ — ビルドキャッシュ、後続のビルドを高速化するために使用

Tip

必要でない限り cache ディレクトリを削除しないでください。削除するとビルド速度やブラウザユーザーデータの再利用に影響します。

app ディレクトリ

app/ はデフォルトのアプリケーションソースコードディレクトリで、すべての拡張エントリと manifest ファイルが格納されます。appDir 設定項目で変更できます：

// addfox.config.ts
export default defineConfig({
  appDir: "src",  // src ディレクトリに変更
});

推奨されるディレクトリ構造

マルチファイル構造（推奨）

シングルファイル構造

app/
├── background/
│   └── index.ts          # Service Worker / バックグラウンドスクリプト
├── content/
│   └── index.ts          # コンテンツスクリプト
├── popup/
│   ├── index.html        # ポップアップ HTML（オプション）
│   └── index.ts          # ポップアップスクリプト
├── options/
│   ├── index.html        # オプションページ HTML（オプション）
│   └── index.ts          # オプションページスクリプト
├── sidepanel/
│   └── index.ts          # サイドパネル
├── manifest/
│   ├── manifest.json           # 基本設定
│   ├── manifest.chromium.json  # Chrome 上書き
│   └── manifest.firefox.json   # Firefox 上書き
└── ...

app/
├── background.ts         # バックグラウンドスクリプト
├── content.ts            # コンテンツスクリプト
├── popup.html            # ポップアップページ
├── popup.ts              # ポップアップスクリプト
├── manifest.json         # 拡張マニフェスト
└── ...

Info

エントリ検出ルールの詳細については、ファイルベースのエントリと entry 設定を参照してください。

public ディレクトリ

public/ は静的リソースを格納するために使用され、ビルド時に出力ディレクトリにそのままコピーされ、バンドル処理は行われません：

public/
├── icons/                # 拡張アイコン
│   ├── icon16.png
│   ├── icon48.png
│   └── icon128.png
├── _locales/             # 国際化ファイル
│   └── zh_CN/
│       └── messages.json
└── welcome.html          # ウェルカムページ

エントリタイプ

Addfox は以下の組み込みエントリをサポートしています：

エントリ名	タイプ	説明	HTML 生成
`background`	スクリプトのみ	Service Worker / バックグラウンドスクリプト	いいえ
`content`	スクリプトのみ	コンテンツスクリプト	いいえ
`popup`	スクリプト+ページ	ツールバーポップアップ	はい
`options`	スクリプト+ページ	拡張オプションページ	はい
`sidepanel`	スクリプト+ページ	サイドパネル	はい
`devtools`	スクリプト+ページ	開発者ツール	はい
`offscreen`	スクリプト+ページ	Offscreen ドキュメント	はい

Warning

組み込みのエントリ名は変更不可です。Addfox はこれらの名前に依存して自動認識を行います。

設定ファイル

addfox.config.ts / addfox.config.js

これは Addfox の必須設定ファイルで、以下を宣言するために使用されます：

拡張マニフェスト（manifest）
エントリファイル（entry）
出力ディレクトリ（outDir）
Rsbuild プラグインと設定

最小設定例

import { defineConfig } from "addfox";

export default defineConfig({
  // 設定を省略すると、フレームワークは app/ からエントリと manifest を自動検出します
});

#ディレクトリ構造

#プロジェクトルート

#.addfox ディレクトリ

#app ディレクトリ

#推奨されるディレクトリ構造

#public ディレクトリ

#エントリタイプ

#設定ファイル

#addfox.config.ts / addfox.config.js

#最小設定例

#関連設定