insertBefore (enclosed in addEventListener "click" and called via MutationObserver on element attribute value change) is executed multiple times

Question

This is a continuance to this question.

I've written a Greasemonkey userscript for kat.cr that adds a few extra buttons inside the 'Torrents awaiting feedback' popup.

---

The procedure is this: (provided that you have login and that you have some downloaded some torrents that "await feedback"):
after you click the FEEDBACK button, the 'Torrents awaiting feedback' popup appears,
containing the torrents that await feedback,
i.e. the style.display attribute of e.g. the element #fancybox-wrap becomes from none to block (as I've noticed in Firefox Inspector).

---

I want to improve the script, so, I'm trying to use MutationObserver in order to monitor the change in the attribute style.display on the above element, and add my extra buttons after that change occurs.

My code is like this:

document.querySelector('.showFeedback > a').addEventListener('click', function() {


    var observer = new MutationObserver(function(mutations) {
        if (mutations[0].target.style.display == 'block') {
            var parentElement = document.querySelector('div.buttonsline:nth-child(10)');
            var theFirstChild = parentElement.firstChild;
            var button = document.createElement('BUTTON');
            parentElement.insertBefore(button, theFirstChild);
            button.id = 'mybutton1';
            button.innerHTML = 'APPROVE SELECTED';
            document.querySelector('#mybutton1').className = 'siteButton bigButton';
        }
    }).observe(
        document.querySelector('#fancybox-wrap'), {
            attributes: true,
            attributeFilter: ['style']
        }
    );


});

The problem is that the button is added multiple times, instead of 1.
Why is this happening? How can I fix this?

Thank you

Answer 1

Apparently that element's style is changed for other properties, not only display.

Check whether the old display value wasn't block (requires attributeOldValue parameter):

new MutationObserver(function(mutations) {
    if (mutations[0].target.style.display == 'block' && 
        !mutations[0].oldValue.match(/display:\s*block/)) {
        ...............
    }
}).observe(document.querySelector('#fancybox-wrap'), {
    attributeOldValue: true,
    attributeFilter: ['style']
});

or look at the button id:

if (mutations[0].target.style.display == 'block' && 
    !document.querySelector('#mybutton1')) {

or disconnect the observer after the first successful run:

new MutationObserver(function(mutations, observer) {
    if (mutations[0].target.style.display == 'block') {
        observer.disconnect();
        ...........
    }
})...........

Also there's no need for var observer = because it's passed as a parameter to the callback.