Estoy tratando de hacer una ventana transparente en Electron. Hasta ahora, soy capaz de resolver y encontrar las soluciones a todos los problemas, excepto a este. Estoy tratando de hacer una ventana de navegador transparente de tamaño completo en electron que permanezca siempre encima de otras ventanas para que pueda dibujar el rectángulo usando el mouse para imitar la selección de pantalla.

Esta es mi ventana del navegador

 const createCanvasWindow = () => { // Create the browser window for screen selection. canvasWindow = new BrowserWindow({ skipTaskbar: true, transparent: true, fullscreen: true, show: false, alwaysOnTop: true, frame: false, // opacity: 0.1, focusable: true, acceptFirstMouse: true, webPreferences: { preload: path.join(__dirname, './preloaders/canvas_preload.js') } }); // canvasWindow.setIgnoreMouseEvents(false); // canvasWindow.setFocusable(true); canvasWindow.loadURL(`file://${__dirname}/templates/index.html`) };

Y dentro del script index.html tengo una función JS como esta

 document.onmousemove = function (e) { setMousePosition(e); // function to get mouse cordinates }

Puedo crear la ventana transparente, pero esto no detecta ningún evento de clic o movimiento del mouse, pero la ventana debajo sí. Y si cambio la opacity a cualquier valor que no sea 0, obtengo eventos de mouse. También traté de configurar canvasWindow.setIgnoreMouseEvents(false); y canvasWindow.setFocusable(true); pero ninguno de los dos funcionó.

De los documentos , la opacity no funciona en Linux.

¿Cómo puedo hacer una ventana completamente transparente que atrape todos los eventos de teclado y movimiento del clic del mouse?

Estoy usando Electron 17.1.1, Windows 10, Node 16.14 y npm 7.19.

Cualquier ayuda sería apreciada.