Chrome拡張機能開発講座 第2回: manifest.json の役割と設定項目

Chrome拡張機能を作るときに必ず必要になるのが manifest.json です。これは拡張機能の名前、バージョン、説明、実行対象、読み込むファイルなどをChromeに伝える設定ファイルです。

連載第2回では、「Googleカレンダー上でショートカットキーを押すと直近の予定へフォーカスする拡張機能」を題材に、manifest.json の役割と主要な設定項目を解説します。

manifest.jsonとは

manifest.json は、Chrome拡張機能の設計図です。Chromeはこのファイルを読み取り、拡張機能の基本情報や実行ルールを判断します。

現在のChrome拡張機能では、基本的に Manifest V3 を使います。Manifest V3は、セキュリティやパフォーマンスを重視した現在の拡張機能仕様です。

今回のmanifest.json

今回のサンプルでは、次のような設定になります。

{
  "manifest_version": 3,
  "name": "Google Calendar Active Event Finder",
  "version": "1.0.0",
  "description": "Googleカレンダーで 'z' キーを押した時に、直近の予定へフォーカスします。",
  "content_scripts": [
    {
      "matches": [
        "*://calendar.google.com/*"
      ],
      "js": [
        "content.js"
      ],
      "css": [
        "styles.css"
      ],
      "run_at": "document_idle"
    }
  ]
}

manifest_version

manifest_version は、拡張機能の仕様バージョンを指定する項目です。現在は 3 を指定します。

"manifest_version": 3

古い解説記事では manifest_version: 2 の例が残っていることがありますが、新しく作る場合はManifest V3を前提にします。

name、version、description

次の3つは、拡張機能の基本情報です。

"name": "Google Calendar Active Event Finder",
"version": "1.0.0",
"description": "Googleカレンダーで 'z' キーを押した時に、直近の予定へフォーカスします。"

• name: 拡張機能の名前
• version: 拡張機能のバージョン
• description: 拡張機能の説明文

Chromeの拡張機能管理画面では、この名前や説明が表示されます。

content_scripts

content_scripts は、特定のWebページにJavaScriptやCSSを挿入するための設定です。

"content_scripts": [
  {
    "matches": [
      "*://calendar.google.com/*"
    ],
    "js": [
      "content.js"
    ],
    "css": [
      "styles.css"
    ],
    "run_at": "document_idle"
  }
]

今回の拡張機能では、Googleカレンダーのページにだけ content.js と styles.css を読み込ませます。

matches

matches は、Content Scriptsを実行するURLを指定する項目です。

"matches": [
  "*://calendar.google.com/*"
]

この指定により、https://calendar.google.com/ 配下のページでだけ拡張機能が動作します。Google検索やGmailなど、別のページでは動きません。

対象URLを絞ることは、誤作動を防ぐだけでなく、セキュリティ面でも重要です。

js と css

js には読み込むJavaScriptファイル、css には読み込むCSSファイルを指定します。

"js": [
  "content.js"
],
"css": [
  "styles.css"
]

Googleカレンダーを開くと、Chromeが自動的にこれらのファイルをページへ挿入します。

run_at

run_at は、Content Scriptsを実行するタイミングを指定する項目です。

"run_at": "document_idle"

document_idle は、ページの読み込みがある程度完了し、ブラウザの処理に余裕ができたタイミングでスクリプトを実行します。

Googleカレンダーのように画面構築が複雑なWebアプリでは、早すぎるタイミングでDOMを操作しようとすると、対象の要素がまだ存在しないことがあります。そのため、まずは document_idle を使うのが扱いやすい設定です。

まとめ

manifest.json は、Chrome拡張機能の動作条件を決める重要な設定ファイルです。今回の例では、Googleカレンダー上でだけ content.js と styles.css を読み込むように設定しました。

次回は、実際にページ上で動作する content.js の基本構造と、キー入力の監視について解説します。