CODEWITHSUNDEEP
google-chromegoogle-chrome-extension
sneakyfildy
sneakyfildy

Reputation: 361

Google Chrome extensions's content CSS won't apply until dev. console is opened and closed

Wierd. This is part of my manifest:

"permissions"     : [
    "http://site.com/"
    ,"http://site.com/*"
    ,"http://www.site.com/*"
    ,"http://www.site.com/"
   ]
   ,"web_accessible_resources": [
     "css/tweaks.css"
   ]
   ,"content_scripts" : [{
    "matches" : [
        "http://*.site.com/",
        "http://*.site.com/*",
        "http://site.com/*",
        "http://www.site.com/*"
    ],
    "css" : [
                    "css/tweaks.css"
    ],
    "js" : [
                "js/jquery162.js",
                "js/tweaks.js"
    ]
    ,"run_at": "document_end"
}]

Here's tweaks.css:

*{
   color: red !important;
   font-weight: bold;
 }

And finally the background.html (which is not important here)

<html>
    <head>
        <title></title>
        <script src="js/jquery162.js"></script>
        <script src="js/js_extend/extend.js"></script>
        <!--<script src="js/main.js"></script>-->
    </head>
    <body>
    </body>
</html>

And, when i reload an extension (unpacked), then reload page, which must be customized by injected CSS, I see nothing. When I open developer console in google.chrome I can't see any custom styles applied to any element. After that I'm closing the console and SUDDENLY see all text gone red and bold, open the console and, guess what, see the "user stylesheet" with my injected rules. I can't understand what's wrong. Before google had changed their manifest to version 2 i had one middle-sized extension with A LOT OF content CSS, which was working perfectly, now I can't inject even *{color:red} rule. Please, help me.

Chrome is 24.0.1312.14 beta-m

UPDATE: tweaks.js is empty

UPDATE: tested with 24.0.1312.14 m - same sh...

MORE UPDATE: Fixed it in some way. But i'm not fully confident about it.

      chrome.tabs.onUpdated.addListener(function(tabId, changeInfo, tab) {
var isSite    = ( tab.url && tab.url.indexOf('site.com') >= 0);


if ( isSite ){
    chrome.tabs.executeScript(tabId, {
        file: Paths.add_element //filepath
    });
    chrome.tabs.insertCSS(tabId, {
        file: Paths.my_css_path //filepath
    });
}

});

The trick is that you need to do it after all site.com rules applied.

Upvotes: 0

Views: 346

Answers (1)

int3
int3

Reputation: 13201

It's a known bug in Chrome: See http://crbug.com/154905 and http://crbug.com/158012

Upvotes: 2

Related Questions