# 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](https://chrome.google.com/webstore/detail/inr/bdjdfhnjlganmgdjdbdaegfahbcjeloi)) but only if the page loads before JavaScript is executed. I used :

```javascript
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`.

```javascript
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/](https://developer.chrome.com/blog/using-requestidlecallback/)

Safari doesn't support this as of this time.