如何在Chrome扩展中使用内容脚本文件注入CSS？ [英] How to inject CSS using content script file in Chrome extension?

问题描述

 content_scripts：[
 {
matches：[http://www.google.com/*]，
js：[script.js] 
} 
 $，
  

我找到类似的问题关于注入CSS，但我在使用接受答案。这是我的 script.js 内容：

  var link = document.createElement （链接）; 
 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的其他方式是什么？

注意：我无法直接从清单包含样式表。

解决方案

您可以添加到清单的权限字段中;请参阅 web_accessible_resources 。所以你可以把它加到清单中：

 ，web_accessible_resources：[
fix.css
 
  

---

另见程序注入。和 insertCSS（） 。

对于大多数应用程序，请忘记所有 createElement 代码，并将CSS文件添加到清单中：

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

尽管我明白你不想在这个确切的实例中这样做。

I'm trying to inject my CSS from JavaScript which is injected as content script:

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

I found similar question about injecting CSS, but I encountered a problem while using code from accepted answer. Here's my script.js contents:

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);

After I load some page this message appears in console:

Denying load of chrome-extension://phkgaaiaakklogbhkdnpjncedlbamani/fix.css. Resources must be listed in the web_accessible_resources manifest key in order to be loaded by pages outside the extension.

Is there any way to fix this? Or, maybe, some other way to inject a CSS from that JavaScript file?

Note: I can't include style sheet directly from manifest.

解决方案

You could add to the manifest's permissions field; See web_accessible_resources. So you would add this to the manifest:

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

---

See also "Programmatic injection". and insertCSS().

For most applications, forget all that createElement code and just add the CSS file to the manifest:

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

although I understand that you don't want to do that in this exact instance.

这篇关于如何在Chrome扩展中使用内容脚本文件注入CSS？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！