Chrome 插件开发覆写xhr请求

news2024/9/21 2:36:27

这几天搞chrome谷歌浏览器插件遇到个问题我想拦截网页请求，并把数据传递到下一个子窗口。获取responsebody内容 background.js 单纯靠sendmessage实现不了通讯

chrome.runtime.sendMessage({data: e.data.responseText,type:'ajaxResponse'});

最开始的时候想用chrome.webRequest.onCompleted.addListener去实现拦截，注入后发现最多只能取到header信息，回调函数里面的对象并不携带responsetext的信息，如果要取到返回值还需要改写xhr请求

chrome.webRequest.onCompleted.addListener(
  function(details) {
    if(details.url.indexOf('https://example.com/')!==-1)
    {
      chrome.cookies.getAll({
        url:"https://example.com/"
      },(cks)=>{
        
      })    

    }
  },
  {urls: ['<all_urls>']},
  ['responseHeaders']
);

上述代码并不能实现取到responsetext的功能

重新整理思路，改写xhr ，首先注入jquery 文件，记得在manifest.json 配置一下


// 等待 jQuery 加载完成
function waitForJQuery() {
    if (typeof $ !== "undefined") {
      // jQuery 已经加载完成，执行你的代码
      $('html').prepend(insertContent);
      window.addEventListener("message",e => {
        //输出返回的值 也可以是其他的处理操作
        console.log(e.data.text);
      });
    } else {
      // jQuery 还没有加载完成，等待 50 毫秒后再次尝试
      setTimeout(waitForJQuery, 50);
    }
  }
  
waitForJQuery();

let injectcode =
`
<script>
(function () {
    console.log("i had injected");
    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() {   
            if (this._url.toString().indexOf("getCurrentShopOwner")!==(-1)){
                console.log(this._url)
                console.log(this.responseText)
window.postMessage({"responseText":this.responseText,"url":this._url},"*");
            }
            // /* Request y  */ postData
        });
        return send.apply(this, arguments);
    };
})();
</script>
`;

window.addEventListener("message",e => {
    //输出返回的值 也可以是其他的处理操作
    console.log("监听数据"+e.data.responseText);
    chrome.runtime.sendMessage({data: e.data.responseText,type:'ajaxResponse'});
});

$('html').prepend(injectcode);

下面是manifest.json代码

  "web_accessible_resources": [
    "jquery.min.js"
  ],
  "content_scripts": [
    {
      "matches": ["<all_urls>"],
      "js": ["/js/content.js","/js/jquery.min.js"],
      "encoding": "utf-8"
    }
  ]

然后在background.js 注册个监听事件


chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
  if (request.type === 'getcookies') {
    chrome.cookies.getAll({
      url: request.url
    }, (cks) => {
      let cookie = cks.map((item) => {
          return item.name + "=" + item.value
        }).join(";") + ";";
      sendResponse(cookie);
    });
    return true; // 必须返回 true，以便异步发送响应
  }
  if (request.type === 'ajaxResponse')
  {
    console.log(request)
    return true;
  }
});

实现效果如下