nashidos’s diary

アルゴリズムとか機械学習とか色々

Chrome拡張の開発中にファイル内容の変更を自動で反映する方法

この記事ではコードの変更を自動で検知して更新する方法について解説します。

Chrome拡張の開発ではホットリロードのファイルをダウンロードし、manifest.jsonで設定するだけで自動更新が可能になります。

ホットリロード

ホットリロードとはコードを変更したときマニュアルでリロードしなくとも、自動でリロードしてくれる機能のことを言います。

この設定をするだけで開発のスピードが格段に上がります。

hot-reload.jsのダウンロード

Chrome拡張開発用のホットリロードのファイルは下記リンクから参照できるのでコピペもしくはダウンロード等してください。
https://github.com/xpl/crx-hotreload/blob/master/hot-reload.js

意外に50行程度のシンプルなコードで構成されています。

manifest.jsonに設定

hot-reload.jsを用意できたらmanifest.jsonで設定します。

"background": {
        "scripts": ["hot-reload.js"]
    }

これでホットリロードできるようになり、1秒ごとにタイムスタンプを確認して変更があれば更新してくれます。

おわり