ElectronでBrowserWindowのインスタンスを生成する際にオプションとして、transparent: trueを渡すと背景が透明なアプリを作成できます。
const mainWindow = new BrowserWindow({ transparent: true });
Macだとこれで問題ないのですが、Windowsだと、
const mainWindow = new BrowserWindow({ transparent: true, frame: false });
という感じで、フレームの非表示も同時に設定する必要があるようです。
個人的には、
const mainWindow = new BrowserWindow({ transparent: true, alwaysOnTop: true, frame: false });
という感じで、
・背景を透明
・最前面に表示
・フレームを非表示
と、セットで使うことが多いですが、フレームを非表示にするとウィンドウをドラッグで動かせなくなるので、そこの対策を入れた方が良いでしょう。
キーボードから音が出る仕組みを作って、キーボードをキーボードにしてみました。 pic.twitter.com/Z38Du9hz4s
— 君塚史高 (@ki_230) 2020年9月18日
このアプリだと、ウィンドウの位置を決めた上で表示しています。