如何仅捕获 Devtools 扩展上的 XHR 请求？

Question

在过去的几天里，我们一直在尝试开发一个只能拦截 XHR 请求的 Devtools 扩展。我们可以在普通扩展上使用 chrome.webRequest API，但这在 Devtools 扩展面板上是不可能的。我们尝试使用 devtools.network，但它会捕获所有请求。

有没有办法只捕获 XHR 请求？

提前致谢。

Answer 1

可以通过chrome.devtools.networkAPI获取HAR，然后判断请求是否为XHR，过滤输出。

我不完全确定 DevTools 如何确定这一点，但是在X-Requested-With发出 AJAX 请求时（通常）发送标头。这是一个非标准，但被广泛使用。您可以检查XMLHttpRequestHAR 中的值。

这可能无法捕获所有请求，并且 DevTools 可能会使用一些其他数据，但这里有一个我创建的小片段，它将根据此标头过滤 HAR。

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);
});

笔记。您可以在每个请求完成时使用chrome.devtools.network.onRequestFinished事件以相同的方式访问 HAR 数据。