Chrome拡張機能 マニフェストの作り方

【公式ドキュメント】
Manifest File

マニュフェストを、作りたい機能に必要に応じて使えるようにまとめました。

用語集

用語	説明
background	Chrome起動中にずっと動くスクリプト
Contents Script	ブラウザで開いているページに影響するスクリプトを実行
Browser Action	右上のアイコンクリック時にスクリプトを起動させる
Page Action	右上のアイコンクリック時に指定したページでスクリプトを起動させる

jsonではコメントアウトができないため、使用時はコメントアウトは削除する。

manifest.json

{
  // 下記3項目は必須
  "manifest_version": 2,
  "name": "name",
  "version": "1.0",

  // オプションで設定
  "description": "説明文を記載",

  /*以下は実行したい内容に応じて使用する*/
  /*---------------------------------------------------*/

  // アイコンクリック時に実行
  "browser_action": {
    "default_icon": {
      "16": "icon.png"
    },
    // ポップアップ表示不要の場合は削除
    "default_popup": "popup.html"
  },

  // アイコンクリック時に実行,特定のページ指定が可能
  "page_action": {
    "default_icon": {
    "16": "icon.png"
    },
    // ポップアップ表示不要の場合は削除  
    "default_popup": "popup.html"
  },

  // chrome起動中にずっと動いている
  "background": {
    "scripts": ["event.js"],
    // persistentを設定することによってイベントが起きたときのみ起動させることが可能
    "persistent": false
  },

  // option設定をするときに使用
  // chrome_styleでchromeと同じスタイルにすることが推奨されている
  "options_ui": {
    "page": "options.html",
    "chrome_style": true
  },

  // 特定のURLを開いたときに実行
  // 今開いているページの操作が可能
  // 使用時の注意点は下記を参照
  "content_scripts": [
    {
      "matches": ["<all_urls>"],
      "js": ["content.js"],
      "css": ["style.css"],
      "run_at": "document_end",
    }
  ],
    
  "permissions": [
    "tabs", // 全てのタブを扱う場合
    "activeTab" // アクティブタブのみ扱う場合
    "http://*/*", // httpから始めるページのみで実行する場合
    "https://*/*", // httpsから始めるページのみで実行する場合 
    "<all_urls>", // 全てのURLで実行する場合 
    "storage", // chrome.storage使用時に必要
    "contextMenus" // chrome.contextMenus使用時に必要
  ]
}

■ content_scripts使用時の注意点
content_scriptsの公式ドキュメント
① 要素は取得できるが<script>内の変数は取得不可
　※const,let,varで宣言されている変数
② 直接実行できるAPIが少ない
使用可能なAPI：i18n,runtime, storageのみ
→つまりtabs, broeserAction, contextMenus, history, bookmarksなどは直接は実行不可。
直接実行できないAPIを使いたい場合はcontent_scriptからbackgroundにメッセージを送って実行させる。
このようなメッセージのやりとりのことをMessage Passingという。

この記事はChrome拡張機能の作り方の一部のコンテンツです。

【参考】
Chrome 拡張機能のマニフェストファイルの書き方