0

First & foremost excuse my ignorance as im still trying to wrap my head aroud mutationObservers

I'm creating a chrome extension that detects certain words from an ordered list. when content script runs at first the ordered list element isn't rendered so I used a mutationObserver to capture it when it's created however as I scroll through the page the ordered list keeps increasing in size via API calls, how can I keep track of the new results rendered under the ordered list?

What i've done so far

const waitForElm = async (selector) => {
    return new Promise((resolve) => {
        if (document.querySelector(selector)) {
            return resolve(document.querySelector(selector));
        }

        const observer = new MutationObserver((mutations) => {
            if (document.querySelector(selector)) {
                resolve(document.querySelector(selector));
                observer.disconnect();
            }
        });

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

waitForElm("ol.artdeco-list").then((elm) => {
    console.log("Element is ready");
    // Tried to create a new mutationObserver here.
});

I've tried creating another mutationObserver once promise was resolved on the same element that was found "ol.artdeco-list", but that didn't seem to work...

Any advice??

  • Turns out my questions is a duplicate of (https://stackoverflow.com/questions/38881301/observe-mutations-on-a-target-node-that-doesnt-exist-yet) – hisham wolley Jul 07 '22 at 05:17

0 Answers0