Not working on electron version 14.0.0

[CAESARSNOOT]

The minimize, maximize, and close functions don't working on version 14.0.0.

[plasmak]

Same hear, does not work.

[KasaiJo]

It's not working on version 14 cause remote was remove. Check this post : electron/electron#21408

[binaryfunt]

Happy to accept a PR to get it working on more recent versions of Electron, but don't have much time to work on this myself

[KasaiJo]

I found a solution but I don't know if it's a proper way... I share in case someone wanna try it.

Install @Remote package : https://www.npmjs.com/package/@electron/remote
Add the following line in main.js :
require('@electron/remote/main').initialize();

and this one after "mainWindow" implementation :
require("@electron/remote/main").enable(mainWindow.webContents)

Change require in renderer.js by :
const remote = require('@electron/remote');

[CAESARSNOOT]

It's not working on version 14 cause remote was remove. Check this post : electron/electron#21408

Yes, I was aware of this and it truly has been a fucking pain to me, mainly because I'm stupid and don't understand ipcRenderer that well and I'm to lazy to learn how it works.

[CAESARSNOOT]

Ok so I have made fork on my other GitHub where I have fixed this problem
https://github.com/NovaAppsInc/electron-seamless-titlebat-tutorial

[KasaiJo]

Thank you for your work,

I repost your link (is broken "titlebat => titlebar") :
https://github.com/NovaAppsInc/electron-seamless-titlebar-tutorial

[Kvanrooyen]

This is how it would work with ipscRenderer.

In main.js add the following below mainWindow.loadFile("index.html");:

  //Minimise the app
  ipc.on("minimiseApp", () => {
    console.log("Clicked Minimise button!");
    mainWindow.minimize();
  });

  // Maximize Restore App
  ipc.on("maximizeRestoreApp", () => {
    if (mainWindow.isMaximized()) {
      console.log("Clicked on Restore");
      mainWindow.restore();
    } else {
      console.log("Clicked on Maximize");
      mainWindow.maximize();
    }
  });

  //Check if maximized
  mainWindow.on("maximize", () => {
    mainWindow.webContents.send("isMaximized");
  });

  // Check if is restored
  mainWindow.on("unmaximize", () => {
    mainWindow.webContents.send("isRestored");
  });

  //Close the app
  ipc.on("closeApp", () => {
    console.log("Clicked Close button!");
    mainWindow.close();
  });

renderer.js should look like this:

const { ipcRenderer } = require("electron");
const ipc = ipcRenderer;

// Minimise app
minBtn.addEventListener("click", () => {
  ipc.send("minimiseApp");
});

//Maximize Restore App
maxBtn.addEventListener("click", () => {
  ipc.send("maximizeRestoreApp");
});

//Close app
closeBtn.addEventListener("click", () => {
  ipc.send("closeApp");
});

Credit to Wanderson on YouTube, I watched this video of his to get it to work.

[NovaAppsInc]

I put up a pull request @binaryfunt

[baxterbln]

The solution is very simple:

1.) Install @electron/remote

2.) add after mainWindow.loadFile(..) in main,js

require("@electron/remote/main").initialize();
require("@electron/remote/main").enable(mainWindow.webContents);

3.) replace the content in renderer.js to:

const {BrowserWindow} = require('@electron/remote')

const win = BrowserWindow.getFocusedWindow();

document.onreadystatechange = (event) => {
    if (document.readyState == "complete") {
        handleWindowControls();

        document.getElementById('electron-ver').innerHTML = `${process.versions.electron}`
    }
};

window.onbeforeunload = (event) => {
    win.removeAllListeners();
}

function handleWindowControls() {
    document.getElementById('min-button').addEventListener("click", event => {
        win.minimize();
    });

    document.getElementById('max-button').addEventListener("click", event => {
        win.maximize();
    });

    document.getElementById('restore-button').addEventListener("click", event => {
        win.unmaximize();
    });

    document.getElementById('close-button').addEventListener("click", event => {
        win.close();
    });

    toggleMaxRestoreButtons();
    win.on('maximize', toggleMaxRestoreButtons);
    win.on('unmaximize', toggleMaxRestoreButtons);

    function toggleMaxRestoreButtons() {
        if (win.isMaximized()) {
            document.body.classList.add('maximized');
        } else {
            document.body.classList.remove('maximized');
        }
    }
}