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"

      ]
    }

这很有用。

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

1 个答案: