おそらく分かりやすい、chrome拡張機能のマニフェストファイルの書き方（V3対応）

2023年6月14日2024年11月7日

今回は、chrome拡張機能のマニフェストファイルの項目について解説していこうと思います。

Chrome拡張機能のマニフェストファイルについての公式ドキュメントも用意されておりますので、もし公式の正確な情報が知りたい方は、下記のリンクの公式ドキュメントをご覧ください。

Chrome for Developers

マニフェストファイル形式 | Manifest | Chrome for Developers Chrome 拡張機能の manifest.json プロパティの概要。

全ての項目について解説するのが難しいためよく使う項目に絞って解説していきます。

マニフェストファイル概要

Chrome拡張機能のマニフェストファイル（Manifest file）は、Chromeウェブストアに公開される拡張機能の設定とメタデータを定義するJSON形式のファイルです。マニフェストファイルは、拡張機能の名前、バージョン、説明、アイコンのパス、権限の設定など、拡張機能の基本的な情報を含んでいます。

マニフェストファイルは、拡張機能のルートディレクトリに「manifest.json」という名前で保存されます。拡張機能を作成する際には、このファイルを作成し、必要な情報を記述する必要があります。

{
  "manifest_version": 3,  // マニフェストのバージョン（V3）
  "name": "拡張機能の名前",  // 拡張機能の名前
  "version": "1.0",  // 拡張機能のバージョン
  "description": "拡張機能の説明",  // 拡張機能の説明
  "permissions": [
    "tabs",  // タブへのアクセス権限
    "storage",  // ストレージへのアクセス権限
    "contextMenus"  // 右クリックメニューの作成と管理の権限
  ],
  "background": {  // バックグラウンドスクリプトの設定
    "service_worker": "background.js"  // バックグラウンドスクリプトとして "background.js" ファイルを使用
  },
  "action": {  // アクションボタンの設定
    "default_popup": "popup.html",  // ポップアップウィンドウの内容は "popup.html" ファイルで指定
    "default_icon": {  // アクションボタンのアイコン設定
      "16": "icon16.png",  // 16pxのアイコンは "icon16.png" ファイルを使用
      "48": "icon48.png"  // 48pxのアイコンは "icon48.png" ファイルを使用
    }
  },
  "icons": {  // 拡張機能のアイコンの設定
    "16": "icon16.png",  // 16pxのアイコンは "icon16.png" ファイルを使用
    "48": "icon48.png"  // 48pxのアイコンは "icon48.png" ファイルを使用
    "128": "icon128.png"  // 128pxのアイコンは "icon128.png" ファイルを使用
  },
  "content_scripts": [  // コンテンツスクリプトの設定
    {
      "matches": ["https://example.com/*"],  // https://example.com/ 以下のページに対してスクリプトを注入
      "js": ["contentScript.js"],  // contentScript.js ファイルを挿入
      "css": ["styles.css"],  // styles.css ファイルを挿入
      "all_frames": true  // フレーム内のすべてのフレームに対して挿入
    }
  ],
  "host_permissions": [  // ホストへのアクセス権限の設定
    "https://example.com/",  // https://example.com/ へのアクセス権限を要求
    "http://localhost/"  // http://localhost/ へのアクセス権限を要求
  ]
}

管理画面への表示

上記のマニフェストファイルが記入されている拡張機能フォルダをchrome拡張機能の管理画面にインストールすると下図のように表示されます。マニフェストファイルのメタデータが表示されます。

permissions

“permissions”は、Chrome拡張機能（Chrome Extensions）に関する権限です。拡張機能がブラウザの機能やユーザーのデータにアクセスするためには、適切な権限（permissions）を要求する必要があります。

一部のアクセス許可は、拡張機能のインストール前または実行時に必要に応じて、同意のためにユーザーに表示されます。

例えば、拡張機能が特定のウェブサイトのコンテンツを読み取る必要がある場合、"activeTab"という権限を要求することがあります。また、拡張機能がユーザーのブラウザ履歴にアクセスする必要がある場合には、"history"という権限を要求することがあります。

background

Chrome拡張機能V3のマニフェストファイルでbackgroundセクションを使用すると、バックグラウンドスクリプトを定義できます。バックグラウンドスクリプトは、ブラウザのバックグラウンドで実行され、イベントの監視や非同期のタスクの実行など、拡張機能の主要な機能を提供することができます。

Chrome拡張機能V3ではバックグラウンドページが廃止され、代わりにサービスワーカーが使用されるようになりました。そのため、backgroundセクションのservice_workerフィールドにサービスワーカーファイルを指定する必要があります。

action

マニフェストファイルの“action”は、下記画像のchrome.actionのボタンを押した際の動作になります。

分かりやすいデザインのアイコンを設定しておくと、ユーザーが分かりやすくていいです。

icons

chrome拡張機能アイコンを設定します。

サイズは、 16×16、 48×48、128×128の3つを用意しておくと良いでしょう。アイコンを設定しなくてもchrome拡張機能はインストール可能です。その場合は、アイコンの代わりに拡張機能のnameのイニシャルが表示されます。

Chrome拡張機能のアイコンにはJPG形式は使用できません。拡張機能のアイコンは通常、PNGまたはSVG形式で設定ができるようです。

128pxのアイコンは、下記のwebストアに公開した場合のアイコン等に使用されます。
ご自身で使うだけの場合は、128pxのアイコンは用意しなくても大丈夫です。

48pxのアイコンは、下記のchrome拡張機能の管理画面等に適しています。

拡張機能をインストールしたり、有効または無効にしたりと使う場面が多いので設定しておくと良いでしょう。

16pxのアイコンは、下記のツールバーのアイコンに適しています。ここは、様々な拡張機能が乱立して表示されるので一目で分かりやすいアイコンにしておきましょう。

content_scripts

content_scriptsの主な目的は、ウェブページのDOM要素にアクセスして変更を加えたり、特定のイベントに応答したりすることです。

上記の例では、https://example.com/以下のすべてのページに対して、contentScript.jsとstyles.cssが挿入されます。matchesで指定されたパターンに一致するウェブページ上で、指定されたJavaScriptファイルとCSSファイルが実行されます。