First things first, let’s set up a basic Electron.js project:<\/p>\n\n\n\n
1. Initialize a new Node.js project<\/p>\n\n\n\n
mkdir project_name && cd project_name\nnpm init -y<\/code><\/pre>\n\n\n\n<\/p>\n\n\n\n
2. Install Electron.js<\/p>\n\n\n\n
npm install electron<\/code><\/pre>\n\n\n\n<\/p>\n\n\n\n
3. Create project files<\/p>\n\n\n\n
project_name\/\n\u251c\u2500\u2500 icon.png\n\u251c\u2500\u2500 index.html\n\u251c\u2500\u2500 index.js\n\u251c\u2500\u2500 node_modules\n\u251c\u2500\u2500 package.json\n\u2514\u2500\u2500 package-lock.json<\/code><\/pre>\n\n\n\n– `index.html` for the application’s UI.<\/p>\n\n\n\n
– `index.js` for Electron main process code.<\/p>\n\n\n\n
– An icon file (`icon.png`) for the tray icon.<\/p>\n\n\n\n
– add `start` command in package.json like this.<\/p>\n\n\n\n
{\n \"name\": \"project_name\",\n \"version\": \"1.0.0\",\n \"description\": \"\",\n \"main\": \"index.js\",\n \"scripts\": {\n \"test\": \"echo \\\"Error: no test specified\\\" && exit 1\",\n \"start\": \"electron .\"\n },\n \"keywords\": [],\n \"author\": \"\",\n \"license\": \"ISC\",\n \"dependencies\": {\n \"electron\": \"^29.0.1\"\n }\n}<\/code><\/pre>\n\n\n\n<\/p>\n\n\n\n
Implementing Tray Icon Functionality<\/strong><\/p>\n\n\n\nNext, let’s dive into implementing the tray icon functionality in `index.js` file:<\/p>\n\n\n\n
const { app, Tray, BrowserWindow } = require('electron');\nconst path = require('path');\n\nlet tray = null;\nlet mainWindow = null;\n\napp.on('ready', () => {\n tray = new Tray(path.join(__dirname, 'icon.png'));\n\n mainWindow = new BrowserWindow({\n width: 800,\n height: 600,\n show: false,\n webPreferences: {\n nodeIntegration: true\n }\n });\n\n mainWindow.loadFile('index.html');\n\n tray.on('click', () => {\n mainWindow.isVisible() ? mainWindow.hide() : mainWindow.show();\n });\n});<\/code><\/pre>\n\n\n\n<\/p>\n\n\n\n
Running Your Electron.js Application<\/strong><\/p>\n\n\n\nTo run Electron.js application, execute the following command in the terminal:<\/p>\n\n\n\n
npm start<\/code><\/pre>\n\n\n\n<\/p>\n\n\n\n
This command will start Electron application, and we should see the tray icon appear in our system tray. Clicking on the tray icon should toggle the visibility of the application window.<\/p>\n\n\n\n
Conclusion<\/strong><\/p>\n\n\n\nIntegrating tray icons into Electron.js application is a straightforward process that can greatly improve user experience. Whether it’s for displaying notifications, providing quick access to features, or simply adding a professional touch to our app, tray icons are a valuable addition to any desktop application.<\/p>\n\n\n\n
With Electron.js, implementing tray icons becomes seamless, allowing us to focus on crafting an exceptional user experience for our desktop application. So why not enhance our Electron.js app with a sleek tray icon for innovative ideas?<\/p>\n\n\n\n
Hope you enjoy that.
By Asahi<\/p>\n
\n <\/g:plusone><\/div>\n
![\"\u3053\u306e\u30a8\u30f3\u30c8\u30ea\u30fc\u3092\u306f\u3066\u306a\u30d6\u30c3\u30af\u30de\u30fc\u30af\u306b\u8ffd\u52a0\"](\"\/\/b.hatena.ne.jp\/images\/entry-button\/button-only@2x.png\")
<\/a>