detect XHR on a page using javascript

Question

I want to develop a Chrome extension, just imagine when Facebook loads you are allowed to add extra JS on it.

But my problem is I can't modify the DOM of the later content, which means the newly loaded content that appear when the user scrolled down.

So I want to detect XHR using JavaScript.

I tried

send = XMLHttpRequest.prototype.send;
XMLHttpRequest.prototype.send = function() {

    /* Wrap onreadystaechange callback */
    var callback = this.onreadystatechange;
    this.onreadystatechange = function() {             
         if (this.readyState == 4) {
             /* We are in response; do something, like logging or anything you want */
                        alert('test');
         }
         callback.apply(this, arguments);
    }

    _send.apply(this, arguments);
}

But this is not working.. any ideas?

`send = XMLHttpRequest.prototype.send;` and `_send.apply(this, arguments);` — Arun P Johny, Sep 08 '14 at 02:33
@ArunPJohny is the callback important? I just want to detect whether there is an ajax event happening.. — user3522749, Sep 08 '14 at 03:02
can you tell us what is that you want to do in the ajax handler... — Arun P Johny, Sep 08 '14 at 03:04
@ArunPJohny use some $('.class').text('to change something).. an alert should work within that right? — user3522749, Sep 08 '14 at 03:06
if you are using jQuery look at the jQuery global events... like [ajaxSuccess](http://api.jquery.com/ajaxsuccess/) — Arun P Johny, Sep 08 '14 at 03:08
I can help you, but I would appreciate if you cleaned up your question first. Make a best attempt at proper English, and I will answer. — Xan, Sep 08 '14 at 07:11
@Xan please.. I'd been searching for the answer for few days! — user3522749, Sep 08 '14 at 08:03

score 1 · Accepted Answer · edited May 23 '17 at 10:33

Besides Arun's correct remark that you should use _send for both, your approach doesn't work because of how Content Scripts work.

The code running in the content script works in an isolated environment, to prevent it from conflicting with page's own code. So it's not like you described - you're not simply adding JS to the page, you have it run isolated. As a result, your XHR replacement only affects XHR calls from your extension's content scripts and not the page.

It's possible to inject the code into the page itself. This will affect XHR's from the page~~, but might not work on all pages, if the Content Security Policy of the page in question disallows inline code. It seems like Facebook's CSP would allow this.~~ Page's CSP should not be a problem according to the docs. So, this approach should work, see the question I linked.

That said, you're not specifically looking for AJAX calls, you're looking for new elements being inserted in the DOM. You can detect that without modifying the page's code, using DOM MutationObservers.

See this answer for more information.

@user3522749 It's a HTTP response header. Open up Dev Tools, navigate to Facebook, and examine the Network panel. It's too long to post here. — Xan, Sep 08 '14 at 11:01

AhmadAssaf · Answer 2 · 2014-09-08T10:02:19.690

1

to detect AJAX calls on a webpage you have to inject the code directly in that page and then call the .ajaxStart or .ajaxSuccess

Example:

// To Successfully Intercept AJAX calls, we had to embed the script directly in the Notifications page
var injectedCode = '(' + function() {
    $('body').ajaxSuccess(function(evt, request, settings) {
        if (evt.delegateTarget.baseURI == 'URL to check against if you want') {
            // do your stuff
        }
    });
} + ')();';
// Inserting the script into the page
var script = document.createElement('script');
script.textContent = injectedCode;
(document.head || document.documentElement).appendChild(script);
script.parentNode.removeChild(script);

edited Sep 08 '14 at 10:02

answered Sep 08 '14 at 09:39

AhmadAssaf

3,556
5
31
42

It would be better if you included a relevant example from your code in your answer(s). – Xan Sep 08 '14 at 09:52
Great, upvoted both. Be careful with promoting own code, this can provoke a trigger-happy reaction from SO community, but this now is definitely a useful answer. – Xan Sep 08 '14 at 10:05
thanks a lot @Xan .. will be aware of that in the future – AhmadAssaf Sep 08 '14 at 10:06
I tried this, ajaxSuccess didn't work because facebook didn't use jquery.. I don't know that in detail but as other said, facebook isn't using jquery so it doesn't work. Anyway, thx @AhmadAssaf for your input! – user3522749 Sep 08 '14 at 10:54
how about you try this https://gist.github.com/creotiv/469941. You still need to do the injection of the code – AhmadAssaf Sep 08 '14 at 11:27

detect XHR on a page using javascript

2 Answers2