I am trying to detect web page DOM changes, currently using MutationObserver for detecting different changes.

My problem is in uniquely deciding a single change after somethings changes/navigated/updated on the page but MutationObserver fires many event for the change. This leads to send many notification to the user for a single time update on the page.

On twitter, if i navigate to different sections search/profile/home etc. change events are fired many times.

var observer = new MutationObserver(function (mutations) {
    mutations.forEach(function (mutation) {
        if (mutation.addedNodes.length > 0) {
            mutation.addedNodes.forEach(function (addednode) {
                    console.log("Added:" + addednode);
            });
        }else if (mutation.removedNodes.length > 0) {
            mutation.removedNodes.forEach(function (removednode) {
                console.log("Removed:" + removednode)
            });
        }
    });
});
    
observer.observe(document.body, {
    characterDataOldValue: true, 
    subtree: true, 
    childList: true, 
    characterData: true
});

How can I effectively decide one change out of many mutation events?