拦截ajax响应体浏览器扩展

编程问答 2022-05-31

问题描述

我已阅读 this article 关于如何使用内容脚本拦截 chrome 扩展程序中的响应正文。我已经在测试扩展中实现了它来学习这个概念，但我无法得到响应，我想是因为我正在测试它的站点是使用 react.js 制作的。这是代码

manifest.json

{
  "manifest_version": 2,"name": "test learning extension","description": "","permissions": [
    "https://open.spotify.com/*","https://audio-akp-quic-control-spotify-com.akamaized.net/audio/*","webRequest","activeTab",],"background": {
    "scripts": [
      "js/background.js"
    ],"persistent": true
  },"browser_action": {
    
  },"content_scripts": [{
    "matches": ["https://open.spotify.com/*"],"js": ["js/contentScript.js"],"run_at": "document_end"
  }],"version": "1.0.0","content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self'"
}

contentScript.js

const interceptRequests = () => {
  let xhrOverrideScript = document.createElement('script');
  xhrOverrideScript.type = 'text/javascript';
  xhrOverrideScript.innerHTML = `
  (() => {
    console.log('loaded xhr script');
    let xhr = XMLHttpRequest.prototype;
    let send = xhr.send;
    let open = xhr.open;
    xhr.open = (method,url) => {
      this.url = url; // the request url
      return open.apply(this,arguments);
    }

    xhr.send = () => {
      this.addEventListener('load',() => {
        console.log('xhr load event',this.url,this.url.includes('https://audio-akp-quic-control-spotify-com.akamaized.net/audio/'));
        if (this.url.includes('https://audio-akp-quic-control-spotify-com.akamaized.net/audio/')) {
          let dataDOMElement = document.createElement('div');
          dataDOMElement.id = '__interceptedData';
          dataDOMElement.innerText = this.response;
          dataDOMElement.style.height = 0;
          dataDOMElement.style.overflow = 'hidden';
          document.body.appendChild(dataDOMElement);
        }               
      });
      return send.apply(this,arguments);
    }
  })();
  `
  document.head.prepend(xhrOverrideScript);
}

const checkForDOM = () => {
  if(document.body && document.head){
    requestIdleCallback(interceptRequests);
  }else{
    requestIdleCallback(interceptRequests);
  }
}

requestIdleCallback(checkForDOM);

const scrapeData = () => {
  let responseContainer = document.getElementById('__interceptedData');
  if(responseContainer){
    let response = responseContainer.innerHTML;
    console.log(response);
  }else{
    requestIdleCallback(scrapeData);
  }
}

requestIdleCallback(scrapeData);

还有其他方法可以尝试拦截身体响应吗？我也尝试过使用 devtools.network api，但它需要打开控制台才能让它工作，使用 webRequest 但它不会给出响应正文。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

ajaxbrowser-extensionjavascript