I am trying to make a transparent window in Electron. So far, I'm able to solve and find the solutions to every problem except for this one. I'm trying to make a transparent full-size browser window in electron which stays always on top of other windows so that I can draw the rectangle using the mouse to mimic screen selection.

This is my browserWindow

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`)
};

And inside the index.html script I have a JS function like this

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

I'm able to create the transparent window but this doesn't catch any mouse click or mouse move event but the window beneath it does. And if I change the opacity to any value other than 0, I'm getting mouse events. I also tried to set canvasWindow.setIgnoreMouseEvents(false); and canvasWindow.setFocusable(true); but neither of them worked.

From the docs opacity doesn't work on Linux.

How can I make a fully transparent window which catches all mouse click move and keyboard events?

I'm using Electron 17.1.1, Windows 10, Node 16.14, and npm 7.19.

Any help would be appreciated.