Menu
I'm new to making chrome (or even browser) extensions am trying to make one that applies some custom CSS rules to certain page elements. It seems to work generally as expected, with a few slight annoyances.
Namely, when I apply any CSS style rules using JS, there seems to be a delay between the page fully rendering in the browser to when my extension's CSS rules are applied.
One way I've found to overcome this is to add the CSS file I want to be applied instantly to the manifest file, under the content_scripts, like so:
"content_scripts": [
{
"run_at": "document_start",
"all_frames": true,
"matches": ["<all_urls>"],
"js": ["filter.js"],
"css": ["filter.css"]
}
],
But the issue now is that I want to check if the user has pressed the 'enable' button on the pop up for my extension before applying this. To do this, in the filter.js and background scripts, I check the chrome storage etc. to see if the user has the enabled flag set to true.
I then use the chrome.tabs.insertCSS method to insert my CSS file(s).
In the case where the user has pressed disable on the extension, the browser still renders the page with the effects of filter.css until it runs the JS to remove the effects. By the time this happens, the user has already seen the effects of filter.css which I don't want.
What I want is the browser to instantly apply or not apply my styles (depending on if the user has enabled/disabled) before the page is displayed to the user.
The methods of injecting the CSS thus far have all led to a delay. It must be possible to add it in or remove the CSS without a delay, as I've used extensions such as Dark Reader which seem to be able to apply their styles immediately without ever showing the browser content without their CSS.
Ideally, there would be a way to do conditional checking in the manifest, but I know this isn't possible. What else can I do?
Any help would be appreciated!
Thanks for reading!
410
CSS can be added to HTML documents in 3 ways: Inline - by using the style attribute inside HTML elements. Internal - by using a <style> element in the <head> section. External - by using a <link> element to link to an external CSS file.
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.
Complete these interactive tutorials to learn the basics of viewing and changing a page's CSS using Chrome DevTools. Right-click the Inspect Me! text below and select Inspect. The Elements panel of DevTools opens. The Inspect Me! element is highlighted in the DOM Tree. Inspect Me!
See View only the CSS that's actually applied to an element. Check the Show All checkbox in the Computed pane. See View only the CSS that's actually applied to an element. Alternatively, scroll down the Styles pane and find sections named Inherited from <element_name>.
In DevTools, click the element in the DOM Tree. In DevTools, run a query like document.querySelector ('p') in the Console, right-click the result, and then select Reveal in Elements panel. In the Styles pane, click the link next to a CSS rule to open the external stylesheet that defines the rule.
An example is our Wikipedia similar page Chrome extension. There are, however, many other applications for this type of extension, such as modifying the styling of a website, hiding an annoying element, auto-populating a form, or clicking something on page load.
Finally managed to fix my issue. The problem wasn't with any of the functions to insert the CSS, it was just that I was running my code to inject the CSS in the window.onload function. :facepalm:
187
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
