問題描述

我有一個用戶腳本(用于 chrome 和 FF)，它為頁面添加了重要功能，但最近由于開發人員在頁面中添加了一些 AJAX 而被破壞.我想修改腳本以偵聽頁面 xmlhttp 請求，以便我可以根據頁面正在接收的 JSON 格式的 responseText 動態更新我添加的內容.

I have a user script (for chrome and FF) that adds significant functionality to a page, but has recently been broken because the developers added some AJAX to the page. I would like to modify the script to listen to the pages xmlhttp requests, so that I can update my added content dynamically, based on the JSON formatted responseText that the page is receiving.

搜索發現了許多應該工作的功能，并且在控制臺中運行時可以工作.但是，它們不會從用戶腳本的上下文中執行任何操作.

A search has turned up many functions that SHOULD work, and do work when run in the console. However they do nothing from the context of a user script.

(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 數據轉換成一個對象，然后讓我在用戶腳本中對其進行操作.不僅僅是寫入控制臺).但是，如果我將其粘貼到用戶腳本中，則不會發生任何事情.用戶腳本中的事件處理程序似乎沒有檢測到頁面上的 xmlhttp 請求.

This works perfectly in the console, I can change this.readyState to this.responseText and it works great (though in the script I will need it to turn the JSON data into an object, and then let me manipulate it within the userscript. Not just write to the console). However if I paste it into a userscript nothing happens. The xmlhttp requests on the page do not seem to be detected by the event handler in the userscript.

執行請求的頁面正在使用 jquery $.get() 函數，如果這可能與它有關的話.雖然我不這么認為.

The page doing the requesting is using the jquery $.get() function, if that could have anything to do with it. Though I don't think it does.

我無法想象沒有辦法，似乎任何在 AJAX 頁面上運行的用戶腳本都需要這種能力.

I can't imagine that there isn't a way, seems like any userscript running on an AJAX page would want this ability.

推薦答案

由于頁面使用了$.get()，因此攔截請求更加容易.使用 ajaxSuccess().

Since the page uses $.get(), it's even easier to intercept requests. Use ajaxSuccess().

這將在 Greasemonkey(Firefox) 腳本中工作:
片段 1:

This will work in a Greasemonkey(Firefox) script:
Snippet 1:

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

假設頁面以正常方式使用jQuery($定義等).

Assuming the page uses jQuery in the normal way ($ is defined, etc.).

這應該適用于 Chrome 用戶腳本(以及 Greasemonkey):
片段 2:

This should work in a Chrome userscript (as well as Greasemonkey):
Snippet 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);

<小時><小時><小時>

回復:

Re:

但是我如何將這些數據獲取到腳本中?...(這樣我可以)稍后在腳本中使用這些數據."

"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:

This works in Greasemonkey(Firefox); it might also work in Chrome's Tampermonkey:
Snippet 3:

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

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

但是，如果不這樣做，那么您將無法(輕松地)在 Chrome 用戶腳本和目標頁面之間共享 JS 信息——這是設計使然.

But, if it doesn't then you cannot share JS information (easily) between a Chrome userscript and the target page -- by design.

通常您所做的是注入整個用戶腳本，以便所有內容都在頁面范圍內運行.像這樣:
片段 4:

Typically what you do is inject your entire userscript, so that everything runs in the page scope. Like so:
Snippet 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);

這篇關于使用用戶腳本捕獲頁面 xmlhttp 請求的文章就介紹到這了，希望我們推薦的答案對大家有所幫助，也希望大家多多支持html5模板網！