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 ...
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.
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.
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.
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With