Running Code post DOMContentLoaded & post Reactive Code

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 ( 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(() =>
}, 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.


Safari doesn't support this as of this time.