Electron: How to share BrowserWindow instance across multiple files?

Question

I want to have a js file let's say window.js that is responsible for creating and exporting an unique instance of BrowserWindow so that I can reuse this instance across multiple js files.

Until now I tried this:

    const { app, BrowserWindow } = require("electron");
    
    let window = null;
   
    const createWindow = () => {
      if (window) return;
      window = new BrowserWindow({
      minWidth: 820,
      minHeight: 620,
      width: 820,
      height: 620,
      resizable: false,
      webPreferences: {
        preload: path.join(__dirname, "preload.js"),
        enableRemoteModule: true,
      },
     });
     window.removeMenu();
    };

app.whenReady().then(() => {
  createWindow();
  app.on("activate", () => {
    if (BrowserWindow.getAllWindows().length === 0) {
      createWindow();
      //   showRecorderWindow();
    }
  });
});

module.exports = {
  window
}

However when I require the window using: const { window } = require("./window.js"); the window variable is always null. Is there any way to achieve this?

Answer 1

The use of "setters" and "getters" will resolve your problem.

Your main.js file should require your window.js module and create() the window.

If any other Javascript file(s) requires access to the window instance then within that file you can require the window.js module and then just call the get() function.

---

Within your main.js (main thread) file:

1. require the window.js file which contains the create and get functions.
2. Declare the window variable so it is not garbage collected.
3. On electronApp.on('ready', ...) allocate to the window variable the created window instance.

const electronApp = require('electron').app;
const electronBrowserWindow = require('electron').BrowserWindow;

const nodePath = require("path");

const appWindow = require(nodePath.join(__dirname, 'window'));

// Prevent garbage collection
let window;

electronApp.on('ready', () => {
    window = appWindow.create();
});

electronApp.on('window-all-closed', () => {
    if (process.platform !== 'darwin') {
        electronApp.quit();
    }
});

electronApp.on('activate', () => {
    if (electronBrowserWindow.getAllWindows().length === 0) {
        appWindow.create();
    }
});

---

Within your window.js (main thread) file:

1. Create 2 functions - One to create the window and one to get the window instance.
2. Export both functions for use elsewhere.

const electronBrowserWindow = require('electron').BrowserWindow;

const nodePath = require('path');

let window; // Top level scope within the module

function create() {
    window = new electronBrowserWindow({
        x: 0,
        y: 0,
        width: 800,
        height: 600,
        show: false,
        webPreferences: {
            nodeIntegration: false,
            contextIsolation: true,
            preload: nodePath.join(__dirname, 'preload.js')
        }
    });

    window.loadFile('index.html')
        .then(() => { window.show(); });

    return window; // Return the instance of the window
}

function get() {
    return window; // Return the instance of the window
}

// Export the publicly available functions.
module.exports = {create, get};

---

And finally, when you need to refer to the instance of window in another.js (main thread) file:

1. require the window.js file.
2. Call the get() function.

const nodePath = require('path');

const appWindow = require(nodePath.join(__dirname, 'window'));

let window = appWindow.get();

This is really handy when you need to use a specific window as a parent to a child window or dialog.