Chrome Extensionの開発時にホットリロードさせる


おそらくChrome本体としては、開発中のChrome Extensionをホットリロードする機能はなく、コードを変更するたびに手動リロードするか、webpack等をかませる必要があると思いますが、もう少し簡単な方法がありました。

TL;DR

hot-reload.jsを使う

手順

  1. ホットリロードしてくれるモジュールhot-reload.jsをローカルに保存する。
  2. manifest.jsonに以下を追加する
"background": { "scripts": ["hot-reload.js"] }

(既に他のbackground.scriptsがあれば配列に追加する)

これでリロードすれば後はファイルの追加・変更・削除を検知してホットリロードしてくれます。

特徴など

これだけだとちょっと寂しいので特徴などをいくつか

  • 軽い!(hot-reload.jsは1.2KB、50行程度のスクリプト)
  • 1秒毎にディレクトリ内のファイルのタイムスタンプを見て、変更を検知
  • ディベロッパーモードのときだけ動作