Skip to content

sfatihk/electron-tray-window

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

49 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

npm version npm version npm version npm version npm version

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.