Chrome Extension which is supposed to run on all Facebook pages only runs when I hit refresh

Question

This is my first hack at writing a Chrome extension. I want it to execute some pretty simple JavaScript every time a Facebook page loads. It\'s doing everything I want

Answer 1

I think you might have written your code inside $(function () {}) which obviously require a page load. But you want to run your code if the page DOM changes, then this may help:

document.addEventListener('DOMNodeInserted', function (event) {

});

More info: http://reminiscential.wordpress.com/2011/10/04/building_google_reader_plugin/

Answer 2

As mtk said, it's because Facebook uses AJAX calls when you click on the home button or whatever. To run your code every time an AJAX call is made, you can hijack XMLHttpRequest. You could add something like this to your content script, so that every time an AJAX request is opened, your code is called. You could add an event listener to wait for the AJAX request to complete before running your code too.

(function(open) {
  XMLHttpRequest.prototype.open = function() {
    // add the function you want to run here
    open.apply(null, arguments);
  };
})(XMLHttpRequest.prototype.open);

Answer 3

In an obvious way it is not possible. The facebook page is making numerous ajax calls, hence the page does not reload completely. What you need here is to identify whether a ajax call response has been received by the browser or not? and then triggering the event required. I can't comment on that part as I'm still a newbie in that respect.