Chromeの拡張機能環境構築
確か以前Chrome拡張機能の開発環境構築について記事を書きました。
あれからだいぶ時間が経って、ちょっとした拡張機能を作成したいなと思ったので最近の拡張機能の開発環境がどうなっているのか調査しました。
今回、非常に参考になったのが以下のページです。
https://zenn.dev/alvinvin/books/chrome_extension/viewer/chapter04
ここで紹介されていた以下のテンプレートリポジトリーが確かに良さそうだなと感じ使ってみることにしました。かなりわかりやすかったです。これを読んでからchromeのapiのドキュメントを読めば、拡張機能の概要を把握した上で詳細を理解できます。
https://github.com/sinanbekar/browser-extension-react-typescript-starter
とりあえず、テンプレートからリポジトリを作成します。
Cloneしてきました。
三年の月日が経ち、すっかりChrome拡張機能をどうやってやるのかを忘れてしまったので、冒頭で参考にしなったと挙げたサイトをそのまま参考にやっていきます。
まず、自分のnodeのバージョンなどを確認
takumi@ ~/Documents/src/private_src/daily/2024-11-10/tmp202411$ node --version
v20.12.2
takumi@ ~/Documents/src/private_src/daily/2024-11-10/tmp202411$ npm --version
10.5.0
そのまま参考にといった矢先、私はyarnではなくnpmを使っていきます。
あんまり明確な理由はないですが、npm派なんです。
npm install
takumi@ ~/Documents/src/private_src/daily/2024-11-10/tmp202411$ npm install
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: browser-extension-react-ts-starter@0.1.0
npm ERR! Found: jest@29.5.0
npm ERR! node_modules/jest
npm ERR! dev jest@"^29.5.0" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer jest@"^26.0.1 || ^27.0.0" from jest-chrome@0.8.0
npm ERR! node_modules/jest-chrome
npm ERR! dev jest-chrome@"^0.8.0" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR!
npm ERR!
npm ERR! For a full report see:
npm ERR! /Users/takumi/.npm/_logs/2024-11-09T15_25_57_203Z-eresolve-report.txt
npm ERR! A complete log of this run can be found in: /Users/takumi/.npm/_logs/2024-11-09T15_25_57_203Z-debug-0.log
このエラーは、npm install 実行時に発生する依存関係の競合です。具体的には、jest のバージョンに関するもので、現在インストールされている jest（v29.5.0）が、jest-chrome@0.8.0 で要求されるバージョン（^26.0.1 || ^27.0.0）と一致しないために発生しています。
一旦、最近の環境構築ってどうなん？程度で見てるだけなので、まあ一旦スルーします。
npm install --legacy-peer-deps
jest-chrome@0.8.0の更新が止まっていそうなので実際に使うときは検討しないといけないなという感じでしょうか。
npm run dev
というわけで、次に実行してみます。
正直、以下の内容に沿ってやってるだけです。下記を見れば十分わかります。
takumi@ ~/Documents/src/private_src/daily/2024-11-10/tmp202411$ npm run dev
> browser-extension-react-ts-starter@0.1.0 dev
> run-s clean && vite
> browser-extension-react-ts-starter@0.1.0 clean
> run-p clean:*
> browser-extension-react-ts-starter@0.1.0 clean:dist
> rimraf dist
> browser-extension-react-ts-starter@0.1.0 clean:dist-firefox-v2
> rimraf dist-firefox-v2
VITE v4.3.9 ready in 522 ms
➜ Local: http://localhost:5173/
➜ Network: use --host to expose
➜ press h to show help
動いたら、distができます。
distを拡張機能で読み込ませるみたいです。
読み込んだらページが開くので拡張機能のボタンをピンで止めときます。
言われた通りに、ボタンを押したけど・・・あれ・・・？
エラーが出ている
このエラーに行き着くまでに、右往左往していました。
というのも、Wating for service worker….xxxxと表示されていますが、これが何によって発生している問題なのかはここからは読み取れないからです。
拡張機能の画面を見てやっとエラーのログが見れました。
なんかchrome.runtime.getURL()の部分でエラーが出ている。
このエラーに関しては、今回の内容とは分けて考えた方がいいなと思ったので別記事にしました。
上記の対策を入れて実行すると正しく動きました。
エラーも出なくなってます。
Hot Reload確認
参考にしたサイトと同じように文字列を変更して保存するとHot Reloadが走るのか確認してみます。
保存するとメッセージが流れ
13:58:02 [vite] hmr update /content/Content.tsx, /global.css
ちゃんと変化していることが確認できました。
まとめ
久しぶりにChrome拡張機能の開発環境について調査してみました。
結論、テンプレートから作成した開発環境の場合、適度に構成を見直す機会が必要というのがわかりました。まあ、そりゃーChromeもアップデートされるし、依存するライブラリもアップデートされていくものなので仕方ない。半年後や数年後にふと開発環境を開くと「動かない…！」という事態はあるあるですが、たまにイジって準備だけしておくというのが大事だなと思いました。
ただ、一旦はこのChromeのテンプレートを使っていこうかなと思います。まだ見れてないですが、jestの依存関係も怪しそうなので、問題があればそこの記事も書いていきたいです。