crxjsを使えばChrome拡張機能のReact開発環境がサクッと用意できる

2025-08-14 14:46:24

主張はタイトルで終わっている。crxjs、すごい！ほんとうにすごいんだ！というだけ。

あとは余談。

現代、React+TypeScript+Viteでフロントを書いている人は結構いると思う。

そこにcrxjsを組み合わせればあっという間に拡張機能も書けるのである。

実装例

githubに上げている。

拡張機能自体はピュアなJavaScriptだけでいい

拡張機能を作るだけなら、所定のファイル群とjsを書くでも全然いい。

例えばchrome公式チュートリアルが参考になる。

適当なディレクトリを作って、manifest.jsonとindex.htmlを書いてブラウザにインストールすればあっという間に出来上がる。

manifest.json

{
  "name": "Hello Extensions",
  "description": "Base Level Extension",
  "version": "1.0",
  "manifest_version": 3,
  "action": {
    "default_popup": "hello.html",
    "default_icon": "hello_extensions.png"
  }
}

index.html

<html>
  <body>
    <h1>Hello Extensions</h1>
  </body>
</html>

`crxjs`の何がいいか

以下の3点が挙げられる。

1. テンプレからでも後追いでも導入がラク

公式手順の通り進めればあっという間にできる。

ReactだけでなくVue, Solid, Svelteにも対応している。

2. manifest.jsonでロードする各スクリプトをビルド前のパスで書いたうえで、ビルド後の読み替えまで自動でやってくれる

本来manifest.jsonでは最終的にロードするjsファイルへのパスを指定する必要があるが、プロジェクトでのファイル名とビルド後のファイル名は往々にして一致しない。

単に拡張子が.tsから.jsに変わるだけならまだいいが、ファイル名自体変わったり、パスも変更になったりする場合もあり、そこまで考慮してjsonを書いておくか、ビルド後のフックなどで置き換える処理が必要になってくる。

そこをcrxjsが全て解決する。

以下のように、プロジェクトソース基準でのファイルパスを指定しておけば、ビルド後にいい感じに読み替えたmanifest.jsonをお出ししてくれる。

import { defineManifest } from "@crxjs/vite-plugin";
export default defineManifest({
  ...(中略)...
  background: {
    service_worker: "src/background.ts",
  },
  ...(中略)...
}

3. ホットリロードが効く

当初npm initからスクラッチで始めたため、ソースを更新→拡張機能の再インポート→ページリロードというのを毎度ポチポチ繰り返すのが地味に苦痛だった。

普段からviteでWebアプリを作っている身としてはホットリロードはぜひ欲しいところだったが、crxjsの設定一つでサクッと導入できた。

というわけでみんなも気軽に拡張機能を作ろう。