electron 捕獲瀏覽器響應數據,如何攔截所有的http請求結果？並對結果進行修改
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')
這樣是拿不到響應內容的，，我需要的數據是
經過兩天的研究，嘗試過自定義協議，感覺不太合適，最終找到了解決方案
/**
* 監聽網頁中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)
當有網絡請求時控制枱則打印出請求和響應數據
【經驗分享】使用 Chrome DevTools Protocol 協議，在Network.responseReceived時調用Network.getResponseBody獲取應答正文有時會出現“No resource with given identifier”異常，是什麼原因？\ 解答：當瀏覽器接收到HTTP應答頭之後Network.responseReceived被調用，但此時HTTP應答正文(ResponseBody)可能還沒到位，應當在Network.loadingFinished時再調用Network.getResponseBody。