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:
- 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?
javascript css
google-chrome firefox browser-addons asked Jan 20 at 15:08
rhino2rhondarhino2rhonda
404514
add a comment |
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?
javascript css
google-chrome firefox browser-addons asked Jan 20 at 15:08
rhino2rhondarhino2rhonda
404514
add a comment |
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?
javascript css
google-chrome firefox browser-addons asked Jan 20 at 15:08
rhino2rhondarhino2rhonda
404514
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?
javascript css
google-chrome firefox browser-addons javascript css
google-chrome firefox browser-addons asked Jan 20 at 15:08
rhino2rhondarhino2rhonda
404514
asked Jan 20 at 15:08
rhino2rhondarhino2rhonda
404514
asked Jan 20 at 15:08
rhino2rhondarhino2rhonda
404514
asked Jan 20 at 15:08
rhino2rhondarhino2rhonda
404514
asked Jan 20 at 15:08
rhino2rhondarhino2rhonda
404514
404514
add a comment |
add a comment |
2 Answers
2
active
oldest
votes
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
Dark reader rendered
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.
answered Jan 20 at 16:42
Siddhesh RaneSiddhesh Rane
34036
Both Dark Reader and Project Houdini are very relevant. Thanks a ton!
– rhino2rhonda
Jan 20 at 18:18
add a comment |
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
styleattribute so you can response to those changes if necessary
answered Jan 20 at 15:17
T.J. CrowderT.J. Crowder
686k12112211312
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
– rhino2rhonda
Jan 20 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 at 16:00
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54277787%2fbrowser-render-hook%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
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
Dark reader rendered
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.
answered Jan 20 at 16:42
Siddhesh RaneSiddhesh Rane
34036
Both Dark Reader and Project Houdini are very relevant. Thanks a ton!
– rhino2rhonda
Jan 20 at 18:18
add a comment |
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
Dark reader rendered
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.
answered Jan 20 at 16:42
Siddhesh RaneSiddhesh Rane
34036
Both Dark Reader and Project Houdini are very relevant. Thanks a ton!
– rhino2rhonda
Jan 20 at 18:18
add a comment |
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
Dark reader rendered
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.
answered Jan 20 at 16:42
Siddhesh RaneSiddhesh Rane
34036
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
Dark reader rendered
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.
answered Jan 20 at 16:42
Siddhesh RaneSiddhesh Rane
34036
answered Jan 20 at 16:42
Siddhesh RaneSiddhesh Rane
34036
answered Jan 20 at 16:42
Siddhesh RaneSiddhesh Rane
34036
answered Jan 20 at 16:42
Siddhesh RaneSiddhesh Rane
34036
34036
Both Dark Reader and Project Houdini are very relevant. Thanks a ton!
– rhino2rhonda
Jan 20 at 18:18
add a comment |
Both Dark Reader and Project Houdini are very relevant. Thanks a ton!
– rhino2rhonda
Jan 20 at 18:18
Both Dark Reader and Project Houdini are very relevant. Thanks a ton!
– rhino2rhonda
Jan 20 at 18:18
Both Dark Reader and Project Houdini are very relevant. Thanks a ton!
– rhino2rhonda
Jan 20 at 18:18
add a comment |
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
styleattribute so you can response to those changes if necessary
answered Jan 20 at 15:17
T.J. CrowderT.J. Crowder
686k12112211312
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
– rhino2rhonda
Jan 20 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 at 16:00
add a comment |
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
styleattribute so you can response to those changes if necessary
answered Jan 20 at 15:17
T.J. CrowderT.J. Crowder
686k12112211312
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
– rhino2rhonda
Jan 20 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 at 16:00
add a comment |
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
styleattribute so you can response to those changes if necessary
answered Jan 20 at 15:17
T.J. CrowderT.J. Crowder
686k12112211312
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
styleattribute so you can response to those changes if necessary
answered Jan 20 at 15:17
T.J. CrowderT.J. Crowder
686k12112211312
answered Jan 20 at 15:17
T.J. CrowderT.J. Crowder
686k12112211312
answered Jan 20 at 15:17
T.J. CrowderT.J. Crowder
686k12112211312
answered Jan 20 at 15:17
T.J. CrowderT.J. Crowder
686k12112211312
686k12112211312
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
– rhino2rhonda
Jan 20 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 at 16:00
add a comment |
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
– rhino2rhonda
Jan 20 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 at 16:00
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
– rhino2rhonda
Jan 20 at 15:58
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
– rhino2rhonda
Jan 20 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 at 16:00
@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 at 16:00
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54277787%2fbrowser-render-hook%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
