ajax - 使用用户脚本捕获页面 xmlhttp 请求

Question

我有一个用户脚本(用于 chrome 和 FF)，它为页面添加了重要的功能，但最近由于开发人员在页面中添加了一些 AJAX 而被破坏。我想修改脚本以监听页面 xmlhttp 请求，以便我可以根据 JSON 格式的 responseText 动态更新我添加的内容该页面正在接收。

搜索发现了许多应该工作的功能，并且在控制台中运行时可以工作。但是，它们从用户脚本的上下文中什么也不做。

(function(open) {

    XMLHttpRequest.prototype.open = function(method, url, async, user, pass) {

        this.addEventListener("readystatechange", function() {
            console.log(this.readyState);
        }, false);

        open.call(this, method, url, async, user, pass);
    };

})(XMLHttpRequest.prototype.open);

发件人: How can I intercept XMLHttpRequests from a Greasemonkey script?

这在控制台中完美运行，我可以更改 this.readyState至 this.responseText并且效果很好(尽管在脚本中我需要它来将 JSON 数据转换为对象，然后让我在用户脚本中对其进行操作。而不仅仅是写入控制台)。但是，如果我将其粘贴到用户脚本中，则不会发生任何事情。用户脚本中的事件处理程序似乎没有检测到页面上的 xmlhttp 请求。

进行请求的页面正在使用 jquery $.get() 函数，如果这可能与它有关的话。虽然我不这么认为。

我无法想象没有办法，似乎任何在 AJAX 页面上运行的用户脚本都需要这种能力。

Answer 1

由于页面使用 $.get() ，更容易拦截请求。使用 ajaxSuccess() .

这将在 Greasemonkey(Firefox) 脚本中工作:
片段 1:

unsafeWindow.$('body').ajaxSuccess (
    function (event, requestData)
    {
        console.log (requestData.responseText);
    }
);

假设页面以正常方式使用 jQuery(定义 $ 等)。

这应该适用于 Chrome 用户脚本(以及 Greasemonkey):
片段 2:

function interceptAjax () {
    $('body').ajaxSuccess (
        function (event, requestData)
        {
            console.log (requestData.responseText);
        }
    );
}

function addJS_Node (text, s_URL, funcToRun) {
    var D                                   = document;
    var scriptNode                          = D.createElement ('script');
    scriptNode.type                         = "text/javascript";
    if (text)       scriptNode.textContent  = text;
    if (s_URL)      scriptNode.src          = s_URL;
    if (funcToRun)  scriptNode.textContent  = '(' + funcToRun.toString() + ')()';

    var targ    = D.getElementsByTagName('head')[0] || D.body || D.documentElement;
    targ.appendChild (scriptNode);
}

addJS_Node (null, null, interceptAjax);

关于:

"But how then do I get that data to the script? ... (So I can) use the data later in the script."

这适用于 Greasemonkey(Firefox)；它也可能适用于 Chrome 的 Tampermonkey :
片段 3:

function myAjaxHandler (requestData) {
    console.log ('myAjaxHandler: ', requestData.responseText);
}

unsafeWindow.$('body').ajaxSuccess (
    function (event, requestData) {
        myAjaxHandler (requestData);
    }
);

但是， 如果不是 那么您就无法(轻松地)在 Chrome 用户脚本和目标页面之间共享 JS 信息——这是设计使然。

通常，您所做的是注入(inject)整个用户脚本，以便所有内容都在页面范围内运行。像这样:
片段 4:

function scriptWrapper () {

    //--- Intercept Ajax
    $('body').ajaxSuccess (
        function (event, requestData) {
            doStuffWithAjax (requestData);
        }
    );

    function doStuffWithAjax (requestData) {
        console.log ('doStuffWithAjax: ', requestData.responseText);
    }

    //--- DO YOUR OTHER STUFF HERE.
    console.log ('Doing stuff outside Ajax.');
}

function addJS_Node (text, s_URL, funcToRun) {
    var D                                   = document;
    var scriptNode                          = D.createElement ('script');
    scriptNode.type                         = "text/javascript";
    if (text)       scriptNode.textContent  = text;
    if (s_URL)      scriptNode.src          = s_URL;
    if (funcToRun)  scriptNode.textContent  = '(' + funcToRun.toString() + ')()';

    var targ    = D.getElementsByTagName('head')[0] || D.body || D.documentElement;
    targ.appendChild (scriptNode);
}

addJS_Node (null, null, scriptWrapper);