如何在 Chrome 擴展中使用內容腳本文件注入 CSS？

Question

我正在嘗試從作為內容腳本注入的 JavaScript 注入我的 CSS：

"content_scripts": [
   {
      "matches": ["http://www.google.com/*"],
      "js": ["script.js"]
   }
],

我發現了有關注入 CSS 的類似問題，但是在使用來自已接受答案的代碼時遇到了問題。 這是我的script.js內容：

var link = document.createElement("link");
link.href = chrome.extension.getURL("style.css");
link.type = "text/css";
link.rel = "stylesheet";
document.getElementsByTagName("head")[0].appendChild(link);

加載某個頁面后，此消息出現在控制台中：

拒絕加載 chrome-extension://phkgaaiaakklogbhkdnpjncedlbamani/fix.css。 資源必須在 web_accessible_resources 清單鍵中列出，以便由擴展程序之外的頁面加載。

有沒有什么辦法解決這一問題？ 或者，也許是從該 JavaScript 文件中注入 CSS 的其他方法？

注意：我不能直接從清單中包含樣式表。

Answer 1

您可以添加到清單的權限字段； 請參閱web_accessible_resources 。 因此，您可以將其添加到清單中：

    , "web_accessible_resources": [
        "fix.css"
    ]

---

另見“程序化注入” 。 和insertCSS() 。

對於大多數應用程序，忘記所有createElement代碼，只需將 CSS 文件添加到清單：

"content_scripts": [
   {
      "matches":    ["http://www.google.com/*"],
      "css":        ["fix.css"],
      "js":         ["script.js"]
   }
],

雖然我知道你不想在這個確切的例子中這樣做。

Answer 2

您可以使用 element.classList.add("my_new_class") 在元素中添加新類，在 css 中您可以使用新添加的類來設置該元素的樣式。 所以 onClick 只添加類，然后只運行該元素的 css。