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

Posted 2023-03-06

【中文标题】如何通过 Chrome 扩展将 CSS 注入网页？

【英文标题】：How to inject CSS into webpage through Chrome extension?

【发布时间】：2011-11-28 23:09:52

【问题描述】：

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

【参考方案1】：

您可能需要在清单文件中添加额外的一行：

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

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

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

Developer's guide Manifest files Content scripts Background pages

【讨论】：

关于如何使用 chrome 应用程序包装器而不是扩展程序的任何想法？清单有点不同，添加 content_scripts 部分似乎不会产生任何结果。

不错的答案！可以在 content_script 中注入 CSS 太棒了！

【参考方案2】：

您还可以使用 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 中唯一适合我的解决方案。

【讨论】：

这是在 Firefox 上解决此Bug 1417569 的好方法。