ウィンドウを透明化する方法 [Electron]

ウィンドウを透明化する

BrowserWindow のコンストラクタに渡すオプションとして transparent: true と frame: false を指定する。

const win = new BrowserWindow({ transparent: true, frame: false });

Limitations

• You can not click through the transparent area. We are going to introduce an API to set window shape to solve this, see our issue for details.
• Transparent windows are not resizable. Setting resizable to true may make a transparent window stop working on some platforms.
• The blur filter only applies to the web page, so there is no way to apply blur effect to the content below the window (i.e. other applications open on the user’s system).
• On Windows operating systems, transparent windows will not work when DWM is disabled.
• On Linux, users have to put --enable-transparent-visuals --disable-gpu in the command line to disable GPU and allow ARGB to make transparent window, this is caused by an upstream bug that alpha channel doesn’t work on some NVidia drivers on Linux.
• On Mac, the native window shadow will not be shown on a transparent window.

—— Electron

参考：

Electron と透過ウィンドウ – Qiita

Electron で半透明なウィンドウを作る方法 2019年版 – Qiita

半透明なブラウザを作る | いろりおのメモ帳

Electron でウィンドウを透明にする | syon/til

How to create a transparent window with Electron Framework | Our Code World

Transparent Window | Electron [Official]

BrowserWindow | Electron [Official]

Completely frameless/transparent Electron Browser Window | Atom Discussion

Transparency does not work on Linux (black background instead) · Issue #15947 · electron/electron – GitHub

options --enable-transparent-visuals --disable-gpu seem to be unnecessary . Deprecate it ? · Issue #16808 · electron/electron – GitHub

Ready Event fires when Electron is not ready (transparency feature) · Issue #16809 · electron/electron – GitHub

Glitches in transparent mode since 0.36 (OS X) · Issue #4157 · electron/electron – GitHub

Transparent window has white background window · Issue #2170 · electron/electron – GitHub

Support for window transparency · Issue #381 · electron/electron – GitHub

Can’t succeed in making transparent window in Electron – Stack Overflow

Transparent Windows on Linux (Electron) – Stack Overflow

Transparent option does not work in electron with nodeIntegration – Stack Overflow

ウィンドウ枠を表示しない

BrowserWindow のコンストラクタに渡すオプションとして frame: false を指定する。

const win = new BrowserWindow({ frame: false });

参考：

独自 window – Qiita

フレームの無いウィンドウ | Electron Docs (imfly.gitbooks.io)

Electron frameless window | Christian Engvall

Frameless Window in ElectronJS | GeeksforGeeks

Frameless Window | Electron [Official]

Frameless window with controls in electron (Windows) – Stack Overflow

メニューバー

参考：

Frameless window with menubar? – Atom Discussion

electron-acrylic-window

参考：

Seo-Rii/electron-acrylic-window: Add acrylic effect to your electron application – GitHub

electron-acrylic-window | npm

lag · Issue #6 · Seo-Rii/electron-acrylic-window – GitHub

electron-vibrancy

参考：

arkenthera/electron-vibrancy: Make your electron windows vibrant! – GitHub

electron-vibrancy | npm