Chrome 谷歌插件开发 监听网页请求和响应数据

manifest.json 中的权限

"permissions": [
    "proxy",
    "unlimitedStorage",
    "<all_urls>",
    "declarativeContent",
    "browsingData",
    "cookies",
    "tabs",
    "storage",
    "notifications",
    "webRequest",
    "webRequestBlocking",
    "http://*/*",
    "https://*/*",
    "debugger",
    "activeTabs"
  ],

一、使用 webRequest

使用权限 "webRequest","webRequestBlocking"
在背景页中拦截并发出请求获取数据，
webRequest只能拦截到请求，想要获取响应数据可以重发一次请求

const axios = require('axios');
//封装get请求
function axiosGet(url){
    return new Promise((res,rej)=>{
        axios.get(url).then(e=>{
            res(e)
        }).catch(e=>{
            rej(e)
        })
    })
}

/**
 * 拦截请求并修改指定请求头信息
 */
chrome.webRequest.onBeforeSendHeaders.addListener(async function (details) {
		// 可以自行添加头部
        details.requestHeaders.push({name: 'Referer', value: 'https://h5.m.taobao.com/'});
        if (details.tabId != -1) {
            if (/getdetail|getdesc/.test(details.url) && !/i=6666/.test(details.url)){
                let res = await axiosGet(`${details.url}&i=6666`)
                console.log('res',res)
            }
        }
        return { requestHeaders: details.requestHeaders };
    }, {
        urls: [
            "*://h5api.m.taobao.com/h5/mtop.taobao.detail.*",
        ]
    }, ['blocking', 'requestHeaders','extraHeaders']
);

二、使用 debugger

使用权限 "debugger","activeTabs"
背景页使用该方法

async function debuggerAttach() {
    let currentTab;
    let version = '1.3';
    let debuggee = ''

    chrome.tabs.query({url: '所要监听页面的url'}, (tabs) => {
        currentTab = tabs[0]
        chrome.debugger.attach({
            tabId: currentTab.id
        }, version, onAttach.bind(null, currentTab.id));
    });

    function onAttach(tabId) {
        if (chrome.runtime.lastError) {
            console.log('onAttach-Error', chrome.runtime.lastError);
            return
        }
        console.log("onAttach-Success");
        chrome.debugger.sendCommand({
            tabId: tabId
        }, "Network.enable");
        chrome.debugger.onEvent.addListener(allEventHandler);
    }

    function allEventHandler(debuggeeId, message, params) {
        debuggee = debuggeeId
        if (currentTab.id !== debuggeeId.tabId) {
            console.log('currentTab.id !== debuggeeId.tabId')
            return;
        }
        if (message === "Network.responseReceived") {
            let url = params?.response?.url
            chrome.debugger.sendCommand({
                tabId: debuggeeId.tabId
            }, "Network.getResponseBody", {
                "requestId": params.requestId
            }, async function (response) {
                    console.log('response======>', response)
                }
            });
        }
    }
    console.log('关闭调试')
    debuggee && chrome.debugger.detach(debuggee)
}
debuggerAttach()

三、使用 ajax_interceptor_manny

该方法只能拦截到 Fetch/XHR 类型 的数据

window.ajax_interceptor_manny = {
    settings: {
      switchOn: false,
      switchQuery:false
    },
    originalXHR: window.XMLHttpRequest,
    myXHR: function() {
      let pageScriptEventDispatched = false;
      const modifyResponse = () => {
        //this.responseText = overrideTxt;
        //this.response = overrideTxt;
        if (pageScriptEventDispatched) {
          return;
        }
        pageScriptEventDispatched = true;
        ajax_interceptor_manny.download(this.responseText, this.responseURL);
      }

      // new 一个原生的 XMLHttpRequest 不需要参数,将 xhr 的属性,都复制给this,暴露到外面
      const xhr = new ajax_interceptor_manny.originalXHR();

      for (let attr in xhr) {
        if (attr === 'onreadystatechange') {
          xhr.onreadystatechange = (...args) => {
            if (this.readyState == 4 && this.status == 200) {
              // 请求成功
              if (ajax_interceptor_manny.settings.switchOn) {
                // 开启拦截
                modifyResponse();
              }
            }
            this.onreadystatechange && this.onreadystatechange.apply(this, args);
          }
          continue;
        } else if (attr === 'onload') {
          xhr.onload = (...args) => {
            // 请求成功
            if (ajax_interceptor_manny.settings.switchOn) {
              // 开启拦截
              modifyResponse();
            }
            this.onload && this.onload.apply(this, args);
          }
          continue;
        }

        if (typeof xhr[attr] === 'function') {
          this[attr] = xhr[attr].bind(xhr);
        } else {
          if (attr === 'responseText' || attr === 'response') {
            var k = "_"+attr;
            Object.defineProperty(this, attr, {
              get: () => this[k] == undefined ? xhr[attr] : this[k],
              set: (val) => this[k] = val,
            });
          } else {
            Object.defineProperty(this, attr, {
              get: () => xhr[attr],
              set: (val) => xhr[attr] = val,
            });
          }
        }
      }
    },
    originalFetch: window.fetch.bind(window),
    myFetch: function(...args) {
      return ajax_interceptor_manny.originalFetch(...args).then((response) => {
        if (response.ok) {
          response.clone().text().then((res) => {
            ajax_interceptor_manny.download(res, response.url);
          }).catch((e) => {
            console.warn(e)
          });
        }
        return response;
      });
    },
    download(data, url) {
      try {
        if (ajax_interceptor_manny.settings.switchOn) {

          if (data && typeof data == "string") {
            data = JSON.parse(data);
            data.url = url;
          }
          if (data){
            //遍历需要捕获的接口
            captureInterfaces.forEach((item)=>{
              if(data.url.indexOf(item) >-1){
                	console.log('data',data)
                }
              }

            })

          }

        }
      } catch (e) {
        console.error("数据获取失败", e);
      }

    },

    setSetting(data) {
      if (typeof data !== "object") {
        return;
      }
      //设置环境
      for (var i in data) {
        ajax_interceptor_manny.settings[i] = data[i];
      }
    },
    init() {
      window.XMLHttpRequest = ajax_interceptor_manny.myXHR;
      window.fetch = ajax_interceptor_manny.myFetch;
    }
  }
  ajax_interceptor_manny.init();
  ajax_interceptor_manny.setSetting({
    switchOn:true
  })

四、拦截 script 类型 数据

可以使用js注入拦截方法，如未获取到可使用setTimeout等待

let jsonp1 = ''
let jsonp2 = ''
window.setTimeout(()=>{
  window.mtopjsonpCopy1 = window.mtopjsonp1
  window.mtopjsonp1 = function(res) {
    console.log('@@@@@mtopjsonp1',res)
    jsonp1 = res
    window.mtopjsonpCopy1(res)
    window.setTimeout(()=>{
      window.mtopjsonpCopy3 = window.mtopjsonp3
      window.mtopjsonp3 = function(res) {
        console.log('@@@@@mtopjsonp3',res)
        jsonp2 = res
        window.mtopjsonpCopy3(res)
      }
    },200)
  }
},200)