Mutation Observer not firing

Question

Hi I'm building a chrome extension. I have a javascript file in which I want to detect changes to a div on facebook.com so I attach it to a mutation observer. The thing is now if I navigate to another page on Facebook say by clicking the home button the mutation observer stops working even though a div by the same id is present in this new page. It only starts working once I refresh the page. Any ideas on how I can fix this?

Also all my code is wrapped in a document.ready jquery function so I would assume that would automatically fire when I navigate to a new facebook page by clicking the home button but that doesn't happen. It only fires when I either explicitly type the url or refresh the page after navigating.

The code is like this:

    $ (document).ready( function() {

  var observeDOM = (function(){
      var MutationObserver = window.MutationObserver || window.WebKitMutationObserver,
          eventListenerSupported = window.addEventListener;

      return function(obj, callback){
          if( MutationObserver ){
              // define a new observer
              var obs = new MutationObserver(function(mutations, observer){
                  if( mutations[0].addedNodes.length || mutations[0].removedNodes.length )
                      callback();
              });
              // have the observer observe foo for changes in children
              obs.observe( obj, { childList:true, subtree:true });
          }
          else if( eventListenerSupported ){
              obj.addEventListener('DOMNodeInserted', callback, false);
              obj.addEventListener('DOMNodeRemoved', callback, false);
          }
      }
  })();


  if (document.getElementById('contentArea') !== null) {
    console.log("working");
    observeDOM( document.getElementById('contentArea') ,function(){

        console.log("DOM CHANGED");

    });
  }
});

UPDATE: Seems like the problem is with how facebook loads pages (see: How facebook load pages?)

Any way to detect these individual changes happening via AJAX?

*"Any ideas on how I can fix this?"* Without the code? Probably not. Please take the [tour], have a look around, and read through the [help], in particular [*How do I ask a good question?*](/help/how-to-ask) — T.J. Crowder, Aug 07 '15 at 09:04

score 2 · Answer 1 · edited May 23 '17 at 12:21

The thing is now if I navigate to another page on Facebook say by clicking the home button the mutation observer stops working even though a div by the same id is present in this new page.

Right, because even if it has the same id, it's a different element.

If you want to watch that new element for mutation events, you have to set up a new mutation observer that observes the new element, probably by responding to Chrome's "page loaded" event. If your script endures between page loads, you'll also want to be sure to release the previous observer.

so I would assume that would automatically fire when I navigate to a new facebook page by clicking the home button but that doesn't happen

I wouldn't assume that, I would assume it would run on the page it's injected on, and not any other page. This question and its answers address ensuring an extension is run when a page is done loading.

This is a content script and since my code is wrapped around a document.ready shouldn't it run everytime a page is loaded? I think the problem is with how facebook is loading the pages. For example in my console if I keep the preserve log checked, on other websites such as github when I navigate from github.com to a repo by clicking on a link my console logs "Navigated to ...". However if I am on Facebook home page and say I navigate to a facebook group by clicking on their link it does not show "Navigated to ..." leading me to to assume the browser thinks these are the same pages. — user2018473, Aug 07 '15 at 09:20

Mutation Observer not firing

1 Answers1