Electron: How to minimize a window from a rendered process

Question

Scenario

I have a window and it has an add task button that is opening a window. Everytime user clicks on it, it opens a window. I have a button on add task window that minimize it. How to implement this minimize button?

Code

I am able to close maximize window by using the code below:

var winclose = function () {
    window.close();
}

var winmaximize = function () {
    window.moveTo(0, 0);
    window.resizeTo(screen.width, screen.height);
}

However, I am not able to find any function that can minimize a window from rendered process.

Please help, many thanks;

Note:

Browsers do not provide a function to devs to minimize them. but here is a different scenario. Here I am using chromium provided by Electronjs. So, there must be a way to do so as we are developing a desktop application

Dummy Download link: download from OneDrive

Solution 1

You can call minimize() on the respective BrowserWindow instance. The question is how to best get access to this instance and this, in turn, depends on how you open the windows and where your minimize button is. From your example, I take it that the minimize button is actually in the window you want to close, in that case you can just minimize the focused window, because to when a user clicks the button inside it, the window should currently have the focus:

const { remote } = require('electron')
remote.BrowserWindow.getFocusedWindow().minimize();

Alternatively you can use BrowserWindow.fromId() to get access to the window in question if, for example, you want to minimize the task window from the other window.

Solution 2

Old thread but it should be noted that the remote module is seen as a security issue and its use is discouraged (see here). It is also deprecated as-is in electron 12 (see here).

Instead, you can just send an command via IPC to invoke the minimize.

From the renderer:

ipcRenderer.send('minimize')

In main:

ipcMain.on('minimize', () => {
  win.minimize()
  // or depending you could do: win.hide()
})

You can also just make a toggle (in main):

ipcMain.on('minimize', () => {
  win.isMinimized() ? win.restore() : win.minimize()
  // or alternatively: win.isVisible() ? win.hide() : win.show()
})

For dynamically made windows (as noted in other answers and as it appears to be the use case) you can use (in place of 'win'):

BrowserWindow.getFocusedWindow()

This creates an issue with toggling if you have more than one window (which is the point) but you can use BrowserWindow.getAllWindows() and iterate if you want to restore a specific window from outside the current renderer process (say by ID). Don't know why you would want to do this but I include it for completeness.

Solution 3

In case you stumble upon this thread and are using electron vue you can use this.$electron.remote.BrowserWindow.getFocusedWindow().minimize(); from directly inside your renderer.

Solution 4

This works for me:

const { remote } = require('electron')
remote.getCurrentWindow().minimize();

Solution 5

Minimizing a screen from the renderer is very easy. Using the remote object we can be able to minimize the screen from the renderer. Suppose you have a button that triggers the screen minimization when it is clicked. Bellow is a function that does that.

const handleMinimise =()=>{
    remote.BrowserWindow.getFocusedWindow().minimize();
}

But first of all you have to require remote from electron as follows

const electron = require("electron")
const remote = electron.remote

Or As follow

const { remote } = require("electron")

View more solutions

Comments

[Megha Dev]

how can I set this id at the time of creation?

[Jignesh Gothadiya]

this.$electron.remote variable is not defined in my project so I am getting error like can not get BrowserWindow property for undefined

[li x]

@JigneshGothadiya Hey Jignesh, I'm not very familiar with the documentation but I'd presume by now they may have changed the electron api for the renderer, check the docs. If not then you've more than likely got something else wrong with your code than this snippet.

[Muhammed Rahif]

Hey there is breaking change on electron remote, so the remote object moved from module electron to @electron/remote. Breaking changes info here

[Muhammed Rahif]

So you can use it now by import { BrowserWindow } from "@electron/remote";