Edited at

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

More than 1 year has passed since last update.

おそらく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秒毎にディレクトリ内のファイルのタイムスタンプを見て、変更を検知

  • ディベロッパーモードのときだけ動作