Tampermonkey 攔截網頁 API

網頁中的 API 請求是使用 XMLHttpRequest 發送的，所以要達成非常的簡單，只要偷偷改寫 XMLHttpRequest ，加入監聽事件即可：

    
(function () {
    'use strict';

    const xmlHttpRequest = window.XMLHttpRequest;

    window.XMLHttpRequest = function () {
        const httpRequest = new xmlHttpRequest();

        httpRequest.addEventListener('readystatechange', function () {
            xmlHttpRequestHandler(this);
        }, false);

        return httpRequest;
    };

    function xmlHttpRequestHandler(xmlHttpRequest) {
        if (xmlHttpRequest.readyState === 4) {
            console.log(`攔截到 API 請求: ${xmlHttpRequest.url}, 回應: ${xmlHttpRequest.responseText}`);
        }
    }

})();
    

而 readyState 為 4 時代表的是成功取得回應，所以只要透過這個就可以得到我們想要的資訊了

參考資料：
mdn - XMLHttpRequest
mdn - XMLHttpRequest: readyState property