#ホットアップデート（HMR）

addfox dev コマンドは開発時のホットアップデート体験を提供します：コードを保存した後、自動的に再ビルドされ、WebSocket を介してブラウザ拡張機能にリロード通知が送信されます。

#動作メカニズム

ソースコード変更
    ↓
Rsbuild Watch 再ビルド
    ↓
ビルド完了 → WebSocket 通知
    ↓
ブラウザ拡張機能リロード
    ↓
ページ自動更新

#異なるエントリーのホットアップデートメカニズム

#Background / Service Worker

Background スクリプトは拡張機能リロードメカニズムを使用します：

1. コード変更 → Rsbuild 再ビルド
2. ビルド完了 → WebSocket でリロード命令を送信
3. chrome.runtime.reload() を呼び出して拡張機能全体をリロード
4. Service Worker が再起動し、新しいコードを読み込む

#Content Script

Content Script は再注入メカニズムを使用します：

1. コード変更 → Rsbuild 再ビルド
2. ビルド完了 → 拡張機能リロード
3. Content Script が一致するページに自動的に注入
4. 開いているタブページは自動的に更新されるように選択可能（設定を参照）

// addfox.config.ts
export default defineConfig({
  hotReload: {
    autoRefreshContentPage: true,  // content 変更時にページを自動更新、デフォルト true
  },
});

#Popup / Options / Sidepanel

ページクラスのエントリーは Rsbuild HMR メカニズムを使用します：

1. コード変更 → Rsbuild が HMR ホット置換を試みる
2. HMR が成功した場合 → ページが部分的に更新され、状態が保持される
3. HMR が失敗した場合 → 自動的にページ更新にフォールバック

#Firefox の特殊な処理

Firefox 開発モードでは web-ext ツールを使用して拡張機能を管理します：

• 拡張機能のリロードは web-ext によって処理され、Addfox の WebSocket ではありません
• 初回起動時に自動的に Firefox を開き、拡張機能を読み込みます
• 自動リロード（livereload）をサポート

#使用方法

# 開発サーバーを起動（HMR を自動的に有効にする）
addfox dev

# ターゲットブラウザを指定
addfox dev -b chrome
addfox dev -b firefox

#初回起動フロー

addfox dev を実行した後：

1. 初回ビルド完了
2. 設定に基づいて自動的にブラウザを起動
3. 開発中の拡張機能を読み込む
4. 拡張機能の popup/options ページを自動的に開く（open が設定されている場合）

#設定オプション

#ホットリロードポート

// addfox.config.ts
export default defineConfig({
  hotReload: {
    port: 23333,              // WebSocket ポート、デフォルト 23333
    autoRefreshContentPage: true,  // content 変更時にページを自動更新、デフォルト true
  },
});

#次のステップ

• browserPath 設定 — 開発時に自動的にブラウザを開く設定
• monitor デバッグ — エラーモニタリングパネルを使用したデバッグ
• config/hot-reload — ホットリロードの完全な設定オプション