DEV Community

Fwl Dom
Fwl Dom

Posted on

how to show the app electronjs in the systemTray

Introduction

Electron JS is a popular framework for building desktop applications using web technologies like JavaScript, HTML, and CSS. One of the significant features of desktop applications is the ability to integrate them with the system tray, allowing users to access key functionalities and settings easily. This article will guide you through creating an Electron JS application and integrating it with the system tray.

Show the App in the System Tray

To display your application in the system tray, you need to create an instance of the Tray class from Electron. This instance will represent the app in the system tray with an icon.

Add the following lines to the main.js file:

const { app, BrowserWindow, Tray, Menu } = require('electron');
let mainWindow;
let tray;

app.on('ready', () => {
  mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true
    }
  });
  mainWindow.loadFile('index.html');
  createTray();
});

function createTray() {
  tray = new Tray('path/to/icon.png'); // Path to your tray icon
  const contextMenu = Menu.buildFromTemplate([
    {
      label: 'Show App',
      click: () => {
        mainWindow.show();
      }
    }
  ]);
  tray.setToolTip('My Electron App');
  tray.setContextMenu(contextMenu);
}
Enter fullscreen mode Exit fullscreen mode

Customizing the Icon

To change the tray icon, update the path in the Tray constructor:

tray = new Tray('path/to/new_icon.png');
Enter fullscreen mode Exit fullscreen mode

Ensure the path points to a valid image file that you want to use as your tray icon.

Adding Show, Hide, and Exit Buttons

To enhance the functionality of your system tray menu, you can add options to show, hide, and exit the application. Modify the main.js file as follows:

const { app, BrowserWindow, Tray, Menu } = require('electron');
let mainWindow;
let tray;

app.on('ready', () => {
  mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true
    }
  });
  mainWindow.loadFile('index.html');
  createTray();
});

function createTray() {
  tray = new Tray('path/to/icon.png'); // Path to your tray icon
  const contextMenu = Menu.buildFromTemplate([
    {
      label: 'Show App',
      click: () => {
        mainWindow.show();
      }
    },
    {
      label: 'Hide App',
      click: () => {
        mainWindow.hide();
      }
    },
    {
      label: 'Exit',
      click: () => {
        app.quit();
      }
    }
  ]);
  tray.setToolTip('My Electron App');
  tray.setContextMenu(contextMenu);
}
Enter fullscreen mode Exit fullscreen mode

Explanation

  1. Show App Button:
   {
     label: 'Show App',
     click: () => {
       mainWindow.show();
     }
   }
Enter fullscreen mode Exit fullscreen mode

This menu item will bring the application's window back into view when clicked.

  1. Hide App Button:
   {
     label: 'Hide App',
     click: () => {
       mainWindow.hide();
     }
   }
Enter fullscreen mode Exit fullscreen mode

This menu item will minimize the application to the system tray, hiding it from the taskbar.

  1. Exit Button:
   {
     label: 'Exit',
     click: () => {
       app.quit();
     }
   }
Enter fullscreen mode Exit fullscreen mode

This menu item will close the application when selected.

Example of a Complete Context Menu

You can further customize the context menu by adding more options, such as opening a settings window or displaying application information.

const { app, BrowserWindow, Tray, Menu } = require('electron');
let mainWindow;
let tray;

app.on('ready', () => {
  mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true
    }
  });
  mainWindow.loadFile('index.html');
  createTray();
});

function createTray() {
  tray = new Tray('path/to/icon.png'); // Path to your tray icon
  const contextMenu = Menu.buildFromTemplate([
    {
      label: 'Show App',
      click: () => {
        mainWindow.show();
      }
    },
    {
      label: 'Hide App',
      click: () => {
        mainWindow.hide();
      }
    },
    {
      label: 'Settings',
      click: () => {
        // Open a settings window
      }
    },
    {
      label: 'About',
      click: () => {
        // Show about information
      }
    },
    {
      label: 'Exit',
      click: () => {
        app.quit();
      }
    }
  ]);
  tray.setToolTip('My Electron App');
  tray.setContextMenu(contextMenu);
}
Enter fullscreen mode Exit fullscreen mode

Conclusion

By following these steps, you can create a desktop application with Electron JS that integrates seamlessly with the system tray. This integration enhances the user experience by providing easy access to essential app functionalities directly from the system tray. Whether itโ€™s showing, hiding, or exiting the application, the system tray offers a convenient way for users to interact with your app.

Top comments (0)