想在自定义组件中使用electron webContents 的能力

[baxiamali]

目标：right视图中自定义组件加载地址“https://test.com” ,bottom视图自定义调试区域组件devtools，使用electron webContents提供的contents.setDevToolsWebContents(devToolsWebContents)能力进行调试区域和预览网页的绑定。
思路一：
在两个自定义组件中使用webview，类似以下代码

  <webview id="browser" src="https://github.com"></webview>
  <webview id="devtools" src="about:blank"></webview>
  <script>
    const { ipcRenderer } = require('electron')
    const emittedOnce = (element, eventName) => new Promise(resolve => {
      element.addEventListener(eventName, event => resolve(event), { once: true })
    })
    const browserView = document.getElementById('browser')
    const devtoolsView = document.getElementById('devtools')
    const browserReady = emittedOnce(browserView, 'dom-ready')
    const devtoolsReady = emittedOnce(devtoolsView, 'dom-ready')
    Promise.all([browserReady, devtoolsReady]).then(() => {
      const targetId = browserView.getWebContentsId()
      const devtoolsId = devtoolsView.getWebContentsId()
      ipcRenderer.send('open-devtools', targetId, devtoolsId)
    })

// Main process
const { ipcMain, webContents } = require('electron')
ipcMain.on('open-devtools', (event, targetContentsId, devtoolsContentsId) => {
  const target = webContents.fromId(targetContentsId)
  const devtools = webContents.fromId(devtoolsContentsId)
  target.setDevToolsWebContents(devtools)
  target.openDevTools()
})

问题：不知道怎么在组件中使用electron的功能，例如ipcRenderer ipcMain webContents等等，能否指路一下可供参考的代码

思路二：

const { app, BrowserWindow } = require('electron')

let win = null
let devtools = null

app.whenReady().then(() => {
  win = new BrowserWindow()
  devtools = new BrowserWindow()
  win.loadURL('https://github.com')
  win.webContents.setDevToolsWebContents(devtools.webContents)
  win.webContents.openDevTools({ mode: 'detach' })
})

问题：可以在组件中直接新建BrowserWindow吗？还能收到插槽布局的控制吗？

[erha19]

@baxiamali 你可以看一下这个示例项目 https://github.com/opensumi/app-desktop ，里面针对 IMainStorageService 方法的实现及调用即是实现了 前端 -> Main 进程的服务调用

[baxiamali]

看到代码了，大概明白这个思路了，是不是在main/service 中把需要的electron能力封装一下，然后在前端组件中进行服务调用？
所以思路一是可行的，思路二的话可以吗？

[erha19]

不建议在组件内进一步去创建 Browser Window，建议统一由 main 进程统一管理，一些服务调用还是按照我们案例里面推荐的做法去做比较清晰。