变异观察者未触发

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?

Answer 1

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.