I'd like to have one single Electron window, split in two parts:

• the left part is a BrowserWindow loading

• the right part is another BrowserWindow loading Gmail too, but I'd like these two browsers to be "independent", i.e. the cookies/LocalStorage/etc. should be independent (like if we have a normal Chrome window vs. a incognito window) ; thus allowing to have one Gmail account on left / another account connected on the right part

• some other UI buttons on top of the single Electron window.

This code works, but it creates 2 windows instead of one:

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

app.once('ready', () => {
  let win = new BrowserWindow({show: false})
  win.once('show', () => { win.webContents.executeJavaScript('validateFlights()') })
  win.loadURL('')
  win.show()

  let win2 = new BrowserWindow({show: false})
  win2.once('show', () => { win.webContents.executeJavaScript('validateFlights()') })
  win2.loadURL('')
  win2.show()
})

How to have them in one window?

I'd like to have one single Electron window, split in two parts:

• the left part is a BrowserWindow loading https://gmail.com

• the right part is another BrowserWindow loading Gmail too, but I'd like these two browsers to be "independent", i.e. the cookies/LocalStorage/etc. should be independent (like if we have a normal Chrome window vs. a incognito window) ; thus allowing to have one Gmail account on left / another account connected on the right part

• some other UI buttons on top of the single Electron window.

This code works, but it creates 2 windows instead of one:

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

app.once('ready', () => {
  let win = new BrowserWindow({show: false})
  win.once('show', () => { win.webContents.executeJavaScript('validateFlights()') })
  win.loadURL('https://www.gmail.com')
  win.show()

  let win2 = new BrowserWindow({show: false})
  win2.once('show', () => { win.webContents.executeJavaScript('validateFlights()') })
  win2.loadURL('https://www.gmail.com')
  win2.show()
})

How to have them in one window?

• javascript
• google-chrome
• browser
• electron

• 1 Why not use one single BrowserWindow and two iframe(s) ? – Alexandre Nicolas Commented Mar 6, 2019 at 13:14
• @Kornflexx I assume gmail might be serving frame-busting code. If you can find a way to work around that (might be possible in electron), then this is a valid solution. – asleepysamurai Commented Mar 6, 2019 at 13:16
• May be its not possible, indirectly you want to run two app in same code. Every app have their own instance – Mayank Vadiya Commented Mar 6, 2019 at 13:17
• @Kornflexx in fact it's more complex because I want that, after restarting the application, the left browser remains connected to the account / the right browser remains connected to the other account (each one with its cookies). – Basj Commented Mar 6, 2019 at 13:17
• 1 Another example: you want to create a "browser" with Electron (we've run full circle, that's right ;)), like github.com/wexond/wexond: we need to be able to display top UI buttons (to select tabs), and the actual browser area in the same window. – Basj Commented Mar 6, 2019 at 13:19

2 Answers 2

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')