ブラウザ拡張機能

ブラウザ拡張機能とは

ブラウザ拡張機能は、ChromeやEdge、Firefoxに後付けで機能を追加する小さなプログラムです。広告ブロッカー、パスワードマネージャー、翻訳ツールなどが代表例で、Web技術([[JavaScript]]・HTML・CSS)で作られます。ChromeとEdgeは同じ拡張形式(Chromium系)を共有しており、1つの成果物を両方のストアへ出せます。

構成要素 — manifest.jsonと3つの実行場所

拡張の設計図が manifest.json です。名前・バージョン・権限と、どのコードをどこで動かすかを宣言します。コードの実行場所は主に3つあります。

実行場所	動く場所	用途
background(service worker)	ページから独立した裏方	イベント監視、タブ操作、アイコンクリックへの反応
content script	表示中のWebページの中	ページの [[DOM]] を読み取り・書き換える(翻訳・広告ブロック等)
拡張ページ(popup / タブ)	`chrome-extension://` オリジン	拡張自身のUI。中身は普通のWebアプリを載せられる

拡張ページには [[React]] などで作ったSPAをそのまま載せられます。ただし chrome-extension:// には「どのパスでも index.html を返す」サーバーがいないため、ルーティングは [[React Router]] のHashRouter方式を選ぶ必要があります。

Manifest V3

現行の拡張仕様がManifest V3(MV3)です。V2からの主な変更はセキュリティ強化に集約されます。

backgroundがservice workerに — 常駐ページが廃止され、イベントのたびに起動・終了する方式へ。グローバル変数に状態を持てないため、状態は chrome.storage などへ保存する
リモートコードの禁止 — CDNから読み込んだスクリプトの実行が不可に。フォントやライブラリも含め、すべての資産を拡張パッケージに同梱する必要がある

権限モデル

拡張は permissions(ストレージ、タブ情報など)や host_permissions(どのサイトにアクセスするか)をmanifestで宣言し、ユーザーはインストール時にそれを見て判断します。要求権限が少ないほど審査もユーザーの信頼も通りやすいため、最小権限で設計するのが原則です。[[Webセキュリティ]] の考え方がそのまま適用されます。

また、拡張のデータ([[WebストレージとCookie]] のlocalStorageなど)は拡張自身のオリジンに紐付きます。拡張をアンインストールするとデータも消えるため、永続化が重要なデータにはエクスポート手段を用意します。

初学者向けポイント

開発中は chrome://extensions の「デベロッパーモード」からフォルダを直接読み込めます(load unpacked)。ストア審査なしで手元で試せます
「拡張がページを書き換えられる」= content scriptは訪問先ページの情報を読める、ということです。拡張を入れる側としても、要求権限は確認する習慣を付けましょう
配布はChrome Web Store / Edgeアドオンストアへzipを申請します。審査ではリモートコード禁止や権限の妥当性がチェックされます

関連技術とのつながり

[[Webセキュリティ]] — 権限モデルとリモートコード禁止の背景
[[DOM]] — content scriptが操作する対象
[[React Router]] — 拡張ページでSPAを動かすときのHashRouterの出番
[[WebストレージとCookie]] — 拡張のデータ保存とその寿命
[[WXT(ブラウザ拡張/Manifest V3)]] — manifest 生成とブラウザ差の吸収を担うビルド基盤

Q: content scriptの役割はどれ?
- [ ] 拡張のアイコンクリックに反応してタブを開く
- [x] 表示中のWebページに注入され、そのページのDOMを読み書きする
- [ ] ストア審査用のメタデータを定義する
解説: content scriptは訪問中のページの中で動き、DOMの読み取り・書き換えを担います。翻訳や広告ブロックの実体です。

Q: Manifest V3のbackground(service worker)の特徴として正しいのはどれ?
- [ ] 常駐し続けるため、グローバル変数に状態を持てる
- [x] イベントのたびに起動・終了するため、状態はストレージへ保存する必要がある
- [ ] Webページと同じタブの中で実行される
解説: MV3では常駐ページが廃止されました。service workerはすぐ終了するので、保持したい状態はchrome.storageなどへ書き出します。

Q: MV3の「リモートコード禁止」への正しい対応はどれ?
- [ ] CDNのURLをhost_permissionsに追加する
- [ ] 実行時にfetchしたコードをevalで実行する
- [x] ライブラリやフォントを含む全資産を拡張パッケージに同梱する
解説: 外部から取得したコードの実行は禁止されているため、必要な資産はすべてビルド時にバンドルして同梱します。