sfatihk / Electron Tray Window

Quickly create customizable menu/pop-up for your application in system tray.

Electron Tray Window, basically places the window near the tray icon. While these happening, you can customize window / tray or tracking the events.

Preview demo project

Install

npm install electron-tray-window

or

yarn add electron-tray-window

Usage

const trayWindow = require("electron-tray-window");

You can use different ways. "setOptions()" function accepts object value.

If you have already created tray or window outside TrayWindow, you can pass as arguments to .setOptions() function,

//...

tray = new Tray(...);
window = new BrowserWindow(...);
window.loadUrl(...);

trayWindow.setOptions({tray: tray,window: window});

//...

or if you pass just tray icon path or window url, it prepare automatically.

//...

trayWindow.setOptions({
  trayIconPath: "...",
  windowUrl: "..."
});

//...

By the way you can make different combines. But object must contains;

• tray or trayIconPath
• window or windowUrl

//...

tray = new Tray(...);
trayWindow.setOptions({
  tray: tray,
  windowUrl: "..."
});

//...

window = new BrowserWindow(...);

trayWindow.setOptions({
  trayIconPath: "...",
  window: window
});

//...

Other Functions

You can always change TrayWindow with setOptions() and you can use different functions after setOptions().

.setTray( tray )

//...

trayWindow.setOptions({...});

//...

differentTray = new Tray(...);

trayWindow.setTray(differentTray); //now, follows different tray

//..

.setWindow( window )

//...

trayWindow.setOptions({...});

//...

differentWindow = new BrowserWindow(...);

trayWindow.setWindow(differentWindow); //now, shows different window

//..

.setWindowSize( object )

//...

trayWindow.setOptions({...});

//...

differentWindow = new BrowserWindow(...);

trayWindow.setWindowSize({
    width    : 200,    //optional
    height   : 300,   //optional
    margin_x : 10,  //optional
    margin_y : 10   //optional
});

//..

Events

You can listen events. All event contains window and tray objects

//...
const { ipcMain } = electron;

ipcMain.on("tray-window-ready", (e, a) => {
  console.log("tray window is ready");
  //console.log(e.window)
  //console.log(e.tray)
});

ipcMain.on("tray-window-clicked", (e, a) => {
  console.log("clicked the tray icon");
  //console.log(e.window)
  //console.log(e.tray)
});

ipcMain.on("tray-window-visible", (e, a) => {
  console.log("tray window is visible now");
  //console.log(e.window)
  //console.log(e.tray)
});

ipcMain.on("tray-window-hidden", (e, a) => {
  console.log("tray window is hidden now");
  //console.log(e.window)
  //console.log(e.tray)
});

//..

Overview

All parameters of setOptions()

Other functions

IPC (Inter-Process Communication) Events

Default Window Properties

P.S. : if you use this way setOptions({windowUrl:"..."}), default window values uses.