使用 JavaScript 抓取/窃听 AJAX 数据?

IT技术 javascript ajax google-chrome-extension hook scrape
2021-02-12 08:54:06

是否可以使用 JavaScript 抓取正在使用 AJAX 实时更新的网页的所有更改?我希望每秒使用 AJAX 抓取更新数据的站点,我想获取所有更改。这是一个拍卖网站,只要用户出价,就会有几个对象发生变化。出价时发生以下变化:

当前出价 当前最高出价者 拍卖计时器已加回时间

我希望使用基于 JavaScript 的 Chrome 扩展程序获取这些数据。是否有可以完成此操作的 JavaScript 的 AJAX 侦听器?工具包?我需要一些指导。JavaScript 能做到这一点吗??

1个回答

我将展示两种解决问题的方法。无论您选择哪种方法,请不要忘记阅读我答案的底部!

首先,我提出一个简单的方法,它只在页面使用 jQuery 时才有效第二种方法看起来稍微复杂一些,但也适用于没有 jQuery 的页面。

以下示例展示了如何基于方法(例如 POST/GET)、URL 和读取 (POST) 数据和响应正文来实现过滤器。

在 jQuery 中使用全局 ajax 事件

有关 jQuery 方法的更多信息可以在.ajaxSuccess. 用法:

jQuery.ajaxSuccess(function(event, xhr, ajaxOptions) {
    /* Method        */ ajaxOptions.type
    /* URL           */ ajaxOptions.url
    /* Response body */ xhr.responseText
    /* Request body  */ ajaxOptions.data
});

纯 JavaScript 方式

当网站不使用 jQuery 进行 AJAX 请求时,您必须修改内置XMLHttpRequest方法。这需要更多的代码...:

(function() {
    var XHR = XMLHttpRequest.prototype;
    // Remember references to original methods
    var open = XHR.open;
    var send = XHR.send;

    // Overwrite native methods
    // Collect data: 
    XHR.open = function(method, url) {
        this._method = method;
        this._url = url;
        return open.apply(this, arguments);
    };

    // Implement "ajaxSuccess" functionality
    XHR.send = function(postData) {
        this.addEventListener('load', function() {
            /* Method        */ this._method
            /* URL           */ this._url
            /* Response body */ this.responseText
            /* Request body  */ postData
        });
        return send.apply(this, arguments);
    };
})();

让它在 Chrome 扩展程序中工作

前面显示的代码必须在页面的上下文中运行(在您的情况下是拍卖页面)。因此,必须使用内容脚本注入 (!)脚本。使用这个并不难,我参考这个答案以获得详细的解释和使用示例:构建 Chrome 扩展 - 使用内容脚本在页面中注入代码

一般方法

您可以使用chrome.webRequestAPI读取请求正文、请求标头和响应标头标题也可以修改。然而,它(还)无法读取,更不用说修改请求的响应主体了。如果您需要此功能,请为 https://code.google.com/p/chromium/issues/detail?id=104058 加星标

我一直得到ajaxSuccess is not a function 然后我阅读了文档“从 jQuery 1.9 开始,jQuery 全局 Ajax 事件的所有处理程序,包括那些使用 .ajaxSuccess() 方法添加的处理程序,都必须附加到文档中。” 所以对于 1.9 > 你必须做$(document).ajaxSuccess(function(event, xhr, ajaxOptions) { .....
2021-03-18 08:54:06
如果您想与 Chrome 扩展程序的内容脚本和/或后台页面共享捕获的 XHR 数据,请参阅从站点调用 Chrome 扩展程序的后台功能
2021-03-23 08:54:06
@K2xL 你把代码片段放在哪里了?它必须在由内容脚本注入的脚本中使用。
2021-03-30 08:54:06
这些代码片段似乎都不适合我(在 chrome 扩展中)。有没有人让它工作?
2021-04-02 08:54:06
Rob:我把它放在内容脚本中。内容脚本似乎在它们自己的沙箱上运行,因此您无法通过它们覆盖 XHR 对象:-(
2021-04-14 08:54:06