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??