Tampermonkey 钩取 XMLHttpRequest 返回数据教程

如何使用 Tampermonkey 钩取 XMLHttpRequest 返回的数据

使用 Tampermonkey 钩取 XMLHttpRequest 返回的数据可以让你在网页加载完成后，修改返回的数据内容，从而实现自定义功能。以下是详细步骤：

安装 Tampermonkey： 首先，你需要在你的浏览器中安装 Tampermonkey 插件。你可以在 Tampermonkey 官方网站上找到适合你的浏览器的插件版本。
创建新的用户脚本： 在 Tampermonkey 的控制面板中，创建一个新的用户脚本。
监听 XMLHttpRequest 的 onreadystatechange 事件： 在用户脚本中，你可以使用 JavaScript 来监听所有 XMLHttpRequest 对象的 onreadystatechange 事件。当请求的状态发生变化时，该事件将被触发。

// 监听所有 XMLHttpRequest 对象的 onreadystatechange 事件
(function() {
    var open = XMLHttpRequest.prototype.open;
    XMLHttpRequest.prototype.open = function() {
        this.addEventListener('readystatechange', function() {
            // 请求状态为 4 表示请求已完成，且响应已就绪
            if (this.readyState === 4) {
                // 在这里可以操作返回的数据
                console.log(this.responseText);
            }
        }, false);
        open.apply(this, arguments);
    };
})();

修改返回的数据： 在 onreadystatechange 事件的回调函数中，你可以使用 JavaScript 来修改返回的数据。你可以使用 JavaScript 的正则表达式、字符串处理函数等来修改数据。

// 修改返回的数据
(function() {
    var open = XMLHttpRequest.prototype.open;
    XMLHttpRequest.prototype.open = function() {
        this.addEventListener('readystatechange', function() {
            if (this.readyState === 4) {
                // 修改返回的数据
                this.responseText = this.responseText.replace('foo', 'bar');
            }
        }, false);
        open.apply(this, arguments);
    };
})();

保存并启用脚本： 保存你的用户脚本并启用它。之后，每当有 XMLHttpRequest 发出请求并返回数据时，你的脚本将会拦截并修改返回的数据。

请注意，这种方式需要注意不要滥用，以免对网站或其他用户造成不必要的影响。