Electron-桌面 App-螢幕遮罩(Screen mask) - 5

前言
公司最近配的一台螢幕，沒辦法調整亮度，亮得要命，眼睛要瞎掉了
所以只好自立自強搞一個螢幕遮罩

本章節內容
桌面下方工具列沒有遮到
桌面下方工具列要不要顯示 electron ?
隱藏到工具列右下角的系統匣（System Tray）中

桌面下方工具列沒有遮到

0. 開啟 src/main.js

1. 調整 BrowserWindow 設定 - fullscreen 設成 true

全螢幕

const win = new BrowserWindow({
  ...
  fullscreen: true, // 全螢幕
  ...
})

執行 npm start
✅ 下方工具列也有被遮到

桌面下方工具列要不要顯示 electron ?

這個操作因人而異，還是彈性一點透過面板自由設定

1. 先試試看能不能桌面下方工具列不要顯示 electron
   調整 BrowserWindow 設定 - skipTaskbar 設成 true

   const win = new BrowserWindow({
   ...
   skipTaskbar: true, // 不在工具列顯示
   ...
   })

   執行 npm start
   ✅ 確認 electron 圖示不見了
2. index.html 面板增加 "顯示於工具列" 勾勾

   <!-- src.index.html -->
   <label class="block select-none">
     顯示於工具列
     <input type="checkbox" id="showTaskbarCheck" />
   </label>

3. 增加 "顯示於工具列" click 監聽，發送 set-show-taskbar 事件

   <!-- src.index.html -->
   <script>
     ...
     const showTaskbarCheck = document.getElementById('showTaskbarCheck');
     ...
     showTaskbarCheck.onclick = (e) => ipcRenderer.send('set-show-taskbar', e.target.checked);
   </script>

4. main.js 接收 set-show-taskbar 事件

   // src/main.js
   ipcMain.on('set-show-taskbar', (event, active) => {
     win.setSkipTaskbar(!active)
   })

執行 npm start
✅ 確認"顯示於工具列"可以控制 electron 的顯示

隱藏到工具列右下角的系統匣（System Tray）中

在 Electron 中，如果你希望應用程式「不要佔據下方工具列（Taskbar/Dock）」，而是隱藏到右下角的 系統匣（System Tray） 中，你需要結合兩個步驟：

1. 隱藏工具列圖示： 透過 skipTaskbar 屬性。
2. 建立系統匣圖示： 透過 Tray 模組，這樣你才能在隱藏選單（小箭頭）裡找到它。

// src/main.js
const { app, BrowserWindow, screen, ipcMain } = require('electron')
const { Tray, Menu, nativeImage } = require('electron') // 👈 引入 Tray 和 Menu 模組。
function createWindow() {
  ...
  ...
  // --- 建立 Tray (系統匣圖示) ---
  const icon = nativeImage.createFromPath(path.join(__dirname, 'icon.png'));
  tray = new Tray(icon);
  // 設定滑鼠移上去顯示的文字
  tray.setToolTip('螢幕遮罩工具');
  // 建立右鍵選單
  const contextMenu = Menu.buildFromTemplate([
    { label: '顯示控制面板', click: () => win.webContents.send('show-panel', true) },
    { label: '隱藏控制面板', click: () => win.webContents.send('show-panel', false) },
    { label: '完全退出', click: () => app.quit() }
  ]);
  tray.setContextMenu(contextMenu);
  // 選用：點擊圖示時切換顯示/隱藏
  tray.on('click', () => {
    win.isVisible() ? win.hide() : win.show();
  });
}

<!-- src/index.html -->
<script>
  ...
  ipcRenderer.on('show-panel', (event, active) => {
    controlPanel.hidden = !active
  })
  ...
</script>