Chrome 擴展：在頁面加載前注入 JS

Question

是否可以在頁面加載之前注入 JS，或者是否需要使用內容腳本和方式來完成文檔？

比如有沒有更快的方式來執行一打開頁面就變紅的JS？

Answer 1

在清單文件中使用"run_at": "document_start"聲明內容腳本以使其盡快運行，即在構建文檔根目錄之后（當<head>尚不存在時）。

對於您非常具體的示例，最好改為聲明內容樣式，類似於內容腳本，但使用"css"鍵而不是"js" 。

如果您想盡快動態運行腳本，則在觸發chrome.webNavigation.onCommitted事件時調用chrome.tabs.executeScript 。

Answer 2

對於 Manifest V3，在 102.0.5005.58 穩定版中的內容腳本中添加了一個新字段： world

還有很多與該主題相關的 chrome 錯誤： #634381 、 #1054624 、 #1207006

您必須在內容腳本中使用"world": "main"以及"run_at": "document_start"和 CSP 以允許從擴展中注入。 否則注入的腳本會被拒絕：

拒絕執行內聯腳本，因為它違反了以下內容安全策略指令：“script-src 'self' 'wasm-unsafe-eval'”。 啟用內聯執行需要“不安全內聯”關鍵字、hash（“sha256-*”）或隨機數（“nonce-...”）。

“世界”：“主要”：

[擴展] 為動態內容腳本添加主世界注入

此 CL 為動態內容腳本添加了一個新字段“world”，允許擴展指定腳本是在獨立世界還是在主世界中運行。 默認情況下，不指定該字段的腳本將在隔離世界中運行。

有效屬性是"ISOLATED" （默認）或"MAIN" 。

我使用的示例文件：

清單.json

{
  "name": "script injection",
  "version": "0",
  "manifest_version": 3,
  "minimum_chrome_version": "103.0",
  "content_scripts": [
    {
      "matches": ["*://*/*"],
      "js": ["inject.js"],
      "run_at": "document_start",
      "world": "MAIN"
    }
  ],
  "web_accessible_resources": [{
    "resources": ["injected.js"],
    "matches": ["<all_urls>"]
  }],
  "content_security_policy": {
    "extension_pages": "default-src 'self' 'wasm-unsafe-eval';"
  }
}

注入.js

let el = document.createElement("script");
el.src = chrome.runtime.getURL("injected.js");
document.documentElement.appendChild(el);
console.log("injected");

注入.js

console.log(typeof alert); // "function"
console.log("injected file");
delete window.alert;
console.log(typeof alert); // "undefined"

[ 在此處輸入圖像描述 ]

Chrome 擴展：在頁面加載前注入 JS

問題描述

2 個解決方案

解決方案1
61 已采納 2013-10-04 22:56:17

解決方案2
1 2023-01-22 18:44:35

Chrome 擴展：在頁面加載前注入 JS

問題描述

2 個解決方案

解決方案1 61 已采納 2013-10-04 22:56:17

解決方案2 1 2023-01-22 18:44:35

解決方案1
61 已采納 2013-10-04 22:56:17

解決方案2
1 2023-01-22 18:44:35