Electron 如何让窗口显示在全屏窗口上 （Mac/Windows）

在 Electron 开发中，有时我们希望让一个小窗口浮动在其他全屏应用之上，例如输入法、提示窗口或其他辅助功能。下面是一种实现此功能的方法：

const { app, BrowserWindow } = require("electron");
const path = require("path");

// 判断是否为 macOS
const is_mac = process.platform === "darwin";

// 如果是 macOS，则隐藏 dock 图标
if (is_mac) {
  app.dock.hide(); // - 1 -
}

// 创建浏览器窗口
mainWindow = new BrowserWindow({
  width: 300, // 窗口宽度
  height: 100, // 窗口高度
  frame: false, // 无边框
  show: false, // 初始不显示
  alwaysOnTop: true,
  icon: path.join(__dirname, "../../icons/png/1024x1024.png"),
  webPreferences: {
    preload: path.join(__dirname, "preload.js"),
  },
});

// 设置窗口始终在最前面
mainWindow.setAlwaysOnTop(true, "screen-saver"); // - 2 -
// 设置窗口在所有工作区都可见
mainWindow.setVisibleOnAllWorkspaces(true); // - 3 -

// 加载应用的 index.html
mainWindow.loadFile(path.join(__dirname, "../../public/index.html"));

// 当窗口失去焦点时，隐藏它
mainWindow.on("blur", () => {
  mainWindow.hide();
});

解释：

1. 隐藏 Dock 图标：在 macOS 上，通过隐藏 dock 图标，应用被视为“后台”应用，使其窗口更容易浮动在其他全屏应用之上。
2. 设置窗口始终在最前面：确保窗口始终在其他窗口之上，即使在全屏模式下。
3. 在所有工作区都可见：这确保窗口可以在所有 macOS 桌面空间上可见。

---

参考地址： 如何让 Electron 应用在全屏模式或其他桌面上保持顶部

---