How does stylus insert css after the original css but before the page is rendered?

[giggity-hub]

Hi there.
I'm trying to make a browser extension but i'm having trouble loading the css at the right time.
When i insert the css via content_scripts it gets overwritten by the original css of the page. When i try to insert it from a js file there is a brief moment where the page is already shown but the custom style not applied

but the stylus extension overwrites the original style and applies the custom style as soon as the page is rendered.
What is your secret?

[tophf]

If your extension simply inserts a CSS file that resides in your extension, you only need "run_at": "document_start" in manifest.json. You don't need to do what Stylus does to load custom user themes and it does a lot.

"content_scripts": [{
  "matches": ["https://www.example.com/*"],
  "css": ["style.css"],
  "run_at": "document_start"
}]

Then just make sure that your selectors override the site's selectors, see tutorials on CSS specificity and use !important.

[giggity-hub]

I want to make a lot of style changes so it's not really feasible to add !important to every line of css. On top of that the original style already makes use of !important so i'd need to use some pretty ugly selectors to achieve a higher specificity.

I'm only interested in the core functionality of adding a style as the last html element at the right time. Could you maybe show me the relevant code section where that happens?

[tophf]

There's no need for you to add a style element like Stylus does because the built-in injection is much faster and simpler as it already ensures the style is the last one in the list of styles (turns out it doesn't T_T).

[giggity-hub]

I've got a similar manifest.json but my custom style is always applied before the original style and therefore overwritten.
I want want my custom css to have higher specificity right out the box and apparently that doesn't work with conventional methods.

[tophf]

Hmm indeed Chrome doesn't put the css declared in manifest.json at the end of style list. Oh well, yet another bug/deficiency that won't be fixed in this century if ever.

In that case you'll have to add a DOM element in a js content script that runs at document_start and then move it after the body element:

"content_scripts": [{
  "matches": ["https://www.example.com/*"],
  "js": ["content.js"],
  "run_at": "document_start"
}]

const style = document.createElement('style');
style.textContent = `
body { color: red }
`;
document.documentElement.appendChild(style);

new MutationObserver((mutations, observer) => {
  if (document.body) {
    observer.disconnect();
    document.documentElement.appendChild(style); // move the style
  }
}).observe(document.documentElement, {childList: true});

An alternative solution would be to use chrome.tabs.insertCSS inside chrome.webNavigation.onCommitted listener and specify cssOrigin: 'user' to make your !important always win over same-specificity selector in the page but you'll have to use !important on everything.

[giggity-hub]

thanks a lot that's exactly what i was looking for

[cheater]

new MutationObserver((mutations, observer) => {
  if (document.body) {
    observer.disconnect();
    document.documentElement.appendChild(style); // move the style
  }
}).observe(document.documentElement, {childList: true});

I'm curious, what happens if this observer is registered after body already exists, and there are no more mutations to body after the registration? Does it fire once? Or will it hang forever?

[tophf]

This observer is registered at document_start so there's no body. It observes the parent of body and waits for body to appear. Future mutations within body don't affect the order of styles as they are outside the body.