CODEWITHSUNDEEP
javascripthtmlcssbrowsergoogle-chrome-extension
User59
User59

Reputation: 517

Applying CSS styles from chrome extension to page 'instantly' before page fully renders

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!

Upvotes: 9

Views: 1436

Answers (1)

User59
User59

Reputation: 517

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:

Upvotes: 6

Related Questions