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

任何人都可以向我解释这一点。 我正尝试使用带有Google扩展名的content_script将一个CSS文件注入到网页上，但是我的css文件从未被添加到网页中。 有人能告诉我我做错了什么，并帮我修复它吗？ 谢谢

performance：

{ "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; } 

Answer 1

样式表实际上被注入，但没有被应用，因为其他样式覆盖规则。 为了使规则起作用，你有一些select：

1. 增加你的CSS规则的特殊性 。

2. 每个规则后缀!important ：

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

3. 通过内容脚本注入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_accessible_resources是必需的，以便可以从非扩展页面读取CSS文件。