Chrome Extension Manifest V3 での各機能の役割

最近社内でChrome拡張つくる人が増えたので、Chrome Extension Manifest V3での各機能の役割についてまとめておきます

1. Service Worker

• マニフェストで service_worker で指定する必要がある
• 拡張機能の中心的なイベントハンドラ
• マニフェストに記述して登録する必要がある
• 必要に応じて実行され、アイドル状態になるとアンロードされる
• 常時実行させることはできない (MV2ではできた)
• Service Workerが破棄されるとグローバル変数は失われるので、storageに保存するなどの対応が必要

2. コンテンツスクリプト

• マニフェストで content_scripts で指定する必要がある
• ウェブページのコンテキストで実行される
• ページのDOM要素を読み取り、変更することもできる
• 静的宣言(マニフェストに記述)、動的宣言(chrome.scripting APIでスクリプトの登録)、プログラムによる挿入(chrome.scripting.executeScript()でJSの挿入)の3つの方法でコンテンツスクリプトを挿入できる

3. ポップアップ

• マニフェストで action で指定する必要がある
• ユーザーが拡張機能を呼び出せるウィンドウ
• キーボードショートカットまたは拡張機能アイコンのクリックでトリガーされる

4. オプションページ

• マニフェストで options_ui で指定する必要がある
• 拡張機能をカスタマイズするためのページ

5. offscreen

• MV3で追加された
• マニフェストで offscreen 権限を宣言する必要がある
• MV3ではService Worker でDOMアクセスができないため、DOM APIを使う必要がある場合などに利用する
• offscreenの用途
• 使用時にoffscreenを作成し、処理が終わったら破棄する必要がある
• 存在して良いoffscreenは常に1つだけ
  • すでにoffscreenが生成されているとエラー
  • 前回のoffscreenが破棄されていないとエラー
  • Failed to create offscreen document: Error: Only a single offscreen document may be created.
• 処理が完了したら破棄しなければならないのでデバッグが難しい

6. Storage

• マニフェストで storage 権限を宣言する必要がある
• ブラウザ間で同期するsyncストレージ、同期を行わないlocalストレージがある
• syncストレージ
  • ストレージへの保存上限は100KB
  • 各項目のサイズ上限は8,192Byte
  • 1時間に1800回以上書き込みが行われるとエラー
  • 1分間に120回以上書き込みが行われるとエラー
  • 書き換え頻度が低く、データ量が少ない場合はsyncストレージがオススメ
• localストレージ
  • ストレージへの保管上限は10MB (unlimitedStorage権限を宣言すれば無制限)
  • 書き換え頻度が高かったり、データ量が大きい場合はlocalストレージがオススメ