CODEWITHSUNDEEP
javascriptcssgoogle-chromefirefoxbrowser-addons
rohit-biswas
rohit-biswas

Reputation: 845

Browser render hook

Do browsers provide any pre-render hook where you can apply changes to styles of DOM elements before they are rendered?

For example, I might want to change the color of anything that is red to green

This requirement is for a browser extension so the solution should work across different webpages. It is not trivial to override the style of an element while being agnostic of the source code as the style of an element is a result of the CSS and Javascript that runs on it and the mechanism is different for different websites. Ways that come to mind are:

So does such a browser hook exist? If not, what alternate approach would you recommend?

Upvotes: 1

Views: 486

Answers (2)

Siddhesh Rane
Siddhesh Rane

Reputation: 418

For the kind of thing you are trying to achieve, it would be very helpful for you to look at the code of a Chrome extension called Dark Reader. This extension can turn your entire page dark but does so intelligently by analysing the css of the code. If something is already dark, it leaves it as it is. Backgrounds that are bright are made black and text is made white only if the contrast is necessary. An image would make things clear

Original Original

Dark reader rendered enter image description here

Dark reader uses js to analyze the css and styles and injects its own CSS styles in the page to get the required effect.

If you really want to tap into the render pipeline of the browser, then have a look at Project Houdini that will allow such customizations to the browser in the future. Its not ready now.

Upvotes: 1

T.J. Crowder
T.J. Crowder

Reputation: 1075755

There's no per-element render hook, no. You can request a callback just before the next frame is rendered (there are typically 60 frames per second) via requestAnimationFrame, but that wouldn't be a good place to do the kind of check you're thinking of.

To catch changes to individual elements, you could set up mutation observers to catch changes to their style attribute (which is changed by setting the various properties on the style property in code). You'll want to watch whether that turns into a performance issue.

So I suspect you'll need to do a combination of what you've described and the above:

  • Scour the style sheets to look for rules you want to change
  • Identify elements with inline styles you want to change
  • Listen for changes to the style attribute so you can response to those changes if necessary

Upvotes: 1

Related Questions