通过CSS文件向页面添加CSS

Question

我想知道是否可以通过CSS文件向页面添加CSS,类似于通过JS文件(contentscript)将JS添加到页面.所以,我可以定义哪些页面说CSS文件可以工作,然后就像内容脚本一样生效.我知道可以通过JavaScript文件添加CSS,但如果可能的话,以这种方式更方便.如果不可能,那么我当然必须使用内容脚本,但在排除任何可能性之前我首先想知道.我搜索过并没有收到任何答案 - 要么我错了,要么就是不可能.Chrome扩展已经走了很长一段路,所以我仍然不会排除它,直到有人知道可以告诉我是和如何或不.感谢您的回复.

Answer 1

您的清单文件必须包含content script指向a的内容CSS file,当matches您选择的网址字段时,该文件会加载...

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

这是你用来注射的方法javascript code,除了你指的是一个js file...

更多信息在这里......

Answer 2

manifest.json的:

"web_accessible_resources": [
      "css/style.css"
],

内容的script.js:

var a = chrome.extension.getURL("css/style.css");
$('<link rel="stylesheet" type="text/css" href="' + a + '" >').appendTo("head");

我的扩展使用jQuery

Answer 3

类似我们添加 JavaScriptcontent_scripts也添加 CSS

方法一

"content_scripts": [
{
    "matches": ["<all_urls>"],
    "css": ["css/style.css"],
    "js": ["jquery-1.10.2.min.js","content.js","my.min.js"]
}],

再添加一件事 web_accessible_resources

"web_accessible_resources": [
    "css/style.css"
  ]

如果您使用了任何外部 JavaScript，则还要在权限选项卡中添加 URL。

"permissions": ["tabs", <all_urls>","http://*/","http://example.com/"]

方法二

使用 vai 编程注入和insertCSS()也同样如此。

chrome.tabs.insertCSS(integer tabId, object details, function callback)

注意： web_accessible_resources添加.css不是强制性的，但从 chrome 扩展论坛开始是一种很好的做法。