我怎样才能捕获Devtools扩展上的XHR请求？

Question

For the past days, we've been trying to develop a Devtools extension that could intercept only XHR requests. We can use the chrome.webRequest API on a normal extension, but that is not possible on a Devtools Extension Panel. We tried to used the devtools.network, but it catches all requests.

Is there a way to catch only the XHR requests?

Thanks in advance.

Answer 1

You can use the chrome.devtools.network API to get the HAR, and then you can determine whether a request is XHR or not, filtering the output.

I'm not totally sure how DevTools determines this, but the X-Requested-With header is (typically) sent when AJAX requests are made. It is a non-standard, but is used widely. You can check for the XMLHttpRequest value in the HAR.

It's possible this doesn't catch all the requests, and there might be some other data DevTools uses, but here's a little snippet I created that will filter the HAR based on this header.

chrome.devtools.network.getHAR(function(result) {
    var entries = result.entries;
    var xhrEntries = entries.filter(function(entry) {
        var headers = entry.request.headers;

        var xhrHeader = headers.filter(function(header) {
            return header.name.toLowerCase() === 'x-requested-with' 
                && header.value === 'XMLHttpRequest';
        });

        return xhrHeader.length > 0;

    });

    console.log(xhrEntries);
});

Note. You can access the HAR data in the same way, per request, as it finishes, using the chrome.devtools.network.onRequestFinished event.