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);
}

Customizing the Icon

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

tray = new Tray('path/to/new_icon.png');

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);
}

Explanation

1. Show App Button:

   {
     label: 'Show App',
     click: () => {
       mainWindow.show();
     }
   }

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

1. Hide App Button:

   {
     label: 'Hide App',
     click: () => {
       mainWindow.hide();
     }
   }

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

1. Exit Button:

   {
     label: 'Exit',
     click: () => {
       app.quit();
     }
   }

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);
}

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.