Taskbar Customization

JumpList

Windows allows apps to define a custom context menu that shows up when users right-click the app’s icon in the taskbar. That context menu is called JumpList. You specify custom actions in the Tasks category of JumpList, as quoted from :

NOTE: The screenshot above is an example of general tasks of Internet Explorer

Unlike the dock menu in macOS which is a real menu, user tasks in Windows work like application shortcuts. For example, when a user clicks a task, the program will be executed with specified arguments.

To set user tasks for your application, you can use app.setUserTasks API.

Examples

Set user tasks

Starting with a working application from the , update the main.js file with the following lines:

Clear tasks list

To clear your tasks list, you need to call app.setUserTasks with an empty array in the main.js file.

const { app } = require('electron')

NOTE: The user tasks will still be displayed even after closing your application, so the icon and program path specified for a task should exist until your application is uninstalled.

As quoted from :

NOTE: The screenshot above is an example of thumbnail toolbar of Windows Media Player

To set thumbnail toolbar in your application, you need to use BrowserWindow.setThumbarButtons

Examples

Set thumbnail toolbar

Starting with a working application from the , update the main.js file with the following lines:

Clear thumbnail toolbar

To clear thumbnail toolbar buttons, you need to call BrowserWindow.setThumbarButtons with an empty array in the main.js file.

const { BrowserWindow } = require('electron')
const win = new BrowserWindow()
win.setThumbarButtons([])

On Windows, a taskbar button can use a small overlay to display application status.

As quoted from :

To set the overlay icon for a window, you need to use the BrowserWindow.setOverlayIcon API.

Example

Starting with a working application from the Quick Start Guide, update the file with the following lines:

On Windows, you can highlight the taskbar button to get the user’s attention. This is similar to bouncing the dock icon in macOS.

As quoted from :

Typically, a window is flashed to inform the user that the window requires attention but that it does not currently have the keyboard focus.

To flash the BrowserWindow taskbar button, you need to use the BrowserWindow.flashFrame API.

Example

Starting with a working application from the Quick Start Guide, update the main.js file with the following lines:

const { BrowserWindow } = require('electron')
const win = new BrowserWindow()
win.once('focus', () => win.flashFrame(false))
win.flashFrame(true)

NOTE: Don’t forget to call to turn off the flash. In the above example, it is called when the window comes into focus, but you might use a timeout or some other event to disable it.