Running Code post DOMContentLoaded & post Reactive Code
Google Chrome Extension to run code post JavaScript loaded code
I'm writing a new chrome extension that modifies the HTML source code page a tiny bit.
I managed to achieve this for my INR extension (https://chrome.google.com/webstore/detail/inr/bdjdfhnjlganmgdjdbdaegfahbcjeloi) but only if the page loads before JavaScript is executed. I used :
document.addEventListener('DOMContentLoaded', function()
{
// code that the extension does
});
But for some reactive applications like when using React or Angular, not all code is done loading with. For that we have window.requestIdleCallback
in which we can call a function that executes during idle time, post the execution of JavaScript.
But even this is not full-proof because I've noticed code running a little late post DOMContentLoaded. One way to achieve this (even if it's not at 100% surety) is using setTimeout
.
let executeAfterPageLoad = () =>
{
console.log("in executeAfterPageLoad");
// code for google chrome extension
}
setTimeout(() =>
{
window.requestIdleCallback(executeAfterPageLoad);
}, 5000); // Run this after 5 seconds of idle time.
Note: You can set a flag to run this only one time - once after the DOM is loaded instead of every time the browser is idle.
Reference: https://developer.chrome.com/blog/using-requestidlecallback/
Safari doesn't support this as of this time.