Hot Reloading for Chrome Extensions

Chrome 拡張機能開発のホットリロード

Manifest V3（MV3）拡張機能向けに、依存関係ゼロのホットリロードシステムを提供します。このシステムでは、ソースファイルが変更されるたびに拡張機能とタブが自動的に再読み込みされるため、chrome://extensions で手動で再読み込みする必要がありません。

仕組み

このシステムは、サーバー側のウォッチャーとクライアント側のリスナーで構成されます。

1. ウォッチャー（Node.js）：開発者のマシン上で動作します。ネイティブの fs.watch を使ってプロジェクトディレクトリを監視し、Server-Sent Events（SSE）エンドポイント（/events）を公開します。ファイルの変更を検出すると、「reload」シグナルをブロードキャストします。
2. クライアント（JavaScript）：拡張機能のバックグラウンドサービスワーカーに挿入されます。EventSource を使ってウォッチャーサーバーに接続します。「reload」シグナルを受信すると、開いている拡張機能のタブ（オプションページ、ポップアップ）を再読み込みした後、chrome.runtime.reload() を呼び出して拡張機能自体を再読み込みします。

エージェント向け実装ガイド

現在のプロジェクトにホットリロードを実装するには、次の手順に従ってください。

1. ソースファイルをコピーする

スキルの examples/ ディレクトリから、次のファイルをプロジェクトのルートまたは指定した tools/ ディレクトリにコピーします。

• examples/hot-reload-server.mjs -> hot-reload-server.mjs
• examples/hot-reload-client.js -> hot-reload-client.js

2. バックグラウンドスクリプトを設定する

拡張機能のバックグラウンドサービスワーカー（例：service-worker.js）を更新し、クライアントスクリプトをインポートします。ファイルの1行目に記述してください。

importScripts('hot-reload-client.js');

3. 権限を更新する

manifest.json に、開発モードを検出するための management と、開いている拡張機能のページを再読み込みするための tabs が含まれていることを確認します。

{
  "permissions": [
    "management",
    "tabs"
  ]
}

4. 実行手順をユーザーに伝える

ターミナルでウォッチャーサーバーを起動するよう、ユーザーに伝えます。

node hot-reload-server.mjs

追加リソース

例

examples/ にある、動作する設定と実装スクリプト：

• examples/hot-reload-server.mjs - Node.js のウォッチャーサーバー（プロジェクトにコピーします）。
• examples/hot-reload-client.js - 拡張機能側のクライアント（プロジェクトにコピーします）。