Addfox
  • 日本語

      • ブラウザ起動

      Addfox は開発時に自動的にブラウザを起動して拡張機能を読み込むことができ、開発効率を向上させます。

      クイックスタート

      開発コマンドを実行：

      pnpm
      npm
      yarn
      bun
      pnpm dev

      開発サーバーの初回起動時に自動的に：

      1. 拡張機能をビルド
      2. ブラウザを開く
      3. 開発中の拡張機能を読み込む

      Scripts を使用して起動（推奨）

      package.json で scripts を設定すると、異なるブラウザをより簡潔に起動できます：

      {
  "scripts": {
    "dev": "addfox dev",
    "dev:chrome": "addfox dev -b chrome",
    "dev:edge": "addfox dev -b edge",
    "dev:brave": "addfox dev -b brave",
    "dev:firefox": "addfox dev -b firefox"
  }
}

      設定後、直接使用：

      pnpm
      npm
      yarn
      bun
      # Chrome（デフォルト）
pnpm dev

# その他のブラウザ
pnpm dev:edge
pnpm dev:firefox

      Chromium 系ブラウザ

      Addfox は以下の Chromium ベースのブラウザをネイティブでサポートしています：

      ブラウザCLI パラメータ説明
      Google Chrome-b chromeデフォルトブラウザ
      Chromium-b chromiumオープンソースバージョン
      Microsoft Edge-b edgeWindows に付属
      Brave-b braveプライバシーブラウザ
      Vivaldi-b vivaldiカスタマイズブラウザ
      Opera-b operaオペラブラウザ
      Santa-b santaSanta ブラウザ
      Arc-b arc新形態ブラウザ
      Yandex-b yandexYandex ブラウザ
      BrowserOS-b browserosBrowserOS
      Custom-b customカスタムブラウザ（設定で browser.custom を指定する必要がある）

      CLI 経由で直接起動

      scripts を使用しない場合は、CLI でブラウザを直接指定できます：

      pnpm
      npm
      yarn
      bun
      # Chrome（デフォルト）
pnpm addfox dev

# その他のブラウザ
pnpm addfox dev -b edge
pnpm addfox dev -b brave
pnpm addfox dev -b vivaldi

      Chromium ブラウザ設定

      ブラウザがデフォルトの位置にない場合は、設定で browser オブジェクトを指定できます：

      // addfox.config.ts
export default defineConfig({
  browser: {
    chrome: { path: "/path/to/chrome" },
    edge: { path: "/path/to/edge" },
    brave: { path: "/path/to/brave" },
  },
});

      各ブラウザエントリは以下のフィールドをサポートします：

      • path — ブラウザ実行ファイルパス
      • profile — カスタム user-data(profile)ディレクトリ。相対パスはプロジェクトルートを基準に解決されます（デフォルト: <outputRoot>/cache/browser-profile/<name>-user-data)
      • keepBrowserProfile — 起動間でこのブラウザの profile を保持し、トップレベルの keepBrowserProfile を上書きします
      Warning

      browserPath は非推奨（deprecated）です。browser に移行してください：

      // 移行前（非推奨）
export default defineConfig({
  browserPath: { chrome: "/path/to/chrome" },
});

// 移行後
export default defineConfig({
  browser: { chrome: { path: "/path/to/chrome" } },
});

      同じブラウザに両方が設定されている場合、browser が優先されます。

      各プラットフォームの例

      macOS：

      export default defineConfig({
  browser: {
    chrome: { path: "/Applications/Google Chrome.app/Contents/MacOS/Google Chrome" },
    edge: { path: "/Applications/Microsoft Edge.app/Contents/MacOS/Microsoft Edge" },
  },
});

      Windows：

      export default defineConfig({
  browser: {
    chrome: { path: "C:\\Program Files\\Google\\Chrome\\Application\\chrome.exe" },
    edge: { path: "C:\\Program Files (x86)\\Microsoft\\Edge\\Application\\msedge.exe" },
  },
});

      Linux：

      export default defineConfig({
  browser: {
    chrome: { path: "/usr/bin/google-chrome" },
    chromium: { path: "/usr/bin/chromium-browser" },
  },
});

      Chromium キャッシュユーザーデータ

      デフォルトでは、起動ごとに新しいユーザーデータディレクトリが使用されます。保持する必要がある場合（例：ログイン状態を維持）、package.json に追加：

      {
  "scripts": {
    "dev:keep-profile": "addfox dev -b chrome --keep-browser-profile",
    "dev:edge:keep-profile": "addfox dev -b edge --keep-browser-profile"
  }
}

      または CLI で直接実行：

      pnpm
      npm
      yarn
      bun
      pnpm addfox dev --keep-browser-profile

      または設定で有効にします：

      export default defineConfig({
  keepBrowserProfile: true,
});

      またはブラウザごとに上書きします（トップレベルの keepBrowserProfile より優先）：

      export default defineConfig({
  browser: {
    chrome: { keepBrowserProfile: true },
  },
});

      ユーザーデータは .addfox/cache/browser-profile/<name>-user-data ディレクトリに保存されます。

      Firefox

      Firefox 開発モードでは web-ext ツールを使用して拡張機能のライフサイクルを管理します。

      Firefox の起動

      設定された script を使用：

      pnpm dev:firefox

      または CLI で直接実行：

      pnpm
      npm
      yarn
      bun
      pnpm addfox dev -b firefox

      Firefox の特徴

      • 拡張機能のリロードは web-ext によって処理され、Addfox の WebSocket ではありません
      • 自動的に Firefox を開き、拡張機能を読み込みます
      • ファイル変更時の自動リロードをサポート

      Firefox パス設定

      export default defineConfig({
  browser: {
    firefox: { path: "/Applications/Firefox.app/Contents/MacOS/firefox" },
  },
});
      Info

      Firefox のプロファイルは web-ext によって自動的に管理されるため、キャッシュオプションを手動で設定する必要はありません。

      デバッグのヒント

      Service Worker を表示

      1. chrome://extensions/ を開く
      2. 開発中の拡張機能を見つける
      3. "Service Worker" をクリックしてバックグラウンドスクリプトコンソールを表示

      Content Script を表示

      1. ウェブページで右クリック → 検証
      2. Console パネルに切り替え
      3. 対応する拡張機能のコンテキストを選択

      エラーモニタリングを使用

      package.json に debug script を追加：

      {
  "scripts": {
    "dev:debug": "addfox dev --debug",
    "dev:firefox:debug": "addfox dev -b firefox --debug"
  }
}

      次に実行：

      pnpm dev:debug

      または CLI で直接有効にします：

      pnpm
      npm
      yarn
      bun
      pnpm addfox dev --debug

      関連設定