電子-システムトレイ

システムトレイは、アプリケーションウィンドウ外のメニューです。 MacOSおよびUbuntuでは、画面の右上隅にあります。 Windowsでは、右下隅にあります。 Electronを使用して、システムトレイにアプリケーションのメニューを作成できます。

新しい main.js ファイルを作成し、次のコードを追加します。システムトレイアイコンに使用できるpngファイルを用意します。

const {app, BrowserWindow} = require('electron')
const url = require('url')
const path = require('path')

let win

function createWindow() {
   win = new BrowserWindow({width: 800, height: 600})
   win.loadURL(url.format ({
      pathname: path.join(__dirname, 'indexl'),
      protocol: 'file:',
      slashes: true
   }))
}

app.on('ready', createWindow)

基本的なブラウザウィンドウをセットアップした後、次の内容で新しい indexl ファイルを作成します-

<!DOCTYPE html>
<html>
   <head>
      <meta charset = "UTF-8">
      <title>Menus</title>
   </head>
   <body>
      <script type = "text/javascript">
         const {remote} = require('electron')
         const {Tray, Menu} = remote
         const path = require('path')

         let trayIcon = new Tray(path.join('','/home/ayushgp/Desktop/images.png'))

         const trayMenuTemplate = [
            {
               label: 'Empty Application',
               enabled: false
            },

            {
               label: 'Settings',
               click: function () {
                  console.log("Clicked on settings")
               }
            },

            {
               label: 'Help',
               click: function () {
                  console.log("Clicked on Help")
               }
            }
         ]

         let trayMenu = Menu.buildFromTemplate(trayMenuTemplate)
         trayIcon.setContextMenu(trayMenu)
      </script>
   </body>
</html>

Trayサブモジュールを使用してトレイを作成しました。次に、テンプレートを使用してメニューを作成し、さらにメニューをトレイオブジェクトに添付しました。

次のコマンドを使用してアプリケーションを実行します-

$ electron ./main.js

上記のコマンドを実行するとき、使用したアイコンのシステムトレイを確認します。私はアプリケーションにスマイリーフェイスを使用しました。上記のコマンドは、次の出力を生成します-

トレイ

Electron-system-tray

電子-システムトレイ