一尘不染

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

css

谁能向我解释一下。我正在尝试使用具有Google扩展名的content_script将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;
}

阅读 469

收藏
2020-05-16

共1个答案

一尘不染

样式表实际上是注入的,但没有应用,因为其他样式会覆盖规则。要使规则生效,您可以选择以下选项:

  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"]
}

web_accessible_resources当清单版本2处于活动状态时,最后一个键是必需的,以便可以从非扩展页面读取CSS文件。

2020-05-16