我的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; } 

    样式表实际上被注入,但没有被应用,因为其他样式覆盖规则。 为了使规则起作用,你有一些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文件。