「JavaScriptで作るいまどきのブラウザ拡張」を読んだ

技術書chat_bubble0

「JavaScriptで作るいまどきのブラウザ拡張」を読みました。元々は2023年の技術書典15で頒布された本で、私が購入したのはインプレスが技術の泉シリーズとして販売している方のKindle版です。年末年始にセール対象になっていたのでそのタイミングで購入しました。

JavaScriptで作るいまどきのブラウザ拡張 技術の泉シリーズ

Michinari NUKAZAWA (著)

 https://amzn.to/41kRS3a

Amazonの商品ページの説明に「JavaScriptを使ってクロスブラウザアドオンを開発したい方必見の1冊！」とあり、今までFirefoxを視野に入れた拡張機能開発をあまりしてこなかった自分にとって良さそうだと思ったのが購入の理由です。ただ、少なくとも私にとっては知識の再確認という感じになりました。

商品ページの説明的には拡張機能開発の初心者向けの本という印象を受けますが、内容としては初心者向けというには少し不親切のよう思います。拡張機能を構成するファイルの概要解説からデバッグ、ストアでのリリースまでをざっくりと解説されてはいるのですが、ハンズオン形式で何かを作るというわけではないので、初心者が読んでも開発の流れをなんとなく理解するに留まると思います。結局のところ、手を動かして理解するのが一番でしょうね。ネット上の記事やGoogleが公開しているサンプルを参考にする他、生成AIも役立つと思います。ネット上の記事を参考にする場合はManifestのバージョンに注意してください。今ならManifest V2の情報は無視してManifest V3の情報だけを拾っていくのが良いでしょうね。

この本は著者の認識をざっくりと書き起こした本という感じで、強いて言うなら拡張機能開発の経験者に向けた知識の再確認本という感じです。個人的に期待していたクロスブラウザの観点では「APIの互換性」「ブラウザの判定」「mozillaが提供しているpolyfill」について軽く触れられているだけでした。残念。

以下、個人的にツッコミたくなったところについて。

ツッコミたくなったところ

3-2 コンテンツスクリプトの読み込み

著者はコンテンツスクリプトの読み込み（挿入）方法についてGoogleのドキュメント通りに「declared statically」「declared dynamically」「programmatically injected」の3つに分類して解説しておりそれは良いのですが、以下のような変なことは書かないで欲しいですね。こんなのケースバイケースでしか無いというかなんというか…。

このうち、実際に使われるのは programmatically injected であることが多い。 具体的には、chrome.scripting.executeScript() API にてコンテンツスクリプトを挿入する。 実際のWebExtensionsでは、バックグラウンドスクリプトからコンテンツスクリプトを読み込み、content_scripts キーは使わない（らしい）。　 少なくとも、市井のWeb記事などには推奨しているものがいくつかある。

ただこの解説の流れで節の最後に「SPA対応という形でchrome.scripting.executeScriptを使用しているWebの記事があるが、Observerでも対応できるのでURLを監視する必要は無く、SPA対応という説明には懐疑的」というようなことが書かれてあり、それについては著者の認識も理解できます。おそらく著者は、コンテンツスクリプトでDOMを監視するかバックグラウンドスクリプトでURLを監視するかの違いだと言いたいのだと思います。とは言ってもSPAに対応させることが目的なら、結局はバックグラウンドスクリプトでURLを監視する方がシンプルな実装になる気はします。

5-4 ビルドスクリプト

package.jsonを使用してビルドを実行するというようなことがざっくりと書かれている節ですが、クロスブラウザの観点で解説されているわけではないのが残念。

5章では著者の開発したDaisy WarekiConvという拡張機能のディレクトリ構造が掲載されており、そこにmanifest.chrome.json、manifest.firefox.jsonがあるので、ビルドの解説ではそれに触れたほうが良かったのではと思います。私の知る限りではクロスブラウザの観点ではmanifest.jsonを分けるのが一般的で、ビルドでそれを考慮する必要があるので。

6-2 開発用のChromeプロファイルで起動

デバッグ用のプロファイルを用意してpackage.jsonのscriptsフィールドに起動コマンドを記述しておくという点については私も賛成ですが、紹介されている起動方法がchromiumコマンドを使用するというもので、それは万人向けでは無いように思います。

7章のFirefoxのストアでソースコードを提出するという解説の流れで「筆者がWindowsを使っていないため、 ビルド環境はUbuntuのみ対応としているが、いまのところ審査に通っている。」と書かれているので、著者はUbuntuを使用しているのでしょう。

6-3でmozillaのweb-extを使用したFirefoxの起動方法を紹介されているので、私としてはChromeの起動もweb-extでやれば良いのではと思っています。

web-extにおいてChromeは「web-ext run -t chromium」で起動可能で、--chromium-binaryオプションを使用することで任意のChromiumベースブラウザが起動可能です。また--chromium-profileオプションを使用することで任意のプロファイルで起動可能です。オプションの詳細はドキュメントを確認してください。

なお私が公開している「Auto hide next up card for Amazon Prime Video」という拡張機能を例にすると、記事執筆時点ではenv-cmdを使用してweb-ext実行時に.envを参照する形で任意のChromiumベースブラウザ・任意のプロファイルで起動できるようにしています。

"dev:firefox": "env-cmd -f .env.firefox web-ext run",
"dev:chrome": "env-cmd -x -f .env.chrome web-ext run -t chromium --chromium-binary=$CHROMIUM_BINARY_PATH --chromium-profile=$CHROMIUM_PROFILE_PATH",

ちなみに私のこの拡張機能に関してはユーザースクリプトとしてもビルドできるようにしている都合上、開発が一種の縛りプレイのような感じになっています。コンテンツスクリプトのみの拡張機能なので実現できているのですが、ユーザースクリプト込みでのクロスブラウザは機能を拡張するほどに面倒な点や妥協点が出てくる可能性があるので、私としてはあまりオススメしません。

8 WebExtensionsとスレッド/プロセス

主に著者の環境での検証と推測をベースとした解説をされている章です。8-2でサンプルに検証コードを用意していると書いているにも関わらず、GitHubのサンプルコードのリポジトリには該当のコードが見当たらないのが残念でした。興味深い章ではありましたが、検証コードを本に載せているわけでも無いのにコンソールに出ているログの画像だけ出されても…という感じもするちょっと残念な章でした。

所感

自分にとっては目新しい情報はほぼありませんでした。まあ知識の再確認が出来たと思うことにします。結局、クロスブラウザを意識した開発については既存のクロスブラウザの拡張機能を参考にしつつ自分なりにやるしかなさそうですね。

ブラウザ拡張機能

藤乃音りょう