"content_scripts" 鍵會指定靜態載入的 JavaScript 或 CSS 檔案，每當開啟符合特定網址模式的網頁時，就會使用該檔案。擴充功能也可以透過程式輔助插入內容指令碼，詳情請參閱「插入指令碼」。
資訊清單
以下是 "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 檔案插入後，按照在此陣列中顯示的順序插入。陣列中的每個字串都必須是擴充功能根目錄中資源的相對路徑。系統會自動移除開頭的斜線 (「/」)。
比對網址
只有 "matches" 屬性為必要。接著，您可以使用 "exclude_matches"、"include_globs" 和 "exclude_globs"，自訂要插入程式碼的網址。"matches" 鍵會觸發警告。
"matches"- 陣列- 必要。指定要將內容指令碼插入哪些網址模式。如需語法，請參閱「比對模式」。
"exclude_matches"- 陣列- 選用。排除要插入內容指令碼的網址模式。如需語法，請參閱「比對模式」。
"include_globs"- 陣列- 選用。在比對後套用，僅納入同時符合這個 glob 的網址。用於模擬 @include Greasemonkey 關鍵字。
"exclude_globs"- 陣列- 選用。比對後套用，排除與這個 glob 相符的網址。用於模擬 @exclude Greasemonkey 關鍵字。
Glob 網址是指含有「萬用字元」* 和問號的網址。萬用字元 * 可比對任何長度的任何字串 (包括空白字串)，而問號 ? 比對任何單一字元。
如果符合下列條件，內容指令碼就會插入網頁：
- 網址與任何
"matches"和"include_globs"模式相符。 - 網址不符合
"exclude_matches"或"exclude_globs"模式。
Glob 和網址比對範例
"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" 鍵會指定是否應將內容指令碼插入符合指定網址規定的所有頁框。如果設為 false，則只會插入最上層頁框。可與 "match_about_blank" 搭配使用，插入 about:blank 框架。
如要插入 data:、blob: 和 filesystem: 等其他頁框，請將 "match_origin_as_fallback" 設為 true。詳情請參閱「插入相關頁框」。
"all_frames"布林值- 選用。預設值為
false，表示只會比對頂層頁框。如果設為 true，則會插入所有頁框，即使該頁框不是分頁中最上層的頁框也一樣。系統會獨立檢查每個框架是否符合網址規定，如果不符合，就不會插入子框架。 "match_about_blank"- 布林值- 選用。預設值為
false。指令碼是否應插入about:blank頁框，其中父項網址符合"matches"中宣告的其中一個模式。 "match_origin_as_fallback"- 布林值- 選用。預設值為
false。指令碼是否應插入由相符來源建立的框架，但其網址或來源可能與模式不直接相符。包括採用不同配置的頁框，例如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 共用執行環境。詳情請參閱「在獨立環境中工作」。
範例
請參閱「在每個網頁上執行」教學課程，瞭解如何建構擴充功能，在資訊清單中插入內容指令碼。