如何通过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 文件将添加到与中提到的位置匹配的每个页面中匹配。

如果您正在开发 Chrome 扩展程序，请确保查看以下页面：

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

Answer 2

您还可以使用 Chrome Tabs API 网页：

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

然后您可以将样式表放入扩展程序的 styles 文件夹中，但您不需要将其列在清单上的任何位置。上面的相关部分是，您将使用 chrome API 来获取样式表的 URL，然后将其作为链接的 href 值插入。现在，您的样式表将获得更高的优先级，并且您可以在需要时使用“!important”指令。

这是在最新版本的 Chrome 中唯一适合我的解决方案。

Answer 3

看起来 chrome.tabs.insertCSS 已被弃用。您应该使用：

https://developer.chrome.com/docs/extensions/参考/脚本/

let [tab] = await chrome.tabs.query({
    active: true,
    currentWindow: true
});

chrome.scripting.insertCSS({
        target: {
            tabId: tab.id
        },
        files: ["button.css"],
    },
    () => {
        chrome.scripting.executeScript({
            target: {
                tabId: tab.id
            },
            function: doSomething,
        });
});

Answer 4

这并不难。你可以使用这个：

{
  "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",
  "host_permissions": ["*://test-website.com/*"],
  "browser_action": {
    "default_icon": "icon19.png"
  },
  "content_scripts": [
    {
      "matches": ["http://test-website.com/*", "https://test-website.com/*"],
      "js": ["js/content-script.js"],
      "css": ["css/styles.css"]
    }
  ]
}