Chrome扩展CSS操作[重复]答案

【问题标题】：Chrome Extension CSS manipulation [duplicate]Chrome扩展CSS操作[重复]
【发布时间】：2012-09-16 00:17:49
【问题描述】：

可能重复：
My CSS is not getting injected through my content script

我一直在尝试制作一个 Chrome 扩展程序，以在每次加载到选项卡时将谷歌的背景颜色更改为黑色。

我的 manifest.json 中有以下内容：

{
  "name": "Background to black",
  "manifest_version": 2,
  "version": "1.0",
  "description": "Google black",
  "permissions": ["tabs", "http://www.google.com/*"],
  "browser_action": {
    "default_icon": "icon.png"
  },
  "content_scripts": [
    {
      "matches": ["http://www.google.com/*"],
      "css": ["backgroundtoblack.css"],
      "run_at": "document_start",
      "all_frames": true
    }
  ]
}

这在我的 backgroundtoblack.css 中：

body{
background: #000000;
}

但是它对我不起作用，我不明白我做错了什么。

【问题讨论】：

只是一个旁注：已经有扩展可以做到这一点以及更多（如this one）。
我有兴趣自己学习如何做。不过还是谢谢你的链接。
“google 的背景颜色”——你的意思是 google.com 页面吗？
这可能与 Chrome 可能默认使用 HTTPS 的事实有关，因此您的规则 "http://www.google.com/*" 将不匹配它。你能检查一下吗？

标签： css google-chrome scripting google-chrome-extension

【解决方案1】：

这与清单文件无关，而与您的 CSS 文件有关。用这个替换你的 CSS，

html, body {
    background: #000000 !important;
}

扩展程序现在应该可以工作了。（在本地测试时有效）。

注意：我不得不稍微更改一下您的matches，因为我使用 HTTPS Everywhere。如果 Chrome 默认使用 HTTPS 加载，您可能需要更改它。

【讨论】：

单独更改 css 就可以了，谢谢。是 !important 还是 html, body;还是两者兼而有之？