我不知道如何通过Chrome扩展程序将CSS注入网页。我想把它注入一个网页:
body {
background: #000 !important;
}
a {
color: #777 !important;
}
这是我的manifest.json:
{
"update_url":"http://clients2.google.com/service/update2/crx",
"name": "Test Extension",
"version": "1.0",
"description": "This is a test extension for Google Chrome.",
"icons": { "16": "icon16.png",
"48": "icon48.png",
"128": "icon128.png" },
"background_page": "background.html",
"browser_action": {
"default_icon": "icon19.png"
},
"content_scripts": [
{
"matches": ["http://test-website.com/*"],
"js": ["js/content-script.js"]
}
],
"permissions": [ "tabs", "http://test-website.com/*" ]
}
答案 0 :(得分:54)
您必须在清单文件中添加额外的行:
"content_scripts": [
{
"matches": ["http://test-website.com/*"],
"js": ["js/content-script.js"],
"css" : ["yourcss.css"]
}
],
"css": ["..."]
中定义的CSS文件将添加到与matches
中提到的位置匹配的每个页面。
如果您正在开发Chrome扩展程序,请务必查看以下页面:
答案 1 :(得分:18)
您还可以使用以下Chrome Tabs API webpage详细说明的语法将css文件注入一个或多个标签的内容:
chrome.tabs.insertCSS(integer tabId, object details, function callback);
当然,您首先需要目标标签的ID。
Chrome扩展程序文档未讨论如何解释注入的CSS,但事实是通过此方法或通过将其包含在清单中而注入网页的CSS文件,被解释为用户样式表。
在这方面,重要的是要注意,如果你做使用这些方法注入样式表,它们将受到一种至关重要的限制(至少从Chrome v.19开始): Chrome会忽略用户样式表中的“!important”指令。注入的样式规则将被编写的页面中包含的任何内容所取代。
如果你想避免注入内联样式规则,可以采用以下方法(我使用jQuery进行实际插入,但可以使用直接Javascript完成):
$(document).ready(function() {
var path = chrome.extension.getURL('styles/myExtensionRulz.css');
$('head').append($('<link>')
.attr("rel","stylesheet")
.attr("type","text/css")
.attr("href", path));
});
然后,您可以将样式表放在扩展程序的样式文件夹中,但不需要在清单上的任何位置列出它。上面的相关部分是您将使用chrome API获取样式表的URL,然后将其作为链接的href值插入。现在,您的样式表将获得更高的优先级,您可以在需要时使用“!important”指令。
这是唯一适用于最新版Chrome的解决方案。