Electron：如何捕获来自主进程的所有请求响应？答案

【问题标题】：Electron: How to catch all the requests response from the main process?Electron：如何捕获来自主进程的所有请求响应？
【发布时间】：2020-11-29 12:10:24
【问题描述】：

我想从主进程获取我的电子应用程序中发生的所有请求的响应。

This image shows that the response I want to get would be at the Response tab and not at the Headers tab on Chrome Dev Tools.

我没有使用<webview> 标签，我使用的是mainWindow.loadURL()。

这仅返回标头和其他一些内容，但不返回响应

session.defaultSession.webRequest.onCompleted({ urls: ['*://*/*'] }, function (details, callback) {
     console.log(details);
});

所以要检索我尝试过的响应：

try {
     mainWindow.webContents.debugger.attach('1.3')
} catch (err) {
     console.log('Debugger attach failed: ', err)
}

mainWindow.webContents.debugger.on('detach', (event, reason) => {
     console.log('Debugger detached due to: ', reason)
});

mainWindow.webContents.debugger.sendCommand('Network.enable');

session.defaultSession.webRequest.onCompleted({ urls: ['*://*/*'] }, function (details, callback) {
     mainWindow.webContents.debugger.sendCommand('Network.getResponseBody', { requestId: details.id.toString() }, function (body, body64) {
          console.log(body);
     });
});

但它输出

UnhandledPromiseRejectionWarning: Error: No resource with given identifier found
UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either
                                  by throwing inside of an async function without a catch block,
                                  or by rejecting a promise which was not handled with .catch(). 
                                  (rejection id: 1)

所以我尝试了

try {
     mainWindow.webContents.debugger.attach('1.3')
} catch (err) {
     console.log('Debugger attach failed: ', err)
}

mainWindow.webContents.debugger.on('detach', (event, reason) => {
     console.log('Debugger detached due to: ', reason)
});

mainWindow.webContents.debugger.sendCommand('Network.enable');

mainWindow.webContents.debugger.on('message', function(event, method, params, resourceType){
     if (method === 'Network.responseReceived') {
          if (params.type === 'XHR') {
               mainWindow.webContents.debugger.sendCommand('Network.getResponseBody', { requestId: params.requestId }, function (body, body64) {
                    console.log(body);
               });
          }
     }
});

但输出相同：

UnhandledPromiseRejectionWarning: Error: No resource with given identifier found
UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either
                                  by throwing inside of an async function without a catch block,
                                  or by rejecting a promise which was not handled with .catch(). 
                                  (rejection id: 1)

有什么想法吗？

【问题讨论】：

标签： javascript node.js npm electron

【解决方案1】：

要拦截response 和body（对于源自renderer 进程的请求），您可以使用：

拦截代理服务器（如mitm-proxy 或hoxy 或者您可以使用http、https、http2 或net 模块自己编写）。您可以在main 进程或一些分叉的子进程中运行它
浏览器扩展将使用 Chromium 扩展 API 拦截 renderer 进程中的所有请求

在我们的产品中，我们使用经过大量修改的 hoxy 并支持 http2。但我们正在考虑从头重写它并为其添加extension模式。

【讨论】：

谢谢，我最终使用了一个 Chromium 扩展，它获取 body 并使用 express 服务器将其发送到主进程

【解决方案2】：

我写这个问题已经有一段时间了，我刚刚找到了解决方案。我混合了 WebRequest API 和 Debugger API，它们的请求不共享相同的 id。我也将一个函数作为参数，但是 sendMessage 方法返回一个承诺并且没有回调函数。

这是一种仅使用调试器 API 的方法，效果很好：

try {
  mainWindow.webContents.debugger.attach('1.3');
} catch (err) {
  console.log('Debugger attach failed: ', err);
}

mainWindow.webContents.debugger.on('detach', (event, reason) => {
  console.log('Debugger detached due to: ', reason);
});

mainWindow.webContents.debugger.on('message', (event, method, params) => {
  if (method === 'Network.responseReceived') {
    console.log(params.response.url);
    mainWindow.webContents.debugger.sendCommand('Network.getResponseBody', { requestId: params.requestId }).then(function(response) {
      console.log(response);
    });
  }
})
  
mainWindow.webContents.debugger.sendCommand('Network.enable');

使用以下示例制作：

【讨论】：