✒️ manifest.jsonについて③

前回からの続き

前回から引き続き、 manifest.json の項目の説明を行います。

host_permissions とは？

拡張機能が、アクセス可能なWebサイト範囲を定義します。

"host_permissions": [
  "https://example.com/*"
]

上記の例では、"https://example.com/*"のサイトの場合のみ、拡張機能の対象とします。

全サイトを対象としたい場合は、"<all_urls>"を指定します。

定義しない場合、ページへのスクリプト注入や、拡張機能からの通信などが失敗する場合があります。

👉 セキュリティの観点から、拡張機能の対象を広げすぎない方がよいです。

action とは？

ブラウザツールバー上の拡張アイコン、popup UI、タイトル

などを定義します。

"action": {
  "default_popup": "popup.html"
}

上記の例では、アイコンクリック時、自動で popup.html が開きます。

action を定義すると、ツールバーアイコンの動作をカスタマイズできます。

ただし：

• background
• content_scripts

などの動作に影響はありません。

この場合、

chrome.action.onClicked.addListener()

でクリックイベントを取得できます。

👉 popup は開くたびに生成され、閉じると破棄される為、状態保持には向かないです。

background とは？

ページとは独立して動作する、 バックグラウンド処理 を定義します。

"background": {
  "service_worker": "background.js"
}

content.js は、ページ内部でしか動きません。

しかし拡張機能には：

• タブ監視
• 通知
• 状態共有
• メッセージ中継

など、ページ外の処理も必要です。そのような処理を行う為のスクリプトを定義します。

👉 Manifest V3 では、この実行方法が、Manifest V2 から変更になり、 service_worker方式 になっています。

service_worker はWebページではなく、専用の実行環境で動作します。DOM操作や document、window へのアクセスはできません。又、必要時のみ起動し、常時常駐ではありません。

content_scripts とは？

Webページへ注入する JavaScript, CSS を定義します。

対象となる URL を開いた時、ブラウザが自動で、指定されたスクリプトをページに挿入します。

対象となる URL は、ワイルドカードを利用して指定できます。

"content_scripts": [
  {
    "matches": ["https://example.com/*"],
    "js": ["content.js"],
    "css": ["content.css"],
    "run_at": "document_idle"
  }
]

上記の例では、"https://example.com/*"に該当するサイトを開いた際、自動で、"content.js"と"content.css"がページに挿入されます。

run_at では、JavaScript実行タイミングを指定します。

省略した場合、デフォルトの document_idle となります。

side_panel とは？

ブラウザ横へ表示する、 サイドパネルUI を定義します。

"side_panel": {
  "default_path": "sidepanel.html"
}

👉 popup と違い、開いたまま利用できるため、ファイルエクスプローラーや開発支援ツールとの相性が良いです。

※　popup はフォーカスが外れると自動的に閉じますが、side_panel はブラウザのサイドバーとして表示され続けます。

options_page とは？

拡張機能専用設定画面を定義します。

"options_page": "options.html"

👉 popup の様な簡易UI と違い、options_page は、本格設定画面で使用します。

例えば：

• APIキー設定
• 永続設定
• 詳細オプション
• テーマ変更

などに利用できます。

※　拡張機能によっては options_page の代わりに options_ui が利用される場合があります。

permissions と host_permissions の違い

どちらも「権限」のように見えますが、役割は異なります。

permissions は 「どの API を使うか」 を定義します。

"permissions": [
  "tabs",
  "storage"
]

host_permissions は 「どのサイトを対象にするか」 を定義します。

"host_permissions": [
  "https://example.com/*"
]

つまり、

• permissions → 機能の許可
• host_permissions → アクセス先の許可

です。

まとめ