Tray Applications & Badges

Intro to Tray & Dock Apps

Why Use Tray/Dock Features?

Creating a Basic Tray Icon

const { app, Tray } = require('electron');
const path = require('path');

let tray = null;
app.whenReady().then(() => {
  const iconPath = path.join(__dirname, 'icon.png');
  tray = new Tray(iconPath);
  tray.setToolTip('My First Electron Tray App');
});

Tray Icon in Action

const { app, Tray } = require('electron');
const path = require('path');

let tray = null;

app.whenReady().then(() => {
  // IMPORTANT: For this code to run, place an 'icon.png' file
  // in the same directory as your main.js file.
  const iconPath = path.join(__dirname, 'icon.png');
  tray = new Tray(iconPath);
  tray.setToolTip('My Simple Tray App');
  console.log('Tray icon created. Check your system tray/dock!');
});

app.on('window-all-closed', () => {
  // For a tray app, you might want it to stay running even if windows close.
  // This example quits if no windows are open and not on macOS.
  if (process.platform !== 'darwin') {
    app.quit();
  }
});

app.on('before-quit', () => {
  if (tray) tray.destroy(); // Clean up tray icon before quitting
});

Interacting with the Tray Icon

Adding a Context Menu

const { Menu } = require('electron');

const contextMenu = Menu.buildFromTemplate([
  { label: 'Option One', type: 'normal', click: () => console.log('Option One clicked!') },
  { label: 'Option Two', type: 'normal', click: () => console.log('Option Two clicked!') },
  { type: 'separator' }, // A visual separator
  { label: 'Quit', role: 'quit' } // Standard quit option
]);

tray.setContextMenu(contextMenu);

Tray Menu in Action

const { app, BrowserWindow, Tray, Menu } = require('electron');
const path = require('path');

let mainWindow;
let tray;

function createWindow () {
  mainWindow = new BrowserWindow({
    width: 400,
    height: 300,
    show: false, // Start hidden
    webPreferences: {
      nodeIntegration: true,
      contextIsolation: false
    }
  });

  // A very simple HTML content for the window
  mainWindow.loadURL(`data:text/html;charset=utf-8,
    <h1>Hello from Electron!</h1>
    <p>This is a hidden window. Click the tray icon or use its menu.</p>
    <button onclick="window.close()">Close Window</button>
  `);
}

app.whenReady().then(() => {
  createWindow();

  const iconPath = path.join(__dirname, 'icon.png'); // Place 'icon.png' here
  tray = new Tray(iconPath);
  tray.setToolTip('Electron Tray App with Menu');

  const contextMenu = Menu.buildFromTemplate([
    { label: 'Show Window', click: () => mainWindow.show() },
    { label: 'Hide Window', click: () => mainWindow.hide() },
    { type: 'separator' },
    { label: 'Quit', click: () => app.quit() }
  ]);
  tray.setContextMenu(contextMenu);

  tray.on('click', () => {
    mainWindow.isVisible() ? mainWindow.hide() : mainWindow.show();
  });

  // Ensure app doesn't quit when window is closed
  mainWindow.on('close', (event) => {
    if (!app.isQuitting) { // Only hide if not explicitly quitting
      event.preventDefault();
      mainWindow.hide();
    }
  });

  app.on('activate', () => {
    if (BrowserWindow.getAllWindows().length === 0) {
      createWindow();
    }
  });
});

app.on('window-all-closed', () => {
  // If not macOS, and no tray icon, then quit
  if (process.platform !== 'darwin' && !tray) {
    app.quit();
  }
});

app.on('before-quit', () => {
  app.isQuitting = true; // Set a flag
  if (tray) tray.destroy();
});

Dock Badges (macOS Only)

const { app } = require('electron');

// To set a badge:
if (process.platform === 'darwin') {
  app.setBadgeCount(5);
}

// To clear a badge:
if (process.platform === 'darwin') {
  app.setBadgeCount(0);
}

Dock Badge in Action

const { app, BrowserWindow } = require('electron');
const path = require('path');

let mainWindow;

function createWindow () {
  mainWindow = new BrowserWindow({
    width: 400,
    height: 300,
    webPreferences: {
      nodeIntegration: true,
      contextIsolation: false
    }
  });

  mainWindow.loadURL(`data:text/html;charset=utf-8,
    <h1>Electron Dock Badge Demo</h1>
    <p>Check your macOS dock icon for a badge!</p>
    <p>The badge will appear shortly after launch.</p>
  `);
}

app.whenReady().then(() => {
  createWindow();

  if (process.platform === 'darwin') {
    // Set a badge count after a short delay
    setTimeout(() => {
      app.setBadgeCount(5);
      console.log('Dock badge set to 5. Look at your macOS dock icon!');
    }, 3000); // 3 seconds delay

    // Clear the badge after another delay
    setTimeout(() => {
      app.setBadgeCount(0);
      console.log('Dock badge cleared. Icon should be normal.');
    }, 8000); // 8 seconds total delay
  } else {
    console.log('Dock badges are a macOS-specific feature and will not appear on this OS.');
  }

  app.on('activate', () => {
    if (BrowserWindow.getAllWindows().length === 0) {
      createWindow();
    }
  });
});

app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit();
  }
});

Quick Check: Tray Icons

Recap: Tray & Badges