Creating Tray Applications with Electron

Electron is a technology that allows developers to create desktop applications using web technologies. This approach has a few advantages. First, it will enable us to create a desktop application using web technologies. Second, it allows us to create a single application that works on Windows and Mac.

There are many good examples of applications built on these technologies. For example, VS Code, an application we use all use, is built using Electron.

Electron makes it pretty easy to get started. Start by cloning a repository.

git clone https://github.com/electron/electron-quick-start

You will need to jump into that directory.

cd election-quick-start

Then do an npm install.

npm install

Then you can just run the application using npm.

npm start

When creating Tray applications (those always-running apps that sit on a Mac’s menu bar), the starting point Electron app requires a few modifications. The big change is importing the Tray module and then creating an instance of the Tray class.

Below are the changes to the main.js to support a Tray. If you look at this version versus the original, most of the changes are removals.