How to maximize and minimize window in electron without the remote module

Question

I am trying to create an electron app but I cant understand how to use the remote module by require('@electron/remote/');

I am able to close the window by window.close();

But I cant understand how to minimize and maximize the window.

I would like to use jquery to maximize, restore, minimize and unmaximize

So please answer me if there is a solution and try to give me an easy explanation of ipc.

Thanks in Advance..

Answer 1

I was just having the same problem today and I managed to find the solution. The Electron team does not want you to use remote because well.. It's bad.

Please PLEASE PLEASE read everything carefully!

The best solution is using ipc. Don't worry. It's not that complicated when you do it like this.

Note: look for //------------------------ for where the code is pasted

This is probably what your main process looks like (main process is where the window is created) Just an explanation, no copy-paste here.

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

const createWindow = () => {
        // Create the browser window.
        const mainWindow = new BrowserWindow({
        minWidth: 1000,
        minHeight: 480,
        frame: false,
        webPreferences: {
        nodeIntegration: true, 
        contextIsolation: false,
        },
    });

    // and load the index.html of the app.
    mainWindow.loadFile(path.join(__dirname, 'index.html'));

    // Open the DevTools.
    mainWindow.webContents.openDevTools();
};

app.on('ready', createWindow);

So the first step put stuff in your renderer process (the script attached to the html document)

//--------------------------------------------
const electron = require("electron");
const ipc = electron.ipcRenderer;

const togmax = document.getElementById("togmax");

togmax.addEventListener("click", function() {
    ipc.send("toggle-maximize-window");
});
//--------------------------------------------

Next, put this in your const create window = () => {...

//--------------------------------------------
const ipc = require("electron").ipcMain;
//--------------------------------------------

//--------------------------------------------
ipc.on("toggle-maximize-window", function(event) {
    if(mainWindow.isMaximized()) {
        mainWindow.unmaximize();
    } else {
        mainWindow.maximize();
    }
});
//--------------------------------------------

This is what your main script should look like afterwards.

const { app, BrowserWindow, electron } = require('electron');
const path = require('path');
//---------------------------------------------
const ipc = require("electron").ipcMain;
//---------------------------------------------

const createWindow = () => {
    // Create the browser window.
    const mainWindow = new BrowserWindow({
        minWidth: 1000,
        minHeight: 480,
        frame: false,
        webPreferences: {
            nodeIntegration: true, 
            contextIsolation: false,
        },
    });

    // and load the index.html of the app.
    mainWindow.loadFile(path.join(__dirname, 'index.html'));

    // Open the DevTools.
    mainWindow.webContents.openDevTools();


 //----------------------------------------------------------------
    ipc.on("toggle-maximize-window", function(event) {
        if(mainWindow.isMaximized()) {
            mainWindow.unmaximize();
        } else {
            mainWindow.maximize();
        }
    });
//-----------------------------------------------------------------
};

To sum it up, you're putting in nodeIntergration: true so you can use "require" in the script on your HTML. You're using the script with ipcRenderer to send message to the main process (ipcMain) and ipc.on(...) means that when it receive a message, it does whatever is between the brackets. The reason we pasted the code inside where the main window is created, is because we want the functions that the remote module has. with that piece of code there, you can do things like mainWindow.maximize(), mainWindow.minimize(), check if its maximized, and everything that remote allows you to do. if you want more, check out this link. https://www.electronjs.org/docs/latest/api/browser-window/#event-maximize It shows you all the things you can do.

And boom you're done. There was only 3 things to paste in so you're good. Make sure to check out the Electron docs after this. I'm nice so I spoon-feed you code but make sure to learn more after you hit a roadblock!