マニフェスト - コンテンツ スクリプト

"content_scripts" キーは、静的に読み込まれる JavaScript または CSS ファイルを指定します。このファイルは、特定の URL パターンに一致するページが開かれるたびに使用されます。拡張機能では、コンテンツ スクリプトをプログラムで挿入することもできます。詳しくは、スクリプトの挿入をご覧ください。

マニフェスト

"content_scripts" でサポートされている鍵は次のとおりです。"matches" キーと "js" または "css" のいずれかのみが必須です。

manifest.json

{
 "name": "My extension",
 ...
 "content_scripts": [
   {
     "matches": ["https://*.example.com/*"],
     "css": ["my-styles.css"],
     "js": ["content-script.js"],
     "exclude_matches": ["*://*/*foo*"],
     "include_globs": ["*example.com/???s/*"],
     "exclude_globs": ["*bar*"],     
     "all_frames": false,
     "match_origin_as_fallback": false,
     "match_about_blank": false,
     "run_at": "document_idle",
     "world": "ISOLATED",
   }
 ],
 ...
}

ファイル

各ファイルには、拡張機能のルート ディレクトリにあるリソースの相対パスを含める必要があります。先頭のスラッシュ（/）は自動的にカットされます。"run_at" キーは、各ファイルが挿入されるタイミングを指定します。

"css" - 配列
省略可。CSS ファイルパスの配列で、この配列の順序で挿入され、DOM の構築またはページのレンダリングが行われる前に挿入されます。
"js" - 配列、
省略可。JavaScript ファイルパスの配列。CSS ファイルが挿入された後、この配列に表示される順序で挿入されます。配列内の各文字列は、拡張機能のルート ディレクトリにあるリソースの相対パスである必要があります。先頭のスラッシュ（「/」）は自動的にカットされます。

URL と一致

"matches" プロパティのみが必須です。次に、"exclude_matches"、"include_globs"、"exclude_globs" を使用して、コードを挿入する URL をカスタマイズできます。"matches" キーにより警告がトリガーされます。

"matches" - 配列
必須。コンテンツ スクリプトを挿入する URL パターンを指定します。構文については、一致パターンをご覧ください。
"exclude_matches" - 配列
省略可。コンテンツ スクリプトを挿入する URL パターンを除外します。構文については、一致パターンをご覧ください。
"include_globs" - 配列
省略可。一致した後に適用されます。この glob に一致する URL のみが含まれます。@include Greasemonkey キーワードをエミュレートすることを目的としています。
"exclude_globs" - 配列
省略可。一致した後に適用され、この glob に一致する URL を除外します。キーワード @exclude Greasemonkey をエミュレートすることを目的としています。

glob URL は、「ワイルドカード」を含む URL* と疑問符ワイルドカード * は、空の文字列を含む任意の長さの文字列に一致しますが、疑問符 ? は任意の 1 文字に一致します。

コンテンツ スクリプトは、次の場合にページに挿入されます。

  • URL がすべての "matches" パターンと "include_globs" パターンに一致する。
  • URL が "exclude_matches" パターンまたは "exclude_globs" パターンと一致しない。

glob と URL マッチングの例

"include_globs"

manifest.json

{
  ...
  "content_scripts": [
    {
      "matches": ["https://*.example.com/*"],
      "include_globs": ["https://???.example.com/foo/*"],
      "js": ["content-script.js"]
    }
  ],
  ...
}
一致
https://www.example.com/foo/bar
https://the.example.com/foo/
一致しない
https://my.example.com/foo/bar
https://example.com/foo/*
https://www.example.com/foo

manifest.json

{
  ...
  "content_scripts": [
    {
      "matches": ["https://*.example.com/*"],
      "include_globs": ["*example.com/???s/*"],
      "js": ["content-script.js"]
    }
  ],
  ...
}
一致
https://www.example.com/arts/index.html
https://www.example.com/jobs/index.html
一致しない
https://www.example.com/sports/index.html
https://www.example.com/music/index.html

"exclude_globs"

manifest.json

{
  ...
  "content_scripts": [
    {
      "matches": ["https://*.example.com/*"],
      "exclude_globs": ["*science*"],
      "js": ["content-script.js"]
    }
  ],
  ...
}
一致
https://history.example.com
https://.example.com/music
一致しない
https://science.example.com
https://www.example.com/science

高度なカスタマイズの例

manifest.json

{
  ...
  "content_scripts": [
    {
      "matches": ["https://*.example.com/*"],
      "exclude_matches": ["*://*/*business*"],
      "include_globs": ["*example.com/???s/*"],
      "exclude_globs": ["*science*"],
      "js": ["content-script.js"]
    }
  ],
  ...
}
一致
https://www.example.com/arts/index.html
https://.example.com/jobs/index.html
一致しない
https://science.example.com
https://www.example.com/jobs/business
https://www.example.com/science

フレーム

"all_frames" キーは、指定された URL 要件に一致するすべてのフレームにコンテンツ スクリプトを挿入するかどうかを指定します。false に設定すると、最上フレームにのみ注入されます。"match_about_blank" と一緒に使用して、about:blank フレームに挿入できます。

data:、blob:、filesystem: などの他のフレームに挿入するには、"match_origin_as_fallback" を true に設定します。詳しくは、関連フレームの挿入をご覧ください。

"all_frames" ブール値
省略可。デフォルトは false です。つまり、トップフレームのみが一致します。true に設定すると、タブ内で最上位のフレームではないフレームでも、すべてのフレームに挿入されます。各フレームは個別に URL 要件についてチェックされ、URL 要件を満たしていない場合は子フレームに挿入されません。
"match_about_blank" - ブール値
省略可。デフォルトは false です。"matches" で宣言されたパターンのいずれかに親 URL が一致する about:blank フレームにスクリプトを挿入するかどうかを指定します。
"match_origin_as_fallback" - ブール値
省略可。デフォルトは false です。一致するオリジンによって作成されたが、URL またはオリジンがパターンと直接一致しない可能性があるフレームにスクリプトを挿入するかどうかを指定します。これには、about:、data:、blob:、filesystem: などの異なるスキームのフレームが含まれます。

実行時間と実行環境

デフォルトでは、コンテンツ スクリプトは、ドキュメントとすべてのリソースの読み込みが完了すると挿入され、ページや他の拡張機能からはアクセスできない、隔離された非公開の実行環境に存在します。これらのデフォルトは、次のキーで変更できます。

"run_at" - document_start |document_end |document_idle
省略可。スクリプトをページに挿入するタイミングを指定します。これは、Document.readyState の読み込み状態に対応しています。 <ph type="x-smartling-placeholder">
    </ph>
  • "document_start": DOM はまだ読み込み中です。
  • "document_end": ページのリソースはまだ読み込み中です
  • "document_idle": DOM とリソースの読み込みが完了しました。これがデフォルトです。
"world" - ISOLATED |MAIN
省略可。スクリプトを内部で実行する JavaScript 環境。デフォルトは "ISOLATED" で、これはコンテンツ スクリプトに固有の実行環境です。"MAIN" 環境を選択すると、スクリプトは実行環境をホストページの JavaScript と共有します。詳しくは、孤立した世界で作業するをご覧ください。
で確認できます。

例

マニフェストにコンテンツ スクリプトを挿入する拡張機能の作成方法については、すべてのページで実行するのチュートリアルをご覧ください。