I have written a Chrome extension that loads a script with run_at set to document_start.

My script uses Mutation Observer in order to invoke some code upon the addition of an element with id X to a certain webpage.

That element is created when the page first loads, and then recreated when part of the page reloads following some button click.

My mutation observer fails to detect that element in either case.

However, if I duplicate the element (Developer Tools > Elements > element > context menu > Duplicate element), then my mutation observer does detect the duplicate.

I ran a test: I changed the id of some random element to X. It was not detected. That has made me suspect the original element is first created and then has its id assigned or updated. I am not sure how I could prove of refute this theory (the process of generating the webpage code looks very complex, with layers and layers of scripts involved, and I have very little experience).

Does this theory make sense? Can I observe an id change? If the theory does not make sense or if it is impossible to observe an id change, what alternatives do I have?

Thank you!

Edit:

My code looks like this:

const observer = new MutationObserver(function(mutations) {
    mutations.forEach(function(mutation) {
        for (let i = 0; i < mutation.addedNodes.length; i++) {
            if (mutation.addedNodes[i].id == "X") {
                alert("X detected!");
            };
        };
    });
});

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