CODEWITHSUNDEEP
javascriptgoogle-chrome-extension
SoWhat
SoWhat

Reputation: 5622

Injected css not loaded in Chrome extension

I am working on an extension and need to add some css to elements that I add. So I have the following manifest

 "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 exists and has the following contents:

.mtrow{

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

}

.mtrow .col2{
    width:16.6666%;

}

and so on

So I try to do something like this 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);

The styles in inject.css are not loading at all. I tried changing the name to something that didn't exist and chrome throws an error. So I guess the file is injected, but still the css is not applied

Upvotes: 1

Views: 1398

Answers (1)

SoWhat
SoWhat

Reputation: 5622

Okay I figured this out. Apparently Chrome doesn't inject css when matches is part of a query string. Quite a wierd error.

Changing the matches to"https://play.google.com/store/apps/*" worked, but is not an ideal solution 

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

      ]
    }

This worked.

Upvotes: 5

Related Questions