Cómo crear una ventana transparente con Electron Framework

Implementación

El constructor de la clase MainWindow espera un objeto como primer parámetro. Para que nuestra ventana sea transparente, necesitamos proporcionar la propiedad transparent y frame a verdadero y falso respectivamente:

const {BrowserWindow} = require('electron')

let win = new BrowserWindow({
    width: 800, 
    height: 600,
    transparent:true,
    frame: false
})

win.show()

Típicamente, si las ventanas transparentes están destinadas a ser únicas e iniciales, entonces debes realizar los cambios en el archivo main.js:

function createWindow () {
  // Crea la ventana del navegador.
  mainWindow = new BrowserWindow({
    width: 800,
    height: 600, 
    transparent: true,
    frame:false
  })

  // y cargue el index.html de la aplicación.
  mainWindow.loadURL(`file://${__dirname}/index.html`)

  // Open the DevTools.
  //mainWindow.webContents.openDevTools()

  // Emitido cuando la ventana está cerrada.
  mainWindow.on('closed', function () {
    // Desreferencia del objeto de la ventana, normalmente almacenaría ventanas
    // en una matriz si su aplicación admite múltiples ventanas, este es el momento
    // cuando debe eliminar el elemento correspondiente.
    mainWindow = null
  })
}

Eso debería hacer que tu ventana ya sea transparente. Establezca como contenido de su archivo index.html el siguiente markup:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Transparent Window</title>
    </head>
    <body>
        <div>
             <img src="http://ourcodeworld.com/resources/img/ocw-empty.png" width="300" height="300"/>
        </div>
    </body>
</html>

y ejecuta el proyecto usando npm start, tu aplicación se verá así:

Como puede ver, la ventana es totalmente transparente y puede ver VSCode al fondo.

Limitaciones

No puedes hacer clic en el área transparente. Se introducira una API para configurar la forma de la ventana para resolver esto, consulte el problema para obtener más detalles.
Las ventanas transparentes no se pueden cambiar de tamaño. La configuración resizableen truepuede hacer que una ventana transparente deje de funcionar en algunas plataformas.
El blurfiltro solo se aplica a la página web, por lo que no hay forma de aplicar un efecto de desenfoque al contenido debajo de la ventana (es decir, otras aplicaciones abiertas en el sistema del usuario).
En los sistemas operativos Windows, las ventanas transparentes no funcionarán cuando DWM esté desactivado.
En Linux, los usuarios tienen --enable-transparent-visuals --disable-gpuque ingresar la línea de comando para deshabilitar la GPU y permitir que ARGB haga una ventana transparente, esto se debe a un error ascendente de que el canal alfa no funciona en algunos controladores de NVidia en Linux.
En Mac, la sombra de ventana nativa no se mostrará en una ventana transparente.

Notas importantes

Si el área de herramientas del desarrollador está visible, la ventana ya no será transparente . Si está oculto o no se muestra, se mantendrá el efecto transparente.

Como probablemente nadie quiere una ventana estática que no se pueda mover, permita la función de arrastre a un elemento usando CSS:

.draggable-area{
    -webkit-app-region: drag;
}

Al agregar la draggable-areaclase a cualquier elemento, permitirá al usuario arrastrar toda la ventana desde ese punto. En algunas plataformas, el área que se puede arrastrar se tratará como un marco que no es de cliente, por lo que cuando haga clic con el botón derecho en él, aparecerá un menú del sistema. Para que el menú contextual se comporte correctamente en todas las plataformas, nunca debe utilizar un menú contextual personalizado en áreas que se pueden arrastrar.

Ejemplo

El siguiente documento creará una ventana transparente muy simple con un par de acciones de botón y un área que se puede arrastrar:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Transparent Window</title>
        <style>
            .draggable-area{
                width:300px;
                height:300px;
                background-color:blue;
                color:white;
                -webkit-app-region: drag;
            }
        </style>
    </head>
    <body>
        <div>
            <img src="http://ourcodeworld.com/resources/img/ocw-empty.png" width="300" height="300"/>
            <div>
                <input type="button" id="close" value="Close app"/>
                <input type="button" id="devtools" value="Open DEV Tools"/>
                <div class="draggable-area">
                    Arrastra la ventana aca
                </div>
            </div>
        </div>
        <script>
            var app = require('electron').remote; 

            // Cerrar app 
            document.getElementById("close").addEventListener("click", () => {
                app.BrowserWindow.getFocusedWindow().close();
            }, false);

            // Abrir herramientas de desarrollador 
            document.getElementById("devtools").addEventListener("click", () => {
                app.BrowserWindow.getFocusedWindow().openDevTools();
            }, false);   
        </script>
    </body>
</html>

El marcado anterior debería generar una aplicación como: