"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 と共有します。詳しくは、隔離された環境で作業するをご覧ください。
例
マニフェストにコンテンツ スクリプトを挿入する拡張機能を作成するには、すべてのページで実行するのチュートリアルをご覧ください。