React, TypescriptでChrome Extensionを開発する(ホットリロード対応)

死ぬほど参考にさせていただいたサイト

基本的には下記のサイトを参考に進めればいけます。(最高の記事ありがとうございます、大感謝祭)

code-log.hatenablog.com

本記事では上記で紹介されていたホットリロードがエラーで動かなかったため、別の方法でホットリロードできたので紹介したい。

環境

• typescript 4.3.2
• webpack 5.38.1
• node 15.13.0
• yarn 1.22.10

最終形

先に最終形を載せておく。

github.com

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で開発できるのは気持ちいい。