kunzite-app/electron-tray-window

🖼️ Generates custom tray windows with Electron.js

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()

parameter	description	default
tray	Electron's tray object type
trayIconPath	Image file path
window	Electron's BrowserWindow object type
windowUrl	Html etc. file path or website url
width	Window width	200px
height	Window height	200px
margin_x	Vertical distance between window and tray icon	0px
margin_y	Horizontal distance between window and tray icon	0px
framed	Is it window framed?	false

Other functions

function	description
setTray	Electron's tray object type.
setWindow	Electron's BrowserWindow object type
setWindowSize	Object type. Optional arguments width, height, margin_x, margin_y

IPC (Inter-Process Communication) Events

event	description
tray-window-ready	when created TrayWindow.
tray-window-clicked	when clicked tray icon
tray-window-visible	when window show up
tray-window-hidden	when window close down

Default Window Properties

properties	default in TrayWindow
width	200px
height	300px
maxWidth	200px
maxHeight	300px
show	false
frame	false
fullscreenable	false
resizable	false
useContentSize	true
transparent	true
alwaysOnTop	true
webPreferences{backgroundThrottling}	false

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