前言
公司最近配的一台螢幕，沒辦法調整亮度，亮得要命，眼睛要瞎掉了
所以只好自立自強搞一個螢幕遮罩
第一章：顯示 Electron 視窗，可調整透明度
本章節內容
參數維護移植到 main/js
第一步：以 overlaySettings 維護 opacity
- 開啟
src/main.js - 增加
overlaySettings，設定opacity
// src/main.js
const { app, BrowserWindow, screen } = require('electron');
const path = require('path');
// 維護 opacity
let overlaySettings = { // 👈 這裡設定
opacity: 0.9 // 故意調成 0.9 確認前端有吃到
}
function createWindow() {
...
- win 完成載入後，發送
init-settings事件來傳遞overlaySettings
const { app, BrowserWindow, screen } = require('electron')
const path = require('path')
let overlaySettings = {
opacity: 0.9,
}
function createWindow() {
...
win.loadFile(path.join(__dirname, 'index.html'))
win.once('ready-to-show', () => {
win.show()
win.setAlwaysOnTop(true, 'screen-saver')
// 當網頁載入完成後，把初始值丟給前端
win.webContents.send('init-settings', overlaySettings) // 👈 這裡設定
})
}
app.whenReady().then(createWindow)
第二步：接收 win 事件，初始化 --overlay-opacity
- 開啟
src/index.html <script>重寫：
使用ipcRenderer接收 win 事件，設定opacityInput、--overlay-opacity
<!-- src/index.html -->
<!DOCTYPE html>
<html lang="en">
....
</body>
...
<script>
const { ipcRenderer } = require('electron')
const overlay = document.getElementById('overlay')
const opacityInput = document.getElementById('opacityInput')
// 接收來自 main.js 的初始設定
ipcRenderer.on('init-settings', (event, settings) => {
opacityInput.value = settings.opacity
applyStyle(settings)
})
function applyStyle({ opacity }) {
document.body.style.setProperty('--overlay-opacity', opacity)
}
</script>
</body>
</html>
執行 npm start
✅ 確認顯示畫面灰偏黑，右上面板操作沒反應
第三步：綁定 opacityInput 的 輸入事件，向 main.js 傳遞最新參數
增加 handleUpdate 方法，監控 opacityInput 的 輸入事件
以 'upload-settings' 事件透過 ipcRenderer 發送最新參數給 main.js
<!-- src/index.html -->
<!DOCTYPE html>
<html lang="en">
....
</body>
...
<script>
const { ipcRenderer } = require('electron');
const overlay = document.getElementById('overlay');
const opacityInput = document.getElementById('opacityInput');
// 接收來自 main.js 的初始設定
ipcRenderer.on('init-settings', (event, settings) => {
opacityInput.value = settings.opacity;
applyStyle(settings);
});
function applyStyle({ opacity }) {
document.body.style.setProperty('--overlay-opacity', opacity);
}
function handleUpdate() {
const newSettings = {
opacity: opacityInput.value
}
applyStyle(newSettings);
ipcRenderer.send('upload-settings', newSettings);
}
opacityInput.oninput = handleUpdate;
</body>
</html>
第四步：main.js 接收到 upload-settings 事件附帶的最新參數
- 開啟
src/main.js - 載入
ipcMain物件
// src/main.js
const { app, BrowserWindow, screen, ipcMain } = require('electron')
...
- 增加
upload-settings監聽事件
// src/main.js
const { app, BrowserWindow, screen, ipcMain } = require('electron')
const path = require('path')
let overlaySettings = {
opacity: 0.9,
}
function createWindow() {
const { width, height } = screen.getPrimaryDisplay().workAreaSize
const win = new BrowserWindow({
...
})
win.loadFile(path.join(__dirname, 'index.html'))
win.once('ready-to-show', () => {
win.show()
win.setAlwaysOnTop(true, 'screen-saver')
win.webContents.send('init-settings', overlaySettings)
})
// 👇 監聽來自前端的更新請求（當你在拉動拉霸時）
ipcMain.on('update-settings', (event, newSettings) => {
overlaySettings = { ...overlaySettings, ...newSettings }
})
}
app.whenReady().then(createWindow)
執行 npm start
✅ 右上面板操作，透明度會跟著改變
