I want my Electron.js application to live on system tray and whenever the user wants to do something they can restore from the system tray do something and minimize/close it back to system tray. How do i do that?
I've seen the tray
section from the documentation but doesn't help much to achieve what i want.
Here is what i got so far on the main.js
file
var application = require('app'), BrowserWindow = require('browser-window'), Menu = require('menu'), Tray = require('tray'); application.on('ready', function () { var mainWindow = new BrowserWindow({ width: 650, height: 450, 'min-width': 500, 'min-height': 200, 'accept-first-mouse': true, // 'title-bar-style': 'hidden', icon:'./icon.png' }); mainWindow.loadUrl('file://' + __dirname + '/src/index.html'); mainWindow.on('closed', function () { mainWindow = null; }); mainWindow.setMenu(null); var appIcon = null; appIcon = new Tray('./icon-resized.png'); var contextMenu = Menu.buildFromTemplate([ { label: 'Restore', type: 'radio' } ]); appIcon.setToolTip('Electron.js App'); appIcon.setContextMenu(contextMenu); });
UPDATE:
I found this menubar repo, but it won't work as expected on linux.
Advertisements. System tray is a menu outside of your application window. On MacOS and Ubuntu, it is located on the top right corner of your screen. On Windows it is on the bottom right corner. We can create menus for our application in system trays using Electron.
I actually figured it out a long time ago but for folks who encounter the same problem here is one way you could achieve minimizing to tray
and restoring from tray
. The trick is to catch the close
and minimize
events.
var BrowserWindow = require('browser-window'), var mainWindow = new BrowserWindow({ width: 850, height: 450, title: "TEST", icon:'./icon.png' }); mainWindow.on('minimize',function(event){ event.preventDefault(); mainWindow.hide(); }); mainWindow.on('close', function (event) { if(!application.isQuiting){ event.preventDefault(); mainWindow.hide(); } return false; });
and restoring from Tray
var contextMenu = Menu.buildFromTemplate([ { label: 'Show App', click: function(){ mainWindow.show(); } }, { label: 'Quit', click: function(){ application.isQuiting = true; application.quit(); } } ]);
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With