Chrome擴展程序可以讀取HTTP響應

Question

我有這個Chrome擴展程序在發送請求之前修改了請求的標題。我現在希望能夠在相同的擴展名中檢查響應的標題。我在整個Chrome擴展API中搜索，但我找不到任何有趣的東西。

這是我用來修改請求頭的代碼，也許這對我來說是很有用的。

chrome.webRequest.onBeforeSendHeaders.addListener(
     function(details) {/*do something*/}, 
     {urls: ["<all_urls>"]}, 
     ["blocking", "requestHeaders"]); 

有沒有人知道該怎麼做，或者可以指點我一個有趣的來源？謝謝

Answer 1

查看live-headers示例。

http://code.google.com/chrome/extensions/examples/api/debugger/live-headers.zip

Answer 2

我實現了，通過注入一個腳本，DOM捕捉由網站發出的所有HTTP請求和響應。我注入injected.js使用DOM內容腳本：

/** 
* code in contentscript.js 
* added "web_accessible_resources": ["injected.js"] to manifest.json 
*/ 
var s = document.createElement('script'); 
s.src = chrome.extension.getURL('injected.js'); 
s.onload = function() { 
    this.remove(); 
}; 
(document.head || document.documentElement).appendChild(s); 

這將注入在網站（S）的manifest.json那場比賽 「content_scripts」 「匹配」 injected.js。在「js」中提到contentscript.js和inject.js。 另外，請確保您在manifest.json中的「權限」中提到了該網站。在答案結尾處查看manifest.json。

現在，inject.js中的代碼實際捕獲請求和響應的靈感來自How we captured AJAX requests from a website tab with a Chrome Extension。另請參閱該文章中的評論部分。

的injected.js如下：

(function(xhr) { 

    var XHR = XMLHttpRequest.prototype; 

    var open = XHR.open; 
    var send = XHR.send; 
    var setRequestHeader = XHR.setRequestHeader; 

    XHR.open = function(method, url) { 
     this._method = method; 
     this._url = url; 
     this._requestHeaders = {}; 
     this._startTime = (new Date()).toISOString(); 

     return open.apply(this, arguments); 
    }; 

    XHR.setRequestHeader = function(header, value) { 
     this._requestHeaders[header] = value; 
     return setRequestHeader.apply(this, arguments); 
    }; 

    XHR.send = function(postData) { 

     this.addEventListener('load', function() { 
      var endTime = (new Date()).toISOString(); 

      var myUrl = this._url ? this._url.toLowerCase() : this._url; 
      if(myUrl) { 

       if (postData) { 
        if (typeof postData === 'string') { 
         try { 
          // here you get the REQUEST HEADERS, in JSON format, so you can also use JSON.parse 
          this._requestHeaders = postData;  
         } catch(err) { 
          console.log('Request Header JSON decode failed, transfer_encoding field could be base64'); 
          console.log(err); 
         } 
        } else if (typeof postData === 'object' || typeof postData === 'array' || typeof postData === 'number' || typeof postData === 'boolean') { 
          // do something if you need 
        } 
       } 

       // here you get the RESPONSE HEADERS 
       var responseHeaders = this.getAllResponseHeaders(); 

       if (this.responseType != 'blob' && this.responseText) { 
        // responseText is string or null 
        try { 

         // here you get RESPONSE TEXT (BODY), in JSON format, so you can use JSON.parse 
         var arr = this.responseText; 

         // printing url, request headers, response headers, response body, to console 

         console.log(this._url); 
         console.log(JSON.parse(this._requestHeaders)); 
         console.log(responseHeaders); 
         console.log(JSON.parse(arr));       

        } catch(err) { 
         console.log("Error in responseType try catch"); 
         console.log(err); 
        } 
       } 

      } 
     }); 

     return send.apply(this, arguments); 
    }; 

})(XMLHttpRequest); 

僅供參考，我的manifest.json的是：

{ 
    "manifest_version": 2, 

    "name": "Extension Name", 
    "description": "Some Desc.", 
    "version": "1.1", 

    "browser_action": { 
    "default_icon": "icon.png", 
    "default_popup": "popup.html" 
    }, 
    "permissions": [ 
    "activeTab", 
    "storage", 
    "tabs", 
    "*://website.com/*" 
    ], 
    "content_scripts": [ 
    { 
     "matches": ["*://website.com/*"], 
     "run_at": "document_start", 
     "js": ["contentscript.js", "inject.js"] 
    } 
    ], 
    "web_accessible_resources": ["injected.js"] 
} 

希望這有助於。