javascript - 注入(inject)的 CSS 未在 Chrome 扩展中加载

Question

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

 "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 抛出错误。所以我猜文件被注入(inject)了，但 css 仍然没有应用

Answer 1

好吧，我想通了。显然，当匹配是查询字符串的一部分时，Chrome 不会注入(inject) 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"

      ]
    }

这成功了。