注入的 css 未加载到 Chrome 扩展程序中

Question

我正在开发一个扩展程序，需要向我添加的元素添加一些 css。所以我有以下清单

 "content_scripts": [

    {
      "matches": [
        "https://play.google.com/store/apps/details?id=*",
        "http://play.google.com/store/apps/details?id=*"
      ],
      "js": [
        "js/jquery/jquery.js",
        "js/jquery.knob.js",
        "src/inject/inject.js"
      ],
      "css": [
        "src/inject/inject.css"

      ]
    }

inject.css 存在并具有以下内容：

.mtrow{

}
.mtclear{
    clear:both;
}
.mtrow .col1{
    width:8.333%;

}

.mtrow .col2{
    width:16.6666%;

}

等等

所以我尝试做这样的事情 onload

var container="<div class='mtrow' id='metaintel-container'>"+
    "<div class='col4'><input id=\"privacy-dial\" type=\"text\" value=\"75\" class=\"dial\" data-fgColor=\"#66CC66\""+

        "data-angleOffset=-90 data-angleArc=180 readonly=true ></div>"+
        "<div class='col4'></div><div class='col4'><input id=\"security-dial\" type=\"text\" value=\"75\" class=\"dial\" data-fgColor=\"#66CC66\""+

        "data-angleOffset=-90 data-angleArc=180 readonly=true ></div>"+

    "</div>";   
$(".details-section:first()").prepend(container);

inject.css 中的样式根本没有加载。我尝试将名称更改为不存在的名称，但 chrome 会引发错误。所以我猜文件被注入了，但仍然没有应用 css

Answer 1

好吧，我想通了。显然，当匹配项是查询字符串的一部分时，Chrome 不会注入 css。相当奇怪的错误。

将匹配项更改为“ https://play.google.com/store/apps/* ”有效，但不是理想的解决方案

"content_scripts": [

    {
      "matches": [
        "https://play.google.com/store/apps/*",
        "http://play.google.com/store/apps/*"
      ],
      "js": [
        "js/jquery/jquery.js",
        "js/jquery.knob.js",
        "src/inject/inject.js"
      ],
      "css": [
        "src/inject/inject.css"

      ]
    }

这奏效了。