Samuel AttardandClaude
ad3a896a52
* build: check the formatting of docs code blocks with oxfmt lint-roller 4 splits the old `lint-roller-markdown-standard` into an oxlint half and an oxfmt half. This wires up the second one: `lint:fmt-in-markdown` runs `lint-roller-markdown-oxfmt` over docs/ as part of `lint:docs`, using docs/.oxfmtrc.json, which matches the repo's .oxfmtrc.json except that docs snippets keep their semicolon-free style. `--fix` writes the formatted blocks back, and a block can opt out with `@noformat` in its info string. * docs: format code blocks with oxfmt Result of `lint-roller-markdown-oxfmt --fix` with docs/.oxfmtrc.json, plus the @ts-expect-error line anchors (and one Docusaurus highlight marker) that moved with the reformat. The Babel output sample in the ESM guide and the two excerpts of repo source in creating-api.md are marked @noformat, and the contentTracing example passes an async callback instead of wrapping an IIFE so that it does not need a leading semicolon. --------- Co-authored-by: Claude <noreply@anthropic.com>
3.5 KiB
title, description, slug, hide_title
| title | description | slug | hide_title |
|---|---|---|---|
| Tray Menu | Create a Tray icon with its own menu in the system's notification area. | tray | true |
Tray Menu
This guide will take you through the process of creating an icon with its own context menu to the system tray.
- On macOS, the icon will be located on the top right corner of your screen in the menu bar extras area.
- On Windows, the icon will be located in the notification area at the end of the taskbar.
- On Linux, the location of the Tray will differ based on your desktop environment.
Creating a Tray icon
The tray icon for your Electron app needs to be created programmatically with an instance of the Tray class. The class constructor requires a single instance of a NativeImage or a path to a compatible icon file.
Note
File formats vary per operating system. For more details, see the Platform Considerations section of the Tray API documentation.
Minimizing to tray
In order to keep the app and the system tray icon alive even when all windows are closed, you need to
have a listener for the window-all-closed event on the
app module. The base Electron templates generally listen for this event but quit the app on
Windows and Linux to emulate standard OS behavior.
app.on('window-all-closed', () => {
// having this listener active will prevent the app from quitting.
})
Attaching a context menu
You can attach a context menu to the Tray object by passing in a Menu instance
into the tray.setContextMenu function.
Note
Unlike with regular context menus, Tray context menus don't need to be manually instrumented using the
menu.popupAPI. Instead, the Tray object handles click events for you (although various click-related events exist on the API for advanced use cases).
const { nativeImage } = require('electron/common')
const { app, Tray, Menu } = require('electron/main')
// save a reference to the Tray object globally to avoid garbage collection
let tray
// 16x16 red circle data URL
const icon = nativeImage.createFromDataURL(
'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAACTSURBVHgBpZKBCYAgEEV/TeAIjuIIbdQIuUGt0CS1gW1iZ2jIVaTnhw+Cvs8/OYDJA4Y8kR3ZR2/kmazxJbpUEfQ/Dm/UG7wVwHkjlQdMFfDdJMFaACebnjJGyDWgcnZu1/lrCrl6NCoEHJBrDwEr5NrT6ko/UV8xdLAC2N49mlc5CylpYh8wCwqrvbBGLoKGvz8Bfq0QPWEUo/EAAAAASUVORK5CYII='
)
// The Tray can only be instantiated after the 'ready' event is fired
app.whenReady().then(() => {
tray = new Tray(icon)
const contextMenu = Menu.buildFromTemplate([{ role: 'quit' }])
tray.setContextMenu(contextMenu)
})
Tip
To learn more about crafting menus in Electron, see the Menus guide.
Warning
The
enabledandvisibilityproperties are not available for top-level menu items in the tray on macOS.
Runnable Fiddle demo
Below is a runnable example of attaching various menu items to the Tray's context menu that help control app state and interact with the Tray API itself.