title: Multiple Windows in Electron
body: <p>I've been looking for hours, and I cant find a way to build a working setup to use multiple windows in my Electron app.</p>
  <p>I'm using <code>electron-forge</code> with plain vanilla JS. No react or vue.</p>
  <p>What I'm trying to achieve is popups that I can trigger from inside the main application Dashboard using functions.</p>
  <p>Here's what I have for HTML:</p>
  <pre><code>&lt;i onclick=&quot;newBot()&quot; class=&quot;fas fa-plus new-bot-button bar-icon&quot;&gt;&lt;/i&gt;
  &lt;i onclick=&quot;selectBot()&quot; class=&quot;fas fa-box-open select-bot-button bar-icon&quot;&gt;&lt;/i&gt;
  &lt;i onclick=&quot;startBot()&quot; class=&quot;fas fa-play start-bot-button bar-icon&quot;&gt;&lt;/i&gt;
  &lt;i onclick=&quot;stopBot()&quot; class=&quot;fas fa-stop stop-bot-button bar-icon&quot;&gt;&lt;/i&gt;
  &lt;i onclick=&quot;about()&quot; class=&quot;fas fa-info about-button bar-icon&quot;&gt;&lt;/i&gt;
  </code></pre>
  <p>I'm completely clueless on how to implement this in JavaScript, so help would be greatly appreciated.</p>
  <p>Note, I have a preload script <code>mainPreload.js</code> and the main script is <code>main.js</code>. The window is also frameless as well, and have a custom title bar that I coded. It looks like this. The icons referenced above are the set on the far right.</p>
  <p><a href="https://i.stack.imgur.com/xSIfC.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/xSIfC.png" alt="Title Bar" /></a></p>
  <p>Here's my <code>main.js</code>:</p>
  <pre><code>const { ipcMain, app, BrowserWindow } = require('electron')
  
  function createWindow () {
    const win = new BrowserWindow({
      width: 800,
      height: 600,
      resizable: false,
      webPreferences: {
        preload: path.join(__dirname, 'mainPreload.js'),
        nodeIntegration: true,
        contextIsolation: false
      },
      frame: false,
      icon: './assets/toggle-01.png'
    })
    
    win.loadFile('index.html');
    ipcMain.on('minimize', () =&gt; {
      win.minimize()
    });
  }
  
  
  
  app.whenReady().then(() =&gt; {
    createWindow()
    app.on('activate', () =&gt; {
      if (BrowserWindow.getAllWindows().length === 0) {
        createWindow()
      }
    })
  })
  
  app.on('window-all-closed', () =&gt; {
    if (process.platform !== 'darwin') {
      app.quit()
    }
  })
  </code></pre>
  <p>Here's my <code>mainPreload.js</code>:</p>
  <pre><code>function scrollDown() {
    document.getElementById('console-text').scrollTop = document.getElementById('console-text').scrollHeight
  }
  
  window.addEventListener('DOMContentLoaded', () =&gt; {
    const container = document.getElementById('console-text');
    console.log = function(message) {
      const p = container.appendChild(document.createElement('p'));
      p.textContent = message;
      p.className = 'console-output';
      scrollDown();
    };
    window.addEventListener('error', (error) =&gt; {
      const p = container.appendChild(document.createElement('p'));
      p.textContent = error.message;
      p.className = 'console-output';
      scrollDown();
    });
    console.log('Ready')
  })
  </code></pre>
  <p>Thanks!</p>