Atom Electron - Close the window with javascript

I'm using Electron (formerly atom-shell) and would like to have a minimalist frame window so that the three OSX window buttons (close, maximize, minimize) are visible from within the HTML page.

I set the Electron option frame to false when defining the BrowserWindow to have a chromeless, frameless window.

And I thought I could handle the close button with something like this:

<a btn href="#" id="close" onclick="window.top.close(); return false"></a>

With no luck, sadly. Any idea how to achieve this?

You must access the BrowserWindow object created by your main process and call the minimize, maximize, and close methods on that. You can access this using the remote module. Here is an example of binding all three buttons:

  const remote = require('electron').remote;

  document.getElementById("min-btn").addEventListener("click", function (e) {
       var window = remote.getCurrentWindow();
       window.minimize(); 
  });

  document.getElementById("max-btn").addEventListener("click", function (e) {
       var window = remote.getCurrentWindow();
       if (!window.isMaximized()) {
 		   window.maximize();		   
       } else {
	       window.unmaximize();
	   }
  });

  document.getElementById("close-btn").addEventListener("click", function (e) {
       var window = remote.getCurrentWindow();
       window.close();
  }); 

assuming your min, max, close buttons have ids of min-btn, max-btn, and close-btn, respectively.

You can view the full documentation for the BrowserWindow along with other functionality you might need here: http://electron.atom.io/docs/v0.28.0/api/browser-window/.

It might also help you to take a look at a tutorial I wrote about building a chromeless window that looks like Visual Studio here: http://www.mylifeforthecode.com/making-the-electron-shell-as-pretty-as-the-visual-studio-shell. Your question is covered along with some css to properly position the buttons.

I have declarate my Window:

const electron = require('electron')
const path = require('path')
const BrowserWindow = electron.remote.BrowserWindow

const notifyBtn = document.getElementById('notifyBtn')

notifyBtn.addEventListener('click',function(event){

    const modalPath = path.join('file://', __dirname,'add.html')
    let win = new BrowserWindow({ webPreferences: {nodeIntegration: true}, frame: false, transparent: true, alwaysOnTop:true, width: 400, height: 200 })
    win.on('close',function(){win = null})
    win.loadURL(modalPath)
    win.show()

})

and for close this:

const electron = require('electron')
const path = require('path')
const remote = electron.remote

const closeBtn = document.getElementById('closeBtn')

closeBtn.addEventListener('click', function (event) {
    var window = remote.getCurrentWindow();
    window.close();
})

To answer this question with an alternative technology.

What you want to do is trivially easy in NW.js, compared to Electron (as is always the case).

<a href="#" onclick="nw.Window.get().close()"></a>

The min/max/restore stuff is set up automatically, unless you are hiding the window frame. In which case, here is a simple demo repo:

• https://github.com/nwutils/frameless-example