Electron — Taskbar Widgets

Image for post
Image for post
Photo by Nick Fewings on Unsplash

Electron is a framework that lets us create cross-platform desktop apps.

The apps are created by creating web apps that are wrapped with a wrapper.

In this article, we’ll look at the add recent documents menu to an Electron app.

Recent Documents

We can use the app.addRecentDocument method to create a recent documents menu.

For example, we can write:

in main.js .

We call the addRecentDocument method to add a recent document.

Then app.clearRecentDocuments() method clears the recent documents list.

On Windows, we’ve to register our app by following these Application Registration instructions to register our app.

This way, the recent document items would appear on the list.

On macOS, when a file is requested from the recent documents menu, the openp-file event of app will be emitted from it.

Progress Bar in Taskbar

We can display the process bar in the taskbar by using the win.setProgressBar method.

For example, in main.js , we can write:

We pass an argument between 0 and 1 to the setProgressBar method to display the process on the taskbar.

This feature works on Windows, macOS, and Unity.

macOS Dock

On macOS, we can configure the Dock by call app.dock.setMenu to create a dock menu.

For example, in main.js , we write:

We created the menu with the buildFromTemplate method.

The array has the menu entry to create the items.

Then we pass the menu to the app.dock.setMenu method to set the menu.

Windows Taskbar

We can also customize the Windows taskbar.

We can create a JumpList, add custom thumbnails and toolbars, icon overlays, and flash frames.

For example, in main.js , we can write:

We called app.setUserTasks with an array to add entries into the right-click menu on our app’s taskbar entry.

Thumbnail Toolbars

We can add a thumbnail toolbar by using the win.setThumbarButtons method.

For example, we can write:

in main.js to add thumbnails to our thumbnail toolbar.

We can pass in an empty array to empty the thumbnail toolbar.


We can display different things in the taskbar like icons and buttons.

Written by

Web developer. Subscribe to my email list now at http://jauyeung.net/subscribe/. Email me at hohanga@gmail.com

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store