Значок в трее

Трей — область у часов на панели задач Windows, строка меню справа вверху в macOS. Значок там позволяет программе работать в фоне: окно скрыто, а заметку можно открыть одним щелчком. Значок создаётся классом Tray в главном процессе.

Картинка значка

Положите в проект файл assets/tray.png размером 16 на 16 точек (можно добавить tray@2x.png размером 32 на 32 для экранов высокой плотности). Electron сам выберет подходящий размер.

Картинка с Template в имени в macOS автоматически перекрашивается под светлую и тёмную тему.

Создание значка

// main.js
const { app, BrowserWindow, Tray, Menu } = require('electron');
const path = require('node:path');
 
let tray = null;
 
app.whenReady().then(() => {
  tray = new Tray(path.join(__dirname, 'assets', 'tray.png'));
  tray.setToolTip('Заметки');
  createWindow();
});

После запуска в трее появится значок. При наведении мыши видна подсказка «Заметки».

Меню значка

// main.js
tray.setContextMenu(Menu.buildFromTemplate([
  { label: 'Показать', click: () => win.show() },
  { label: 'Новая заметка', click: () => {
    win.show();
    win.webContents.send('menu:new-note');
  } },
  { type: 'separator' },
  { role: 'quit', label: 'Выход' },
]));

Здесь win — главное окно, сохранённое в переменной на уровне модуля. В Windows меню открывается правым щелчком, в macOS — любым щелчком по значку. Пункт «Новая заметка» использует тот же канал, что и меню приложения.

Сворачивание в трей

Чтобы крестик прятал окно, а не закрывал программу, перехватим событие close:

// main.js
let isQuitting = false;
 
app.on('before-quit', () => {
  isQuitting = true;
});
 
win.on('close', (event) => {
  if (!isQuitting) {
    event.preventDefault();
    win.hide();
  }
});

event.preventDefault() отменяет закрытие, и окно просто скрывается. При выходе через меню «Выход» сначала срабатывает before-quit, флаг становится true, и окно закрывается по-настоящему.

Щелчок по значку

// main.js
tray.on('click', () => {
  if (win.isVisible()) {
    win.hide();
  } else {
    win.show();
  }
});

В Windows щелчок левой кнопкой по значку показывает и прячет окно.

Частая ошибка

Если создать значок в локальной переменной, например const tray = new Tray(...) внутри функции, через некоторое время он исчезнет: сборщик мусора удалит объект, на который больше нет ссылок. Храните значок в переменной на уровне модуля, как let tray в примере.