おそらくChrome本体としては、開発中のChrome Extensionをホットリロードする機能はなく、コードを変更するたびに手動リロードするか、webpack等をかませる必要があると思いますが、もう少し簡単な方法がありました。
TL;DR
手順
- ホットリロードしてくれるモジュールhot-reload.jsをローカルに保存する。
- manifest.jsonに以下を追加する
"background": { "scripts": ["hot-reload.js"] }
(既に他のbackground.scriptsがあれば配列に追加する)
これでリロードすれば後はファイルの追加・変更・削除を検知してホットリロードしてくれます。
特徴など
これだけだとちょっと寂しいので特徴などをいくつか
- 軽い!(hot-reload.jsは1.2KB、50行程度のスクリプト)
- 1秒毎にディレクトリ内のファイルのタイムスタンプを見て、変更を検知
- ディベロッパーモードのときだけ動作