Accessing child window in an electron app

[mboeni]

Hi there

I would like to introduce a child window for some debug functionality in my current app project (electron). I managed to create the child window (as expected in electron-main.js and it works. The main window is called, well, mainWindow and the child window is named debugWindow.

My issue is now on how to get on from here:

1. How do I access the childWindow from my vue-page’s code?
2. How does layout assignment / dressing (i.e. custom chrome, etc) work for the child window?

I haven’t yet found any documentation that shows how to tie this all together in an electron app.

Any advice?

Cheers,
Michael

[mboeni]

More specifically, I would need a tip on what the actual URL for debugWindow.loadUrl() needs to be if I want to load pages/Debug.vue.

The current state of affairs is:

function createDebugWindow () {
  debugWindow = new BrowserWindow({
    parent: mainWindow,
    width: 1000,
    height: 700,
    minWidth: 600,
    minHeight: 300,
    useContentSize: true,
    show: false,
    webPreferences: {
      nodeIntegration: true
    }
  })

  let debugUrl = require('url').format({
    protocol: 'file',
    slashes: true,
    pathname: require('path').join(__dirname, 'pages/Debug.vue')
  })

  debugWindow.loadURL(debugUrl)

}

But that doesn’t do anything…