chrome-extensionのmanifest.jsonの簡易解説

この記事を通して学べる事

• ブラウザ拡張機能を管理するmanifest.jsonについて、どの記述がどの機能に紐づいているか理解できる
  全部分はchrome公式をご覧ください:

manifest.json例

manifest.json

{
  "manifest_version": 3,
  "name": "Extension Sample",
  "version": "1.0",
  "description": "Extension Sample.",
  "permissions": ["activeTab", "scripting", "contextMenus"],
  "host_permissions": ["<all_urls>"],
  "icons": {
    "16": "icons/icon-16.png",
    "48": "icons/icon-48.png",
    "128": "icons/icon-128.png"
  },
  "action": {
    "default_popup": "popup.html",
    "default_icon": {
      "16": "icons/icon-16.png",
      "48": "icons/icon-48.png",
      "128": "icons/icon-128.png"
    }
  },
  "content_scripts": [
    {
      "matches": ["https://*.example.com/*", "http://*.example.com/*"],
      "js": ["scripts/content-script.js"],
      "css": ["styles/content-style.css"]
    }
  ],
  "options_page": "options.html",
  "web_accessible_resources": [
    {
      "resources": ["images/*", "scripts/injected.js"],
      "matches": ["<all_urls>"]
    }
  ]
}

action→default_popup

拡張機能をブラウザのurl/検索欄の脇に固定し、アイコンをクリックしたときに出てくるhtml

permissions

• activeTab
  現在開いているタブに対する権限
• scripting
  スクリプト注入に対する権限
• contextMenus
  コンテキストメニュー(右クリック時のメニューのこと)に追加するための権限

content_scripts

スクリプトやCSSなどの注入設定
matchesのurlパターンにマッチしたとき、resourcesに指定したファイルを使用

options_page

開発者が提供する拡張機能のオプション(設定)ページ

web_accessible_resources

content_scriptsからchrome.runtime.getURL("resource_path")使用時、アクセス許可の設定