How do I intercept pjax page changes from a chrome userscript? - events

Question

Can I detect history.pushState url changes from a chrome user script (not extension), without polling (or breaking out of the script's isolated world to intercept the call in the web page's javascript context)?
My problem, in more detail:
As Github uses history.pushState [WHAT-WG specs] by way of pjax [minimized example] for in-site page-to-page site navigation, instead of reloading the whole page as you browse the site, user scripts targeting a specific url on the site will only fire when you enter the site at that url or manually forcefully reload the page.
I am writing a little user script library on.js for DRY:ing up user scripts, handling that kind of thing for them by intercepting pushState calls to see when we're on a new page the host script wants to run on and only invoking it where relevant.
This would be relatively easy if history.pushState fired events when called, but as best I can tell, no popstate event gets fired except when the first page loads or the user triggers back / forward movement through history, which is fairly useless for my purposes.
I explored limiting it to a pjax/github-only solution too – when a new page loads, github fires a $(document).trigger('pageUpdate') event, but as jQuery implements these internally rather than via DOM events, I can't hear those from the isolated world my user script runs in, unless I inject a little listener in the page itself to have its jQuery instance report this event back to me, and then I might as well hijack the page's history.pushState itself.
Does anyone see other tidy ways of achieving this?

Answer 1

For now, I am taking the not excellent but working latter approach, of injecting a script that intercepts history.pushState calls and fires an event of the same name on the document, once the call has finished (and, optionally, after the pjax pageUpdate event has fired too):
function inject(fn, args) {
var script = document.createElement('script')
, parent = document.documentElement;
args = JSON.stringify(args || []).slice(1, -1);
script.textContent = '('+ fn +')('+ args +');';
parent.appendChild(script);
parent.removeChild(script);
}
inject(function(pjax_event) {
function reportBack() {
var e = document.createEvent('Events');
e.initEvent('history.pushState', !'bubbles', !'cancelable');
document.dispatchEvent(e);
}
var pushState = history.pushState;
history.pushState = function on_pushState() {
if (pjax_event && window.$ && $.pjax)
$(document).one(pjax_event, reportBack);
else
setTimeout(reportBack, 0);
return pushState.apply(this, arguments);
};
}, ['pageUpdated']);
document.addEventListener('history.pushState', function() {
console.log('history.pushState', location.pathname);
// user script code here
}, false);

Answer 2

Before GreaseMonkey changed it's sandbox policy (read: Firefox did, and GM didn't make it backwards compatible) one could use unsafeWindow to fetch an element/window event. Now that that's changed, unsafeWindow isn't working anymore when used with GreaseMonkey API's.
Your proposed answer of injecting a script into the page doesn't work on Github, because of it's very strict content security policy (CSP) not allowing inline scripts;
Content-Security-Policy:default-src *; script-src assets-cdn.github.com collector-cdn.github.com; [...]
My solution is two-fold for two different situations: one with #grant none and one with an GreaseMonkey API #grant.
test-grant-none.user.js
// ==UserScript==
// #name test #grant none
// #namespace https://github.com/jerone/UserScripts
// #include https://github.com/*
// #version 1
// #grant none
// ==/UserScript==
unsafeWindow.$(document).on("pjax:end", function() {
console.log('test #grant none 1');
});
unsafeWindow.$(window).on('popstate', function() {
console.log('test #grant none 2');
});
test-grant-GM.user.js
// ==UserScript==
// #name test #grant GM_*
// #namespace https://github.com/jerone/UserScripts
// #include https://github.com/*
// #version 1
// #grant GM_setValue
// ==/UserScript==
unsafeWindow.$(document).on("pjax:end", exportFunction(function() {
console.log('test #grant GM_* 1');
}, unsafeWindow));
unsafeWindow.$(window).on('popstate', exportFunction(function() {
console.log('test #grant GM_* 2');
}, unsafeWindow));
You can find above scripts here: https://gist.github.com/jerone/e38e8637887559870d84
You can read here more: https://greasyfork.org/en/forum/discussion/3648/hook-into-jquery-existing-events
Thank to Athorcis for pointing me in the right direction.