Question

I’m working on a Google Chrome extension to offer some additional functionality to a website I frequent, which has me trying to make a script run again if ever an AJAX request is successful. This is necessary due to the nature of the site.

Moving on: what I want to do is, simply put, to trigger a function whenever an AJAX request is successful. I therefore fashioned the following and ran it in the console while on the relevant website:

$(document).ajaxSuccess(function() {
   console.log('AJAX success');
});

I then proceeded to use the website and each time new content was loaded by means of AJAX I did indeed get confirmation of it by .ajaxSuccess, all good so far.

I then went ahead and started putting all my various bits and pieces together to make it into a proper Chrome extension. Everything still works save one thing: when the .ajaxSuccess bit is in a content script (which I’ve made sure is properly executed and so forth) AJAX requests on the website no longer triggers it.

I’ve tried to make sense out of it but I haven’t much luck. I feel it might be possible the extension requires some special permission to access AJAX related things, though I wouldn’t know what that might be. As of currently the permissions of the extension are the following:

"permissions": [
    "storage", "tabs", "http://website.com/*"
]

Answer 1

I ended up fashioning a somewhat unpleasant workaround akin to this:

var DOMTimeout = null;
    $('.class').bind('DOMNodeInserted', function() {
        if(DOMTimeout)
            clearTimeout(DOMTimeout);

    DOMTimeout = setTimeout(function() { console.log('AJAX probably added something'); }, 150);
});