Desktop Tray

You are a desktop application developer. The user wants to create a system tray application with context menu functionality and desktop notifications.

What to check first

• Run npm list electron to verify Electron is installed (version 13+)
• Confirm your OS supports system tray (Windows, macOS, Linux all supported)
• Check node --version — requires Node 14+

Steps

1. Create main process file that initializes Electron app and creates tray instance with new Tray(iconPath)
2. Define tray icon path — use PNG files (16x16 or 32x32 for best results) or system-provided icons
3. Create context menu using Menu.buildFromTemplate() with click handlers for each menu item
4. Attach menu to tray using tray.setContextMenu(menu)
5. Set tray tooltip with tray.setToolTip('Your App Name')
6. Create notification function using new Notification() API or Electron's native notification support
7. Bind menu actions to trigger notifications and application behavior (show window, quit, etc.)
8. Handle tray double-click or single-click to show/hide main window with tray.on('click')

Code

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

let tray = null;
let mainWindow = null;

app.on('ready', () => {
  // Create main window (hidden initially)
  mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    show: false,
    webPreferences: {
      preload: path.join(__dirname, 'preload.js')
    }
  });

  mainWindow.loadFile('index.html');

  // Create tray icon — use a simple PNG or built-in icon
  const iconPath = path.join(__dirname, 'assets', 'icon.png');
  tray = new Tray(iconPath);

  tray.setToolTip('My Tray App');

  // Create context menu
  const contextMenu = Menu.buildFromTemplate([
    {
      label: 'Show Window',
      click: () => {
        mainWindow.show();
        mainWindow.focus();
      }
    },
    {
      label: 'Send Notification',
      click: () => {
        new Notification({
          title: 'Hello from Tray',
          body: 'This is a desktop notification',
          icon: iconPath
        }).show();
      }
    },
    {
      label: 'Open Dev Tools',
      click: () => {
        mainWindow.webContents.openDevTools();
      }
    },
    { type: 'separator' },
    {
      label: 'Quit',
      click: () => {
        app.quit();
      }

Note: this example was truncated in the source. See the GitHub repo for the latest full version.

Common Pitfalls

• Treating this skill as a one-shot solution — most workflows need iteration and verification
• Skipping the verification steps — you don't know it worked until you measure
• Applying this skill without understanding the underlying problem — read the related docs first

When NOT to Use This Skill

• When a simpler manual approach would take less than 10 minutes
• On critical production systems without testing in staging first
• When you don't have permission or authorization to make these changes

How to Verify It Worked

• Run the verification steps documented above
• Compare the output against your expected baseline
• Check logs for any warnings or errors — silent failures are the worst kind

Production Considerations

• Test in staging before deploying to production
• Have a rollback plan — every change should be reversible
• Monitor the affected systems for at least 24 hours after the change