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