JavaScript - wait until element loaded on website using Chrome extension

Question

I'm developing a Chrome extension that clicks elements on a website, but some of the elements appear after the check and the code doesn't work. I need to make the function wait until the selected element is loaded.

And NOT wait in delays in seconds like on setTimeout function.

How can I do it?

Answer 1

Can be done with MutationObserver:

function handleSomeDiv(someDiv) { 
    console.log("div was handled");
}

const observer = new MutationObserver(function (mutations, mutationInstance) {
    const someDiv = document.getElementById('some-div');
    if (someDiv) {
        handleSomeDiv(someDiv);
        mutationInstance.disconnect();
    }
});


observer.observe(document, {
    childList: true,
    subtree:   true
});