Two browsers in the same Electron window Two browsers in the same Electron window google-chrome google-chrome

Two browsers in the same Electron window


A little late, but to add two browsers within one window you have to use BrowserWindow.addBrowserView instead of BrowserWindow.setBrowserView. You'll get the following:

const { BrowserView, BrowserWindow, app } = require('electron')function twoViews () {  const win = new BrowserWindow({ width: 800, height: 600 })  const view = new BrowserView()  win.addBrowserView(view)  view.setBounds({ x: 0, y: 0, width: 400, height: 300 })  view.webContents.loadURL('https://electronjs.org')  const secondView = new BrowserView()  win.addBrowserView(secondView)  secondView.setBounds({ x: 400, y: 0, width: 400, height: 300 })  secondView.webContents.loadURL('https://electronjs.org')  app.on('window-all-closed', () => {    win.removeBrowserView(secondView)    win.removeBrowserView(view)    app.quit()  })}app.whenReady().then(twoViews)

Once you create two BrowserView objects, you just add them to the window. You'll also want to remove the views when tearing down the application. If you don't you might get a segmentation fault.


What you are looking for is BrowserView

From the docs:

A BrowserView can be used to embed additional web content into a BrowserWindow. It is like a child window, except that it is positioned relative to its owning window. It is meant to be an alternative to the webview tag.

It looks like this is what you want, the views can render separate HTML pages and position them relatively inside the same browser window.

// In the main process.const { BrowserView, BrowserWindow } = require('electron')let win = new BrowserWindow({ width: 800, height: 600 })win.on('closed', () => {  win = null})let view = new BrowserView({  webPreferences: {    nodeIntegration: false  }})win.setBrowserView(view)view.setBounds({ x: 0, y: 0, width: 300, height: 300 })view.webContents.loadURL('https://electronjs.org')