この記事は何
Google Chrome の拡張機能を作成している際、
特定の機能がうまく動作してくれない事象に遭遇しました。
その調査の際に知った Chrome 拡張の３つの世界についての備忘録です。
また、この記事の内容は Manifest V3 に準拠しています。
３つの世界って？
恐らく、正式な名称として３つの世界というものがあるわけではなさそうで、
具体的には以下のものを指します。
作成したい拡張機能によって、以下の機能のいずれか、もしくは複数を駆使して作成していくことになります。
- Page Action
- Content Scripts
- Service Worker
Page Action
ツールバーに表示されている、拡張機能のアイコンをクリックした際に処理を行わせることができます。
別途用意した html ファイルをポップアップとして表示したり、後述する Content Scripts を実行したりなど。
詳細は以下の公式ドキュメントから参照できます。
Content Scripts
ブラウザ上の DOM の操作を行うことができます。
直接操作できる Chrome API には制限があります。
具体的な API については以下を参照ください。
直接操作できない API については、Page Action もしくは Service Worker で操作を行う必要があります。
Service Worker
Chrome を起動している間に、バックグラウンドで動くスクリプトです。
自分がハマったポイントとして、Window 関数や DOM などは、直接 Serivce Worker からは操作することができません。
詳細は以下の公式ドキュメントから参照できます。
必要に応じてやり取りを行う
例えば、Service Worker 上で何かしらのイベントを感知し、
その際にブラウザ上に確認ダイアログ (Window.confirm) を出したいとします。
そのまま Service Worker 上からは Window.confirm を操作することはできないため、
Content Scripts に対してリクエストをし、Content Scripts 上で確認ダイアログを表示するという手段が取れます。
リクエストを行う手段として、sendMessage()、リクエストに対してのレスポンスを処理する手段としてsendResponse() というものが用意されています。
また、上記は単発でのリクエストでの用途になりますが、長期的な接続を行うための手段として connect()が用意されています。
詳細は以下の公式ドキュメントから参照できます。
最後に
ネット上で拡張機能について調査すると、Manifest V2 までのものと Manifest V3 のものが混在しており、
実際に動かそうとしてみると Manifest V3 では動かない、といったことがよく発生し混乱しました。
とはいえ、作り方を理解しある程度自在に開発ができるようになれば
自分好みの拡張機能が作り放題になるので、引き続き理解を深めていこうと思います。