制作<Style> block !important using javascript?

Question

I am trying to make a chrome extension that overrides the style used by a webpage of my choice. I have already figured out how to change the style using javascript, though when the page loads, the a brief moment when you can see the original page. I tried setting the manifest file to run at document start, but that just had my css get overwritten with the original page. How do I go about this?

const addStyle = (() => {
  const style = document.createElement('style');
  document.head.append(style);
  return (styleString) => style.textContent = styleString;
})();

Answer 1

Assuming you already artificially increased CSS specificity , there are two more methods:

1. DOM order

Make the style element the last sheet in DOM by placing it after body as a direct child of html .

^{It's a perfectly valid DOM tree per DOM specification so we can disregard the fact it violates HTML specification as that's irrelevant for the browser use case and doesn't cause any adverse effects.}

manifest.json:

• content_scripts should have "run_at": "document_start"

content.js:

const styles = [];
const appendToRoot = el => document.documentElement.append(el);
const addStyle = (() => {
  const style = document.createElement('style');
  appendToRoot(style);
  if (!document.body) styles.push(style);
  return (styleString) => style.textContent = styleString;
})();

if (document.body) {
  onBody();
} else {
  new MutationObserver((_, observer) => {
    if (document.body) {
      observer.disconnect();
      onBody();
    }
  }).observe(document.documentElement, {childList: true});
}

function onBody() {
  // move them after body
  styles.forEach(appendToRoot);
  styles.length = 0;
}

2. Origin in cascade: user

A user-originated rule with !important wins over author-originated rule with !important ( MDN ) so if your CSS has !important on all of its rules, use chrome.tabs.insertCSS with cssOrigin: 'user' from the background script in a listener for chrome.webNavigation.onCommitted , for example.