Electron 全屏遮罩

 1const { app, BrowserWindow, screen } = require('electron');
 2
 3class Main {
 4  win;
 5
 6  constructor() {
 7    // Linux 中禁用 GPU 渲染，否则无法透明窗口
 8    if (process.platform === 'linux') {
 9      app.disableHardwareAcceleration();
10    }
11    
12    app.whenReady().then(() => {
13      this._createWindow();
14      this._forMacOs();
15    });
16  }
17
18  _createWindow() {
19    // `bounds`：使覆盖全屏幕，包含 MacOS Menu Bar
20    // `size`：仅应用区大小
21    const { width, height, x, y } = screen.getPrimaryDisplay().bounds;
22
23    this.win = new BrowserWindow({
24      width,
25      height,
26      x,
27      y,
28      hasShadow: false,
29      transparent: true,
30      frame: false,
31      movable: false,
32      resizable: false,
33
34      // 不会将窗口置于 MacOS Menu Bar 之上
35      // alwaysOnTop: true,
36
37      // Windows 下必须配置，而 MacOS 则不需要（否则会打开一个全屏新桌面）
38      fullscreen: process.platform !== 'darwin',
39      // 1）使覆盖全屏幕，包含 MacOS Menu Bar
40      enableLargerThanScreen: true,
41
42      // Windows 下必须配置，否则会禁用视频播放
43      type: 'toolbar',
44
45      webPreferences: {
46        nodeIntegration: true,
47        contextIsolation: false
48      }
49    });
50
51    // 2）使覆盖全屏幕，包含 MacOS Menu Bar
52    this.win.setAlwaysOnTop(true, 'screen-saver');
53
54    this.win.loadFile('renderer/index.html');
55  }
56
57  _forMacOs() {
58    app.on('activate', () => {
59      if (BrowserWindow.getAllWindows().length === 0) this._createWindow();
60    });
61
62    app.on('window-all-closed', () => {
63      if (process.platform !== 'darwin') app.quit();
64    });
65  }
66}
67
68new Main();