inspect/intercept/modify any network requests
目前為
此腳本不應該直接安裝，它是一個供其他腳本使用的函式庫。欲使用本函式庫，請在腳本 metadata 寫上： // @require https://update.gf.qytechs.cn/scripts/472943/1235947/Itsnotlupus%27%20MiddleMan.js
This places a layer of middleware between a page's codebase and the fetch() and XMLHttpRequest APIs they pretty much all rely on.
It relies heavily on the Request and Response Web APIs, and you'll want to familiarize yourself with those first.
Beyond that, using it is simple. You get one object, middleMan, and you can .addHook() and .removeHook() on it.
middleMan.addHook("https://example.com/your/route/*", {
requestHandler(request) {
console.log("snooped on request:", request);
}
});
Your request handler can return nothing to keep the current Request unchanged.
It can return a different Request object to change what will happen over the network.
It can also return a Response object, in which case the network request will be skipped altogether and the Response will be used instead.
Finally, it can return a Promise to either a Request or a Response.
Hooks are called in the order they were registered. Each hook is given the Request object obtained from the previous hook.
When a request hook returns a Response, no further request hooks are called.
middleMan.addHook(/https:\/\/example\.org\/foo/bar\/*.json/, {
async responseHandler(response) {
console.log("snooped on response:", response);
const data = await response.json();
data.topLevel = "IMPORTANT";
return Response.json(data);
}
});
In the example above, we used a regular expression for the route rather than a string with wildcards. Use whatever makes sense.
Response handlers work similarly to request handlers. They can return nothing to keep the current response, or they can return a new response. All matching response hooks are called in order.
That's the gist of it. Here's a little bit of middleware that logs all graphql requests and responses, and replaces "dog" with "cat" on Twitter:
middleMan.addHook("https://twitter.com/i/api/graphql/*", {
requestHandler(request) {
console.log("REQUEST HANDLER saw", request);
},
async responseHandler(response) {
console.log("RESPONSE HANDLER saw", response);
const data = await response.json();
console.log("data=", data);
function traverse(obj, check, mutate) {
if (!obj || typeof obj != 'object') return;
Object.keys(obj).forEach(k => {
if (check(obj, k)) obj[k]=mutate(obj[k]);
else traverse(obj[k], check, mutate);
});
}
traverse(data,
(obj,key) => ['full_text','text','description'].includes(key) && typeof obj[key] == 'string',
s=> s.replace(/\bdog\b/ig, 'cat'));
return Response.json(data);
}
});
It produces results like this:
Finally, middleMan.removeHook() takes the same parameters as .addHook().
It's a similar pattern as addEventListener() vs removeEventListener().
That's it. Have fun!
(Disclaimer: This was put together by eyeballing XHR's behaviors, occasionally squinting at a WhatWG spec, and coming up with great rasons why failing so many WPT tests is actually fine. Anyway, it's a wee bit buggy. Proceed with caution.)
QingJ © 2025
镜像随时可能失效，请加Q群300939539或关注我们的公众号极客氢云获取最新地址