1

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:

  • Parsing the CSS and Javascript of the web page to determine the styles of elements. This seems redundant as the browser is also doing it
  • Scanning the DOM and checking the computed styles of each element and overriding stuff. This works but if elements change dynamically, we have to repeatedly scan for changes which might be heavy

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

rohit-biswas
  • 815
  • 1
  • 11
  • 23

2 Answers2

1

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
T.J. Crowder
  • 1,031,962
  • 187
  • 1,923
  • 1,875
  • Thanks! This is very helpful. I guess listening for DOM changes should work well enough. If you don't mind, can you throw some light on why render hooks do not exist? I'm guessing performance because it seems like a useful feature especially for browser erxtensions – rohit-biswas Jan 20 '19 at 15:58
  • @rhino2rhonda - I'm afraid I don't have any particular insight on that side of things, other than that I suspect you're right about the performance implications... – T.J. Crowder Jan 20 '19 at 16:00
1

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.

Siddhesh Rane
  • 419
  • 3
  • 7