Javascript 如何通过 Chrome 扩展程序将 CSS 注入网页？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7619095/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to inject CSS into webpage through Chrome extension?
提问by timmya
I do not know how to inject CSS into a webpage through a Chrome extension. I am trying to inject this into a web page:
我不知道如何通过 Chrome 扩展程序将 CSS 注入网页。我正在尝试将其注入网页：
body {
background: #000 !important;
}
a {
color: #777 !important;
}
Here is my manifest.json:
这是我的 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/*" ]
}
回答by Rob W
You can have to add an extra line in your manifest file:
您可能必须在清单文件中添加额外的行：
"content_scripts": [
{
"matches": ["http://test-website.com/*"],
"js": ["js/content-script.js"],
"css" : ["yourcss.css"]
}
],
The CSS file as defined in "css": ["..."]will be added to every page which matches the location as mentioned in matches.
中定义的 CSS 文件"css": ["..."]将添加到与 中提到的位置匹配的每个页面中matches。
If you're developing a Chrome extension, make sure that you have a look at these pages:
如果您正在开发 Chrome 扩展程序，请务必查看以下页面：
回答by jCyCle
You can also inject a css file into one or more tab's content by using the following syntax as detailed on the Chrome Tabs API webpage:
您还可以使用Chrome Tabs API 网页上详述的以下语法将 css 文件注入一个或多个选项卡的内容：
chrome.tabs.insertCSS(integer tabId, object details, function callback);
You will first need the ID of your target tab, of course.
当然，您首先需要目标标签的 ID。
The Chrome Extension documentation doesn't discuss howthe injected CSS is interpreted, but the fact is that CSS files that are injected into a webpage, by this method or by including them in the manifest, are interpreted as user stylesheets.
Chrome 扩展文档没有讨论如何解释注入的 CSS，但事实是通过这种方法或通过将它们包含在清单中注入网页的 CSS 文件被解释为用户样式表。
In this respect, it is important to note that if you doinject stylesheets by using these methods, they will be limited in one crucial way ( at least, as of Chrome v.19 ): Chrome ignores "!important" directives in user stylesheets. Your injected style rules will be trumped by anything included in the page as it was authored.
在这方面，重要的是要注意，如果您确实使用这些方法注入样式表，它们将受到一种关键方式的限制（至少，从 Chrome v.19 开始）：Chrome 忽略用户样式表中的“!important”指令. 您注入的样式规则将被页面中包含的任何内容所取代。
One work-around, if you want to avoid injecting inline style rules, is the following (I'm using jQuery for the actual insertion, but it could be done with straight Javascript):
如果您想避免注入内联样式规则，一种解决方法如下（我使用 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));
});
You can then put the stylesheet in your extension's styles folder, but you won't need to list it anywhere on the manifest. The relevant part above is that you will use the chrome API to get your stylesheet's URL, then plug that in as the link's href value. Now, your stylesheet will be given a higher precedence, and you can use the "!important" directive where needed.
然后，您可以将样式表放在扩展程序的样式文件夹中，但不需要在清单的任何位置列出它。上面的相关部分是，您将使用 chrome API 来获取样式表的 URL，然后将其作为链接的 href 值插入。现在，您的样式表将获得更高的优先级，您可以在需要时使用“!important”指令。
This is the only solution that works for me in the latest version of Chrome.
这是在最新版本的 Chrome 中对我有用的唯一解决方案。
