I'm writing a Chrome extension using JavaScript and the extension's purpose is to manipulate the DOM on a website that uses React and dynamically loads different elements. Is there any way to detect that the page has fully rendered?

Using DOMContentLoaded, or even the Load, Event Handlers fail because they trigger right when the base HTML 'root' is structured. This extension is designed to create a task list based on incomplete assignments, which can take an unknown length of time to render fully.

Currently, the issue is worked around by using a custom promise that waits for 1500ms after window.onload before attempting to interact with the DOM. I have also used a 100ms Interval to search for specific components. Neither of these options seem to be the best. The 1500ms option isn't dynamic enough, sometimes 200ms may be enough while other times 1800ms is needed. As for the interval checking, I feel the cost/benefit ratio is too high and would prefer to avoid intervals like that if possible.

What are my options?

Thanks!