前言

通過chrome插件的注入js腳本的功能，重寫XMLHttpRequest方法伐脖，從而實現(xiàn)攔截ajax功能。

實現(xiàn)方式

首先通過content_script注入腳本inject/main.js

// 注入main.js到頁面
var file = chrome.extension.getURL('inject/main.js')
var s = document.createElement('script')
s.type = 'text/javascript'
s.src = file
document.documentElement.appendChild(s)

// 傳遞參數(shù)到background頁面
window.addEventListener('injectScript', (event) => {
  console.log(event.detail)
  chrome.runtime.sendMessage({
    type: 'demo',
    data: event.detail.data
  }, (response) => {
    console.log('demo response:', response)
  })
})

需要在manifest.json中添加配置，否則無法注入

{
  "web_accessible_resources": ["inject/main.js"]
}

核心代碼:

let interceptor = {
  urls: [],
  originalXHR: window.XMLHttpRequest,
  myXHR: function () {
    let isScriptDispatched = false
    const modifyResponse = () => {
      if (!isScriptDispatched) {
        let matchUrls = interceptor.urls.filter(url => xhr.responseURL.indexOf(url) > -1)
        let match = matchUrls.length > 0
        if (match) {
          let data;
          if (!xhr.responseType || xhr.responseType === "text") {
              data = xhr.responseText;
          } else if (xhr.responseType === "document") {
              data = xhr.responseXML;
          } else {
              data = xhr.response;
          }
          this.responseText = this.response = data
          let detail = { url: xhr.responseURL, data }
          window.dispatchEvent(new CustomEvent("injectScript", { detail }));
          isScriptDispatched = true
        }
      }
    }
    const xhr = new interceptor.originalXHR
    for (let attr in xhr) {
      if (attr === 'onreadystatechange') {
        xhr.onreadystatechange = (...args) => {
          if (this.readyState === 4) {
            modifyResponse()
          }
          this.onreadystatechange && this.onreadystatechange.apply(this, args)
        }
        continue
      } else if (attr === 'onload') {
        xhr.onload = (...args) => {
          modifyResponse()
          this.onload && this.onload.apply(this, args)
        }
        continue
      }

      if (typeof xhr[attr] === 'function') {
        this[attr] = xhr[attr].bind(xhr);
      } else {
        // responseText和response不是writeable的哈街，但攔截時需要修改它她倘，所以修改就存儲在this[`_${attr}`]上
        if (attr === 'responseText' || attr === 'response') {
          Object.defineProperty(this, attr, {
            get: () => this[`_${attr}`] == undefined ? xhr[attr] : this[`_${attr}`],
            set: (val) => this[`_${attr}`] = val,
            enumerable: true
          });
        } else {
          Object.defineProperty(this, attr, {
            get: () => xhr[attr],
            set: (val) => xhr[attr] = val,
            enumerable: true
          });
        }
      }
    }
  }
}


window.XMLHttpRequest = interceptor.myXHR