我的CSS没有通过我的内容脚本注入

谁能给我解释一下吗。我试图使用带有谷歌扩展名的content_脚本将CSS文件注入网页，但我的CSS文件从未添加到网页中。有人能告诉我我做错了什么并帮我改正吗？谢谢

舱单：

{
  "name": "Extension",
  "version": "0",
  "description": "",


  "permissions": ["tabs", "http://*/*", "https://*/*", "file:///*/*"],
    "content_scripts": [
    {
        "matches": [ "http://*/*", "https://*/*", "file:///*/*"],
        "css": ["myStyles.css"],
        "js": ["myScript.js"],
        "all_frames": true
    }
  ]
}

myStyles.css

#test {
    margin: 0 10px;
    background: #fff;
    padding: 3px;
    color: #000;
}

---

样式表实际上是插入的，但没有应用，因为其他样式会覆盖规则。要使规则发挥作用，您有一些选择：

增加CSS规则的可用性

在每个规则后面加上

！重要信息

：

#test {
    margin: 0 10px !important;
    background: #fff !important;
    padding: 3px !important;
    color: #000 !important;
}

通过内容脚本注入CSS：

myScript.js

：

var style = document.createElement('link');
style.rel = 'stylesheet';
style.type = 'text/css';
style.href = chrome.extension.getURL('myStyles.css');
(document.head||document.documentElement).appendChild(style);

manifest.json

{
  "name": "Extension",
  "version": "0",
  "description": "",
  "manifest_version": 2,
  "permissions": ["tabs", "http://*/*", "https://*/*", "file:///*/*"],
  "content_scripts": [
    {
        "matches": [ "http://*/*", "https://*/*", "file:///*/*"],
        "js": ["myScript.js"],
        "all_frames": true
    }
  ],
  "web_accessible_resources": ["myStyles.css"]
}

当2处于活动状态时，最后一个键，

web\u accessible\u resources

是必需的，以便可以从非扩展页读取CSS文件

---

如果您想针对特定网站，请执行以下操作：

“匹配项”：[“https://*.google.com/*”]

---

在

之前的
/*
。google

对我来说才是真正的诀窍，因为使用

www

不起作用。

澄清一下：你不必同时使用这两种方法。使用其中一个就可以了。第一个更可靠，第二个可能会导致闪烁。#1对我有效，但#2不起作用。真奇怪。原始页面是否可能试图阻止扩展以更改其样式？在一些网站（如appannie.com）上可以，但有些网站（如facebook.com）则不行。不管怎么说，#1很好。谢谢@Xan它将成为文档中的最后一个样式表，因此，如果特定性至少与文档中现有的样式表一样高，则注入的样式表将优先。