如何通过Chrome扩展程序将CSS注入网页？

Question

我不知道如何通过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/*" ]

}

Answer 1

您必须在清单文件中添加额外的行:

"content_scripts": [
    {
      "matches": ["http://test-website.com/*"], 
      "js": ["js/content-script.js"],
      "css" : ["yourcss.css"]
    }
],

定义的CSS文件"css": ["..."]将添加到与中提到的位置匹配的每个页面中matches.

如果您正在开发Chrome扩展程序,请务必查看以下页面:

1. 开发人员指南
   • 清单文件
   • 内容脚本
   • 背景页面

Answer 2

您还可以使用以下语法将css文件注入一个或多个标签的内容,详见Chrome标签API网页:

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

当然,您首先需要目标选项卡的ID.

Chrome扩展文档没有讨论如何解释注入的CSS,但事实是通过此方法或通过将它们包含在清单中而注入网页的CSS文件被解释为用户样式表.

在这方面,需要注意的是,如果你是非常重要的做浏览器会忽略用户的样式表指示"重要!":通过使用这些方法注入样式表,他们将在一个非常重要的方法限制(至少为Chrome浏览器第19节的) .注入的样式规则将由页面中包含的任何内容编写.

一个解决方法,如果你想避免注入内联样式规则,是以下(我使用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的解决方案.