Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Chrome extension's CSS is not loaded

I'm developing a "content script" Chrome extension. I'm trying to use a CSS files to style some existing elements on a page and to style elements that I create dynamically with JavaScript.

I've specified my CSS file in the manifest.json file:

{
    ...
    "content_scripts": [
        {
            "matches": [ ... ],
            "js": [ ... ],
            "css": [ "style.css" ]
        }
    ]
    ...
}

And then if I put something like below into my style.css nothing happens:

body {
    background-color: red;
}

I've also put some rules in the form of:

#MyInsertedEl {
    color: red;
}

And then inserted (using jQuery) a element with the id of MyInsertedEl (anchor link) into the page but it's colour is not red (the element is inserted and visible in the page).

So what gives? What am I doing wrong? According to the docs I've got everything as I should, and google does not return anything useful.

edit: this code is run on facebook's pages if that is relevant in any way ...

like image 650
Jan Hančič Avatar asked Sep 29 '10 19:09

Jan Hančič


People also ask

Why CSS file is not working in Chrome?

Make sure that your CSS and HTM/HTML files use the same encoding ! If your HTM/HTML files are encoded as UNICODE, your stylesheet has to be as well. IE and Edge are not fussy : stylesheets are rendered regardless of the encodings. But Chrome is totally intolerant of unmatched encodings.

How do I fix CSS not working?

Regenerating CSS: This can easily be fixed by going to WP admin > Elementor > Tools > Regenerate CSS. Then, you can clear the cache (WP cache and browser cache) and refresh the page. Clearing Site Cache: Check if you have any caching plugins on your site or any server level caching enabled. Clear those caches.

How do I add CSS extensions to Chrome?

Once the manifest, CSS and JavaScript files are ready, head over to chrome://extensions/ from the browser's address bar and enable developer mode. That activates the “Load unpacked” button to add the extension files. It's also possible to toggle whether or not the developer version of the extension is active.


1 Answers

Well, apparently, there's a bug in Chrome. If you have a ? in your matches expression CSS files will not be loaded. I've filed a bug report with more details here.

like image 184
Jan Hančič Avatar answered Sep 24 '22 06:09

Jan Hančič