Electron透明悬浮窗口点击外部后出现顶部标题栏的问题求助

大家好，我现在想用Electron做一个透明的悬浮窗口，但是遇到了个头疼的问题，想请教下各位大佬！

我创建窗口的核心配置如下：

const mainWindow = new BrowserWindow({
  width: 100,
  height: 100,
  frame: false,
  alwaysOnTop: true,
  transparent: true,
  webPreferences: {
    nodeIntegration: true,
    contextIsolation: false,
  },
})

问题详情 #

当我点击窗口内部区域后，再切换到外部的其他应用或者点击窗口外的区域，这个悬浮窗口会突然弹出一个顶部标题栏。我在Windows 10和Windows 11两台机器上都测试过，结果完全一致。我的目标用户主要是Windows用户，所以只针对Windows系统的解决方案完全没问题。

我几乎搜遍了能找到的相关配置方案，但都没能解决问题，所以这里就不罗列所有尝试过的无效配置了。按照网上的教程，我当前的配置应该是能正常运行的，但实际就是出现了这个奇怪的标题栏问题。

半可行的临时方案 #

有一个勉强能遮住问题的办法：把frame设为true，然后把标题栏高度设为0。但这么做会导致窗口完全无法拖动，不符合我的需求。

我还发现这个问题和transparent: true强相关——如果我去掉这个配置，标题栏就不会出现，但窗口也就失去了透明效果，这显然不是我想要的结果😭。

可复现的完整代码 #

main.ts

import { app, BrowserWindow } from 'electron'
import * as path from "node:path";

const createWindow = () => {
  const mainWindow = new BrowserWindow({
    width: 100,
    height: 100,
    frame: false,
    alwaysOnTop: true,
    transparent: true,
    webPreferences: {
      nodeIntegration: true,
      contextIsolation: false,
    },
  })
  mainWindow.loadFile(path.join(__dirname, 'index.html'));
}

app.on('ready', () => {
  createWindow();
});

index.html

<!DOCTYPE html>
<html lang="en">
<body>
  <h1>text</h1>
</body>
</html>

环境版本 #

我试过Electron 37.1.0和35.6.0两个版本，问题都存在。

有没有大佬遇到过类似的情况？或者有什么解决思路可以分享的？提前谢谢大家的帮助！

内容来源于stack exchange