✒️ manifest.jsonについて①

manifest.json とは？

ブラウザ拡張機能を作ると、最初に必ず作成するのが　manifest.json です。

manifest.json は、単なる設定ファイルではありません。

ブラウザは、拡張機能を読み込む時、まず manifest.json を解析し、

• この拡張機能は何か
• どんな機能を使うのか
• どのページで動くのか
• どのJavaScriptを実行するのか
• popup 画面や background 処理は存在するのか

などを理解します。

つまり manifest.json は 拡張機能の構成定義ファイル です。

書かれた内容によって、ブラウザの動作が変わります。

そのため、 「何を書けば、ブラウザがどう動くのか」を理解する 事が重要です。

👉 manifest.jsonの詳細な仕様については、公式リファレンス：Manifest file format (Manifest V3)で公開されています。

👉 又、Manifest V3 は、実質的には Google の Chrome Extension 仕様が中心になっている為、Chrome Developers の拡張機能全体の公式ドキュメント:Chrome Extensions Documentationにも、詳しい説明があります。

manifest.json 全体例

ここでは、 manifest.json の定義例を示します。

{
  "manifest_version": 3,

  "name": "Sample Extension",

  "version": "1.0.0",

  "description": "ブラウザ拡張のサンプル",

  "icons": {
    "16": "icons/icon16.png",
    "48": "icons/icon48.png",
    "128": "icons/icon128.png"
  },

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

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

  "action": {
    "default_title": "Sample Extension",
    "default_popup": "popup.html"
  },

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

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

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

  "options_page": "options.html"
}

まずは重要項目一覧

以降に、各項目の説明を記します。

manifest_version とは？

拡張機能がどの Manifest 仕様で作られているかをブラウザに伝えるための設定です。

"manifest_version": 3

Chrome拡張機能には世代があります。

例えば：

• Manifest V2
• Manifest V3

など。

👉 現在の主流は Manifest V3 です。

ブラウザは、この値を見て、

• 使用可能API
• セキュリティルール
• backgroundの動作方式

などを切り替えます。

互換性について

Manifest V3 の manifest.json は、Chrome、Edge、Firefox、Safari など主要ブラウザで共通の考え方と構造を採用しています。

ただし、利用できる API や対応状況にはブラウザごとの差異があります。

そのため、基本的な記述は共通ですが、高度な機能を利用する場合は各ブラウザの対応状況を確認する必要があります。

FireFox や Safari については、未サポートの部分や、独自色も強い為、以降の説明では、現在最も多く使用されているchromium系のブラウザを対象に説明をすすめます。

name とは？

拡張機能の名称を定義します。

これは単なるタイトルではなく、 ブラウザが拡張機能を識別・表示するための名前 です。

"name": "Sample Extension"

ブラウザには複数の拡張機能が存在するため、ユーザーが識別できる名称を定義します。ブラウザの管理画面やストア画面では、この name が表示されます。

ユーザーが認識しやすい名前にします。

👉 またストア公開時は、既存拡張との名称競合にも注意します。

version とは？

拡張機能のバージョン番号です。ブラウザ は、この値を使って、現在の拡張より新しいかを判断します。

つまり、 更新管理用番号 です。

"version": "1.0.0"

👉 更新時に、version を変えないと「更新されていない」と判断される場合があります。

変更したのに反映されない原因として非常に多いです。

description とは？

拡張機能の説明文です。

"description": "ブラウザ拡張のサンプル"

定義しないくても、拡張機能自体は正常動作します。

description は「何をする拡張か」を簡潔に説明する為のものです。

icons とは？

拡張機能アイコン画像を定義します。

複数サイズ存在するのは、表示場所によって使い分ける為です。

"icons": {
  "16": "icons/icon16.png",
  "48": "icons/icon48.png",
  "128": "icons/icon128.png"
}

サイズごとの用途

👉 指定しない場合は、ブラウザが汎用アイコンを表示します。

アイコンは、 拡張機能の視覚識別子 になります。

かなり重要です。

(つづく)