electron 捕獲瀏覽器響應數據,如何攔截所有的http請求結果?並對結果進行修改

語言: CN / TW / HK

electron 捕獲瀏覽器響應數據,如何攔截所有的http請求結果?並對結果進行修改。 electron中如何攔截所有的http請求結果?並對結果進行修改.\ 翻遍了electron文檔, 只有request, 沒有對Response做處理的, 求教這個怎麼解決? 剛開始使用的是:

try { webWindow.webContents.debugger.attach('1.1') } catch (err) { console.log('調試器連接失敗: ', err) } webWindow.webContents.debugger.on('detach', (event, reason) => { console.log('調試器由於以下原因而分離 : ', reason) }) webWindow.webContents.debugger.addListener('message', (event, method, params) => { if (method === 'Network.responseReceived') { var mimeType = params.response.mimeType; if(mimeType !='image/gif' && mimeType !='image/jpeg' && mimeType == 'application/json'){ webContents.fromId(2).send("log",method,params) } } }) webWindow.webContents.debugger.sendCommand('Network.enable')

95388F348954B73A1D4BF39C2FDEFC3B.jpg

這樣是拿不到響應內容的,,我需要的數據是

image.png

經過兩天的研究,嘗試過自定義協議,感覺不太合適,最終找到了解決方案

/** * 監聽網頁中http請求,獲取請求和響應數據 */ try { webWindow.webContents.debugger.attach('1.3'); } catch (err) {console.log('調試器連接失敗: ', err)} webWindow.webContents.debugger.on('detach', (event, reason) => { console.log('調試器由於以下原因而分離 : ', reason) }); webWindow.webContents.debugger.on('message', (event, method, params) => { if (method === 'Network.responseReceived') { //params中無響應數據只有響應頭 var mimeType = params.response.mimeType; if (mimeType != 'image/gif' && mimeType != 'image/jpeg' && mimeType == 'application/json') { webWindow.webContents.debugger.sendCommand('Network.getResponseBody', { requestId: params.requestId }).then(function(response) { webContents.fromId(2).send("log",params.response.url,JSON.parse(response.body)) }); } } }) webWindow.webContents.debugger.sendCommand('Network.enable');

封裝的方法

``` import {webContents} from "electron";

/* * 可以獲取到發送請求是的數據 * request * Network.requestWillBeSent * 可以獲取到收到的響應數據-不含響應內容(可進一步獲取響應內容) * response * Network.responseReceived /

/* * * 用於webContents.debugger中 * 監聽網頁中http請求,獲取請求和響應數據 * @param webWindow 當前窗體實例 * @param id 窗體實例ID,用於在渲染線程顯示數據 * @constructor hzq / function GetHttpData(webWindow,id) { try { webWindow.webContents.debugger.attach('1.1'); } catch (err) { console.log('調試器連接失敗: ', err) } webWindow.webContents.debugger.on('detach', (event, reason) => { console.log('調試器由於以下原因而分離 : ', reason) }); webWindow.webContents.debugger.on('message', (event, method, params) => { //params中無響應數據只有響應頭

if (method === 'Network.requestWillBeSent') {
    webContents.fromId(id).send("GetHttpData",{type:'req',url:params.request.url},params)
}

if (method === 'Network.responseReceived') {
  var mimeType = params.response.mimeType;
  if (mimeType != 'image/gif' && mimeType != 'image/jpeg' && mimeType == 'application/json') {
    webContents.fromId(id).send("GetHttpData",{type:'rep',url:params.response.url},params)
    webWindow.webContents.debugger.sendCommand('Network.getResponseBody', { requestId: params.requestId }).then(function(response) {
      webContents.fromId(id).send("GetHttpData",{type:'repBody',url:params.response.url},JSON.parse(response.body))
    });
  }
}

}) webWindow.webContents.debugger.sendCommand('Network.enable'); }

export default GetHttpData; ```

使用

//在主進程中調用 GetHttpData(webWindow,2) 當有網絡請求時控制枱則打印出請求和響應數據

image.png

參考鏈接:http://stackoverflow.com/questions/63330866/electron-how-to-catch-all-the-requests-response-from-the-main-process

【經驗分享】使用 Chrome DevTools Protocol 協議,在Network.responseReceived時調用Network.getResponseBody獲取應答正文有時會出現“No resource with given identifier”異常,是什麼原因?\ 解答:當瀏覽器接收到HTTP應答頭之後Network.responseReceived被調用,但此時HTTP應答正文(ResponseBody)可能還沒到位,應當在Network.loadingFinished時再調用Network.getResponseBody。