chrome扩展程序记录--覆盖页面xhr请求，实现拦截异步请求抓取返回数据

ゝ一世哀愁。 2023-06-17 05:57 16阅读 0赞

在chrome插件开发过程中，在获取数据时，需要获取接口返回的数据，但是因为chrome虽然提供了接口的拦截，但是不能获取返回的数据，从网上找到了一种方法

原理：覆盖原先网页的xhrequest对象，拦截所有的请求，进行过滤，操作返回的数据

步骤： 写一段js代码，通过content-script，注入到页面中，在mainfeast.json里，配置runAt：document-start(在初始化dom的时候进行注入)，然后拦截到返回的数据后，通过injectedScript 和 contentScript进行通信，在content-script进行处理。

关键代码：

//c插入到页面的脚本
            let insertContent =
                `
                <script>
                (function () {
                    console.log("执行了ijected.js");
                    var XHR = XMLHttpRequest.prototype;
                // Remember references to original methods
                    var open = XHR.open;
                    var send = XHR.send;
                
                // Overwrite native methods
                // Collect data:
                    XHR.open = function(method, url) {
                        this._method = method;
                        this._url = url;
                        return open.apply(this, arguments);
                    };
                
                // Implement "ajaxSuccess" functionality
                    XHR.send = function(postData) {
                        this.addEventListener('load', function() {
                            //这里是监听获取以后的操作
                            console.log("xhrRrl:  "+this._url);           
                            if (this._url.toString().indexOf("https://")!==(-1)){
                                console.log(this._url)
                                window.postMessage({"responseText":this.responseText,"url":this._url},"*");
                            }
                
                            // /* Request y  */ postData
                        });
                        return send.apply(this, arguments);
                    };
                })();
                </script>
                `;
            $('html').prepend(insertContent);
            window.addEventListener("message",e => {
                //输出返回的值 也可以是其他的处理操作
                console.log(e.data.text);
                }
            });

里面script标签里面是注入的脚本

addListerner是获取以后处理的函数，用来监听

window.postMessage(); injected script 发送消息给content script

window.addEventListerner(); content script 接受injectedScript的消息