雑記帳 - JasminInfo

[Tampermonkey] fetch responseの横取り取得

Webページがfetchで動的に取得したJSONデータを観測する手段は無いかなと思って見つけた方法。

ソースコード

// ==UserScript==
// @name        Test intercept fetch
// @description Test intercept fetch
// @namespace   Test
// @version     1.0
// @match       https://example.com/*
// @run-at      document-start
// @grant       unsafeWindow
// ==/UserScript==

const proc_fetch_resp = (data, url) => {
    console.log("proc_fetch_resp:" + url, data);
}

//=====================================================
// Intercept fetch
//=====================================================
const origFetch = unsafeWindow.fetch;
//元のfetchを差し替え
unsafeWindow.fetch = async (...args) => {
    console.log("fetch called with args:", args);
    const response = await origFetch(...args);

    //レスポンスをクローンして使う
    response
        .clone()
        .json()
        .then(body => {
            proc_fetch_resp(body, response.url);
        })
        .catch(err => console.error(err))
        ;

    //元のレスポンスを返す
    return response;
}

• @match は対象サイトのURLを指定
• @run-at は割り込みたいfetchよりに先にfetch差し替えができるように指定
• unsafeWindow を使わないとfetch差し替えができない
• サンプルなのでレスポンスをJSONとして読み取ってconsole.logに出すだけ。

参考URL

• https://stackoverflow.com/questions/45425169/intercept-fetch-api-requests-and-responses-in-javascript/64961272#64961272