How to execute a content script every time a page loads?

Question

I'm writing a Chrome extension that provides a content script to any page on GitHub (i.e. any URL matching https://github.com/*).

I'm simply trying to log something to the console each time a page on GitHub loads, like so:

window.onload = function() {
  console.log("LOAD");
};

This listener function is executed the very first time a GitHub page is loaded, but if the user navigates to other pages on GitHub from there (by clicking on links or through other means), it doesn't fire. Why? :(

Steps to reproduce:

1. Open any repository's page on GitHub (example). You should see the message logged to the console.
2. Click on any link on that page. When the new page is loaded, no message is logged. :(

How do I solve this?

Answer 1

It seems that GitHub uses AJAX (along with history.pushState) to load some parts of the site, so onload will fire only when the page truly loads, but not when content is loaded via AJAX.

Since GitHub uses pushState to change the URL when AJAX content is done loading, you can detect when that happens, and execute your code. There isn't actually a native event right now that fires when pushState is used, but there's this little hack:

(function(history){
    var pushState = history.pushState;
    history.pushState = function(state) {
        if (typeof history.onpushstate == "function") {
            history.onpushstate({state: state});
        }
        return pushState.apply(history, arguments);
    }
})(window.history);

So, run that, and then, instead of window.onload, you can do:

history.onpushstate = function () {
    console.log("LOAD");
};

Not ALL of GitHub page's load this way (AJAX + pushState), so you'd have to use both, window.onload and history.onpushstate.

Also, you should use window.addEventListener('load', fn); instead of window.onload, since you don't know if GitHub's code could be overwriting window.onload.