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"] 
} 

希望这有助于。