はじめに

Chrome 拡張機能の開発をしていて、ファイルの変更後に毎回 chrome://extensions を開いて手動で更新するのがダルかったので、ファイルの変更を検知して自動で更新してくれる方法を調べた。

ほぼほぼ元記事通りの内容だけど、忘れないようにメモしておく。

TL;DR

  • xpl/crx-hotreload の hot-reload.js をローカルに保存
  • manifest.json に "background": { "scripts": ["hot-reload.js"] } を追加
  • 開発中の拡張機能を chrome://extensions で読み込み(更新)
この記事が参考になった方
ここかここからチャージや購入してくれると嬉しいです(ブログ主へのプレゼントではなく、ご自身へのチャージ)
欲しいもの / Wish list

目次

  1. はじめに
  2. TL;DR
  3. 環境・条件
  4. 詳細
    1. ローカルに手動で保存
    2. npm を使う
  5. まとめ
  6. その他・メモ
  7. 参考文献

環境・条件

  • Google Chrome
    • バージョン: 77.0.3865.90（Official Build）（64 ビット）
1
2
3
4
$ sw_vers
ProductName:	Mac OS X
ProductVersion:	10.14.6
BuildVersion:	18G95

詳細

ローカルに手動で保存して利用する方法と、npm を使う方法とある。

ローカルに手動で保存

Chrome Extensionの開発時にホットリロードさせる - Qiita の内容通りに進めれば良い。

hot-reload.js をローカルに保存。src/js に curl で保存する場合は下記コマンド。

1
$ curl https://raw.githubusercontent.com/xpl/crx-hotreload/master/hot-reload.js -o src/js/hot-reload.js

manifest.json に hot-reload.js をバックグラウンドで実行するように変更。下記は src/manifest.json に配置されている場合の例。

1
2
3
4
5
6
7
8
9
10
11
12
 {
   "manifest_version": 2,
   ...
   ],
+  "background": {
+    "scripts": [
+      "js/hot-reload.js"
+    ]
+  },
   "permissions": [
   ...
 }

最後に chrome://extensions で拡張機能を読み込み。

以降はファイル更新時に「拡張機能のリロード」と「(その拡張機能が動作しているアクティブ)タブのリロード」が行われるようになる。

npm を使う

crx-hotreload をインストール。

1
$ npm i -d crx-hotreload

background.js に追記。

1
2
import hotreload from 'crx-hotreload';
// もしくは const hotreload = require('crx-hotreload');

manifest.json を編集。(手動でやる場合と同様)

1
2
3
4
5
6
7
8
9
10
11
12
 {
   "manifest_version": 2,
   ...
   ],
+  "background": {
+    "scripts": [
+      "js/background.js"
+    ]
+  },
   "permissions": [
   ...
 }

依存関係を解決して bundle してくれるコマンドでビルド。

1
$ xxxx

あとは npm-watch と組み合わせることで、ファイル変更→変更検知→ビルド→拡張機能再読込み という流れにできる(はず)。

まとめ

  • xpl/crx-hotreload の hot-reload.js をローカルに保存
  • manifest.json に "background": { "scripts": ["hot-reload.js"] } を追加
  • 開発中の拡張機能を chrome://extensions で読み込み(更新)

その他・メモ

xpl/crx-hotreload をベースに作られてる corupta/chrome-extension-hot-reload てのもあるっぽい。

参考文献

関連記事

この記事が参考になった方
ここかここからチャージや購入してくれると嬉しいです(ブログ主へのプレゼントではなく、ご自身へのチャージ)
欲しいもの / Wish list