Add System Tray Icon In ElectronJs Application
Posted By : Satendra Shakya | 24-Sep-2018
ElectronJs has a built-in API to add System tray icon in the desktop application. Let's learn how to add it in our application Assuming you have a running
1. Get a tray icon and save it to any location inside the project. for me, it is in my root directory named icon.png
2. Import tray, Menu from electron package.
const {app, Menu, Tray} = require('electron')
3. take a variable and set it to null for further initializing tray in it.
let appIcon = null
NOTE: it necessary to take a null variable for initializing tray. If we don't do the tray will disappear after a few seconds because of the variable become garbage. 4. Now create a function named createdSystemTray() and paste the following code inside it.
appIcon = new Tray(iconPath);
var contextMenu = Menu.buildFromTemplate([
{
label: 'Item1',
type: 'radio',
icon: iconPath
},
{
label: 'Item2',
submenu: [
{ label: 'submenu1' },
{ label: 'submenu2' }
]
},
{
label: 'Item3',
type: 'radio',
checked: true
},
{
label: 'Toggle DevTools',
accelerator: 'Alt+Command+I',
click: function() {
win.show();
win.toggleDevTools();
}
},
{ label: 'Quit',
accelerator: 'Command+Q',
selector: 'terminate:',
}
]);
appIcon.setToolTip('This is my application.');
appIcon.setContextMenu(contextMenu)
5. call that function from the ready event handler of the app. overall the main file of electron application look like below...
const {app, Tray, Menu, BrowserWindow} = require('electron');
const path = require('path');
const iconPath = path.join(__dirname, 'icon.png');
let appIcon = null;
let win = null;
app.on('ready', function(){
win = new BrowserWindow({show: false});
createSystemTray();
});
createSystemTray(){
appIcon = new Tray(iconPath);
var contextMenu = Menu.buildFromTemplate([
{
label: 'Item1',
type: 'radio',
icon: iconPath
},
{
label: 'Item2',
submenu: [
{ label: 'submenu1' },
{ label: 'submenu2' }
]
},
{
label: 'Item3',
type: 'radio',
checked: true
},
{
label: 'Toggle DevTools',
accelerator: 'Alt+Command+I',
click: function() {
win.show();
win.toggleDevTools();
}
},
{ label: 'Quit',
accelerator: 'Command+Q',
selector: 'terminate:',
}
]);
appIcon.setToolTip('This is my application.');
appIcon.setContextMenu(contextMenu);
}
now run the application and you will see an icon in your system tray.
Although the system tray has some platform limitations, which are given below...
1. The Tray will be shown if it has a context menu.
2. click event is ignored if the tray is used in Linux distribution.
3. in Linux distro we have to call every time when we make changes in menu items.
Cookies are important to the proper functioning of a site. To improve your experience, we use cookies to remember log-in details and provide secure log-in, collect statistics to optimize site functionality, and deliver content tailored to your interests. Click Agree and Proceed to accept cookies and go directly to the site or click on View Cookie Settings to see detailed descriptions of the types of cookies and choose whether to accept certain cookies while on the site.
About Author
Satendra Shakya
An experienced mean stack developer having work experience in nodeJs, Angular and MongoDB. Apart from these he likes to play chess and solving riddles like Rubik cubes.