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

本文链接：https://blog.csdn.net/qq_37992974/article/details/103281810

在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的消息