const observer = new MutationObserver(list => {

    console.log('mutation list', list);

});

observer.observe(document.body, {

    attributes: true,

    childList: true,

    subtree: true

});

// perform any DOM change action in your page. e.g. show/hide/remove

  var composeObserver = new MutationObserver(function(mutations){ 

    mutations.forEach(function(mutation){

      console.log("MUTATE:", mutation)

    });

});

​

​

  function addObserverIfDesiredNodeAvailable() {

    console.log('calling')

    var composeBox = document.querySelector(".title");

    console.log("compose box: ", composeBox);

    if(!composeBox) {

        //The node we need does not exist yet.

        //Wait 500ms and try again

        window.setTimeout(addObserverIfDesiredNodeAvailable,500);

        return;

    }

    var config = {childList: true};

    composeObserver.observe(composeBox,config);

}

addObserverIfDesiredNodeAvailable();

let mList = document.getElementById('myList'),

            options = {

                childList: true,

                attributes: true,

                subtree: true

            },

            observer = new MutationObserver(mCallback);

​

        function mCallback(mutations) {

            for (let mutation of mutations) {

                // If you remove a child from the container you are watching

                if (mutation.type === 'childList') {

                    console.log('Mutation Detected: A child node has been added or removed.');

                }

                // If you use setAttribute to add a class or ID to an element

                if (mutation.type === 'attributes') {

                    console.log('Mutation Detected: An attribute has been added or removed.');

                }

​

                if (mutation.type === 'subtree') {

                    console.log('Mutation Detected: A subtree has been added or removed.');

                }

            }

        }

​

observer.observe(mList, options);