Fire event after Promise

Question

I have a project that works like a webproxy. Use it to make changes to other sites. (This part is important, I can only inject javascript code, but I can not change the code of the site itself.)

I'm trying to modify a website made in React and I can not do it. The site takes content through api and promises. So I have the problem:

If I use:

window.addEventListener('DOMContentLoaded', function () {

  document.getElementsByClassName ('content-class')[0].innerHTML="New Content";
});

Content does not exist yet and does not work

If I use:

window.onload = function() {
 document.getElementsByClassName ('content-class')[0].innerHTML="New Content";
}

It works after some time the content appeared.

I Tried

var content = document.getElementsByClassName('content-class')[0];

content.addEventListener ('load', function() {

    document.getElementsByClassName('content-class')[0].innerHTML="New Content";

});

Unsuccessful too

How could I solve this? Is there any way to trigger an event after all the promises are finished?

Or detect that the element was created by the promise and trigger an event.

Answer 1

As far as I know there is no way to trace promises that occur within the React app

However, modern browsers do have the mutation observer api developer.mozilla.org/en-US/docs/Web/API/MutationObserver which an be used to detect changes that the react app makes to the DOM