How can i show child electron BrowserWindow as separate taskbar icon?

Question

I have test electron project with two windows. Now windows are grouped in the taskbar (see the ACTUAL part on screenshot). I want each window to be in a separate icon in the taskbar (see the EXPECTED part on screenshot). Can I do this programmatically?

I tried this for Windows (Windows 10). Not tried for MAC. I want it to work on both Windows and Mac.

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

let mainWindow

function createWindow () {
  mainWindow = new BrowserWindow({width: 800,height: 600})
  mainWindow.loadFile('index.html')
  var otherWindow = new BrowserWindow({width: 400,height: 300})
  otherWindow.loadFile('otherWindow.html')

  mainWindow.on('closed', function () {
    mainWindow = null
  })
}
app.on('ready', createWindow)

app.on('window-all-closed', function () {
  if (process.platform !== 'darwin') {
    app.quit()
  }
})

app.on('activate', function () {
  if (mainWindow === null) {
    createWindow()
  }
})

Look image

score 2 · Answer 1 · answered Aug 11 '20 at 23:35

This should help:

win.setAppDetails({
  appId: "MySecondWindowID"
});

Windows groups window icons in the taskbar if they have same System.AppUserModel.ID, you can use win.setAppDetails(options) from Electron API to set different appId's for each window.

How can i show child electron BrowserWindow as separate taskbar icon?

1 Answers1