使用userscript捕获页面xmlhttp请求

Question

我有一个用户脚本(用于chrome和FF),它为页面添加了重要功能,但最近因为开发人员向页面添加了一些AJAX而被破坏.我想修改脚本来监听页面xmlhttp请求,这样我就可以根据responseText页面接收的JSON格式动态更新我添加的内容.

搜索已经发现了许多应该工作的功能,并且在控制台中运行时可以正常工作.但是,它们不会从用户脚本的上下文中执行任何操作.

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

来自:如何从Greasemonkey脚本拦截XMLHttpRequests？

这工作完全在控制台中,我可以改变this.readyState,以this.responseText和它的伟大工程(尽管在剧本我需要它来打开JSON数据转换成一个对象,然后让我userscript内操纵它.不只是写到控制台) .但是,如果我将其粘贴到用户脚本中没有任何反应.页面上的xmlhttp请求似乎没有被usercript中的事件处理程序检测到.

执行请求的页面使用jquery $ .get()函数,如果它可能与它有任何关系.虽然我不这么认为.

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

Answer 1

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

这将在Greasemonkey(Firefox)脚本中使用:
Snippet 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);

回覆:

"但是,如何将这些数据提供给脚本？...(我可以)稍后在脚本中使用这些数据."

这适用于Greasemonkey(Firefox); 它也可能适用于Chrome的Tampermonkey:
Snippet 3:

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

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

但是,如果没有,那么您无法在Chrome用户脚本和目标页面之间轻松共享JS信息 - 按设计.

通常,您所做的就是注入整个用户脚本,以便所有内容都在页面范围内运行.像这样:
代码段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);