I currently want to write an overlay that uses Electron. The overlay is supposed to be transparent.
The window in question:
const mainWindow = new BrowserWindow({
width: 100,
height: 100,
frame: false,
alwaysOnTop: true,
transparent: true,
webPreferences: {
nodeIntegration: true,
contextIsolation: false,
},
})
When I click within the window and then elsewhere, in another app or something outside the window, a top bar shows up. I tried this on two different machines, Windows 10 and 11. The main target is Windows users, so (eventually) Windows-only solutions are welcome.
I tried basically everything I could find, but it didn't work, so I didn't include all the researches in the window config here. According to tutorials I saw online, the way I've configured it, should work…
What kind of worked was setting frame: true
and then setting the frame's height
to 0
. However, this results in the window not being draggable.
The problem seems to be with the transparent: true
, since when I remove it, the bar does not show up, but it is not transparent anymore (ofc) :').
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>
I tried Electron version 37.1.0
and 35.6.0
Thank you for any suggestions or help in advance!
https://github.com/electron/electron/issues/46882
Found this open issue :) Downgrade to 35.2.1 to avoid this issue.