[油猴脚本开发指南]XHR劫持的第二种格式

清清清

李恒道 发表于 2023-2-15 15:39
而且这个是监听的，应该用修改的

目前场景是，修改指定接口返回数据，数据也在其他接口上，如何实现这个功能呢？

目前解决方案，在send函数中发送异步请求（async await 不确定是否成功，对函数未发现影响，也可能是返回速度快），在load函数中可以拿到结果。但是send函数中没有请求地址。所以重写了open函数。

不知道大佬有没有更好的处理方案。

以下是代码

1.   function asyncPost(url, payload) {
   
2.     return new Promise((resolve, reject) => {
   
3.       GM_xmlhttpRequest({
   
4.         method: "POST",
   
5.         url: url,
   
6.         headers: { "Content-Type": "application/json" },
   
7.         data: JSON.stringify(payload),
   
8.         synchronous: true,
   
9.         onload: function (response) {
   
10.           console.log("asyncPost: " + url);
    
11.           resolve(response.responseText);
    
12.         },
    
13.       });
    
14.     });
    
15.   }
    
16. 
    
17.   function addXMLRequestCallback(callback) {
    
18.     var oldOpen, oldSend, i;
    
19.     if (XMLHttpRequest.callbacks) {
    
20.       XMLHttpRequest.callbacks.push(callback);
    
21.     } else {
    
22.       XMLHttpRequest.callbacks = [callback];
    
23. 
    
24.       oldOpen = XMLHttpRequest.prototype.open;
    
25.       XMLHttpRequest.prototype.open = function () {
    
26.         this.url = arguments[1];
    
27.         return oldOpen.apply(this, arguments);
    
28.       };
    
29. 
    
30.       oldSend = XMLHttpRequest.prototype.send;
    
31.       XMLHttpRequest.prototype.send = async function () {
    
32.         for (i = 0; i < XMLHttpRequest.callbacks.length; i++) {
    
33.           XMLHttpRequest.callbacks[i](this);
    
34.         }
    
35.         this.payload = JSON.parse(arguments[0]);
    
36.         if (this.url === "http://127.0.0.1:8080") {
    
37.           this.newResponseText = await asyncPost(this.url, this.payload);
    
38.         }
    
39.         oldSend.apply(this, arguments);
    
40.       };
    
41.     }
    
42.   }
    
43. 
    
44.   addXMLRequestCallback(function (xhr) {
    
45.     xhr.addEventListener("load", function () {
    
46.       if (this.readyState == 4 && this.status == 200) {
    
47.         console.log(this.url)
    
48.         if (this.url === "http://127.0.0.1:8080") {
    
49.           const resObj = JSON.parse(this.responseText);
    
50.           const newResObj = JSON.parse(this.newResponseText);
    
51.           Object.defineProperty(this, "responseText", {
    
52.             writable: true,
    
53.           });
    
54.           resObj.data.push(...newResObj.data);
    
55.           this.responseText = JSON.stringify(resObj);
    
56.         }
    
57.       }
    
58.     });
    
59.   });
    

复制代码

还有一个小问题，就是每次发送请求都会有一个弹窗，提示是否发送异步请求，这个可以关闭吗。

李恒道

清清清 发表于 2023-2-15 16:19
目前场景是，修改指定接口返回数据，数据也在其他接口上，如何实现这个功能呢？

目前解决方案，在send函 ...

如果是需要其他接口数据的情况下
感觉应该考虑直接屏蔽掉原函数的数据了，直接自己发送一遍
然后主动调用回调啥的了
GM_xmlhttpRequest触发弹窗要写connect声明

清清清

李恒道 发表于 2023-2-15 16:24
如果是需要其他接口数据的情况下
感觉应该考虑直接屏蔽掉原函数的数据了，直接自己发送一遍
然后主动调用 ...

不用屏蔽原来函数，还需要之前的部分数据。
还有一个场景，需要原接口返回数据作为参数，发给新的接口，目前还无法实现这个功能。

跨域弹窗已解决。

李恒道

清清清 发表于 2023-2-15 17:02
不用屏蔽原来函数，还需要之前的部分数据。
还有一个场景，需要原接口返回数据作为参数，发给新的接口， ...

根需要之前数据不冲突的
直接废掉他的发送，自己在里面写新的发送逻辑，这样逻辑都在一个函数里更方便
不然太难控制回调了

清清清

李恒道 发表于 2023-2-15 17:37
根需要之前数据不冲突的
直接废掉他的发送，自己在里面写新的发送逻辑，这样逻辑都在一个函数里更方便
不 ...

拦截发送，写新的发送，自己请求和原来的请求 各自发送。两个异步就合成一个异步，统一返回数据是吗。我试试。

如果说我想在原来请求返回数据后，在发送我的请求。最后统一返回给页面进行渲染，这个应该怎么操作呀。

李恒道

清清清 发表于 2023-2-15 18:55
拦截发送，写新的发送，自己请求和原来的请求 各自发送。两个异步就合成一个异步，统一返回数据是吗。我 ...

非要这样的话可以试试同步xhr+劫持reponse
用promise是具备污染性的
但是这样搞会冻死住页面
是不推荐这么搞得...

cxxjackie

清清清 发表于 2023-2-15 18:55
拦截发送，写新的发送，自己请求和原来的请求 各自发送。两个异步就合成一个异步，统一返回数据是吗。我 ...

试试这个：https://bbs.tampermonkey.net.cn/thread-3284-1-1.html
原理是劫持load等事件延迟触发。