"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"- 配列、- 省略可。CSS ファイルの挿入後、この配列内の順番で挿入される JavaScript ファイルパスの配列。配列内の各文字列は、拡張機能のルート ディレクトリ内にあるリソースへの相対パスにする必要があります。先頭のスラッシュ（「/」）は自動的に削除されます。
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"で宣言されたパターンの 1 つに親 URL が一致するabout:blankフレームにスクリプトを挿入する必要があるかどうか。 "match_origin_as_fallback"- ブール値- 省略可。デフォルトは
falseです。一致するオリジンで作成されたが、その URL またはオリジンがパターンと直接一致しない可能性があるフレームを、スクリプトで挿入するかどうか。これには、about:、data:、blob:、filesystem:などの異なるスキームのフレームが含まれます。
ランタイム環境と実行環境
デフォルトでは、コンテンツ スクリプトはドキュメントとすべてのリソースの読み込みが完了すると挿入され、ページや他の拡張機能にアクセスできない隔離されたプライベートな実行環境に配置されます。これらのデフォルト値は、次のキーで変更できます。
"run_at"～document_start|document_end|document_idle- 省略可。スクリプトをページに挿入するタイミングを指定します。これは Document.readyState の読み込み状態に対応します。
"document_start": DOM はまだ読み込み中です。"document_end": ページのリソースはまだ読み込み中です"document_idle": DOM とリソースの読み込みが完了しました。この設定はデフォルトです。
"world"～ISOLATED|MAIN- 省略可。スクリプトが実行される JavaScript の世界。デフォルトは
"ISOLATED"で、これはコンテンツ スクリプトに固有の実行環境です。"MAIN"環境を選択すると、スクリプトは実行環境をホストページの JavaScript と共有します。詳しくは、隔離された環境で作業するをご覧ください。
例
マニフェストにコンテンツ スクリプトを挿入する拡張機能を作成するには、すべてのページで実行するのチュートリアルをご覧ください。