Running Code post DOMContentLoaded & post Reactive 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.