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

任何人都可以向我解释.我正在使用带有Google扩展程序的content_script将CSS文件注入到网页上,但是我的css文件永远不会添加到网页.有人可以告诉我我做错了什么,帮我解决吗？谢谢

表现：

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

myStyles.css

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

解决方法

样式表实际上是注入的,但不被应用,因为其他样式会覆盖规则.要使规则正常工作,您有一些选择：

>增加你的CSS规则的specificity.
>后缀每个规则！重要：

#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","manifest_version": 2,"all_frames": true
    }
  ],"web_accessible_resources": ["myStyles.css"]
}

当manifest version 2处于活动状态时,最后一个关键字web_accessible_resources是必需的,以便可以从非扩展页面读取CSS文件.

原文地址：https://www.jb51.cc/css/217214.html