死ぬほど参考にさせていただいたサイト
基本的には下記のサイトを参考に進めればいけます。(最高の記事ありがとうございます、大感謝祭)
本記事では上記で紹介されていたホットリロードがエラーで動かなかったため、別の方法でホットリロードできたので紹介したい。
環境
- typescript 4.3.2
- webpack 5.38.1
- node 15.13.0
- yarn 1.22.10
最終形
先に最終形を載せておく。
content_scriptsのみ対応としたため、かなりミニマムになっている。
ディレクトリ構造
. ├── dist │ ├── background.js │ ├── main.js │ └── manifest.json ├── manifest.json ├── package.json ├── src │ ├── background.js │ └── main.tsx ├── tsconfig.json ├── webpack.config.js └── yarn.lock
background.js
が存在しているのは、のちに説明するホットリロード用。
ホットリロード
上記サイトで紹介されているwebpack-extension-reloader
は2年前に更新が止まっているプラグインで、どうもwebpack 5だと動かないっぽい。代わりにcrx-hotreloadを使う。
インストール
yarn add crx-hotreload
src/background.jsには下記1行を記載
import hotreload from 'crx-hotreload';
webpack.config.js
module.exports = { entry: { main: './src/main.tsx', // 追加 background: './src/background.js', },
manifest.json
// 追加 "background": { "scripts": [ "background.js" ] },
package.jsonにdev
コマンドを追加
"scripts": { "build": "webpack --mode production", // 追加 "dev": "webpack --mode development --watch", },
これでyarn dev
を実行後、試しにsrc/main.tsx
を編集してみると、ホットリロードされることが確認できると思います。
更新されない方は、一度chrome://extensions/
から更新ボタンをクリックしてパッケージを読み込み直すと、ホットリロードされるようになると思います。
終わり
そもそもChrome拡張作ること自体少なくなってきたけど、Reactで開発できるのは気持ちいい。