【Chrome拡張機能】マニフェストファイルの記述内容

satoshiii
satoshiii

対象読者

  • Chrome拡張機能について知りたい方
  • マニフェストファイルに何が書かれているか知りたい方

サンプルコードが長くて、「うっ!」となるかも知れません説明のために書いてるだけですのでご安心を。

必須項目だけであれば4,5行で足ります。

サンプルコード

色つきが必須項目

{
  "manifest_version":2,
  "name":"Chrome ex page action",
  "version":"1",
  "default_locale": "ja_JP",
  "description": "拡張機能の説明です。", 
  "icons": {
     "16": "icon_16.png",
     "128": "icon_128.png"
    },
  "browser_action": {
      "default_icon": {
         "19": "icon_19.png"
    },
      "default_title": "タイトル",
      "default_popup": "popup.html"
    },
  "background": {
     "scripts": [ "background.js" ],
     "persistent": false
  },
  "permissions": [
    "tabs"
  ],
  "content_scripts": [
    {
      "matches": ["https://www.google.co.jp/*"],
      "js": ["jquery-3.6.0.min.js", "myscript.js"]
    }
  ]
}

必須項目

manifest_version

マニフェストファイル自身のバージョン。

現在(2022年)、3がメインとなっており、今後2は使えなくなる。

name

拡張機能自体の名前

version

拡張機能のバージョン。


1 から 4 つの数値を dot で区切って並べて作ることができます。
拡張機能の自動更新機能でバージョンのチェックが行われる。

拡張機能を更新する際には必ずバージョンが上がる必要がある。

補足項目

default_locale

拡張機能のデフォルト言語の指定

description

拡張機能の説明文

icons

拡張機能のアイコン。

画像の形式は png が推奨。

permissions

chromeのAPI を使うときなどに、使う対象を設定する。例であれば、chrome.tabs系のAPIを使う場合。

ブラウザアクション or ページアクション

v3からAction APIに統一。ここでは、v2ベースで説明

ブラウザアクションか、ページアクションのどちらかのみ使用可。

ブラウザアクション

  "browser_action": {
      "default_icon": {
         "19": "icon_19.png"
    },
      "default_title": "タイトル",
      "default_popup": "popup.html"
    },

default_icon

アドレスバーの右に表示するアイコン

アイコンがない場合、タイトルの名前が表示される。

default_title

アドレスバーの右に表示するアイコンから出るツールチップに表示される文字列。

省略すると、必須項目のnameが使われる。

default_popup

アドレスバーの右に表示するアイコンをクリックした際に表示されるポップアップの中のhtmlを指定する。

ブラウザアクションについては、こちら。

Chrome拡張ブラウザアクション【Chrome拡張機能】ブラウザアクション

ページアクション

ブラウザアクションの部分と差し替え。

基本的には、ブラウザアクションと同じ。特定のページのみ使わせたい場合にはこちらを使用。

"page_action": {
    "default_icon": {
        "19": "icon_19.png"
    },
    "default_title": "タイトル",
    "default_popup": "popup.html"
},

ページアクションについてはこちら

【Chrome拡張機能】ページアクション

バックグラウンドページ or イベントページ

  "background": {
     "scripts": [ "background.js" ],
     "persistent": false
  },

scripts

バックグラウンドで動作する JavaScript ファイルを設定する。

複数のファイルの設定が可能。

persistent

true:バックグランドページ

false:イベントページ

詳細は、こちら

【Chrome拡張機能】バックグランドページ イベントページ【Chrome拡張機能】イベントページについて

コンテンツスクリプト

  "content_scripts": [
    {
      "matches": ["https://www.google.co.jp/*"],
      "js": ["jquery-3.6.0.min.js", "myscript.js"]
    }
  ]

matches

コンテンツスクリプトの必須項目。

動作対象となる URLを設定する。

js

動作させるjavascriptを設定する。

まとめ

satoshiii
satoshiii

マニフェストの書き方でした。

実際に使った方がそれぞれの特徴や書き方をまとめてますのでそちらからみられると理解が深まるかと思います。

Chrome拡張機能のまとめリンクについてはこちら。

Chrome【Chromeの拡張機能】開発 まとめ

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です