I have created electron app which on button click shows another window which is 100% height and width and has border around its area. It's also transparent so you can see what is behind this window.

Now I'm wondering if I'm able to make things below clickable or I need to create some kind of hack like this new transparent window make it really small and somehow expand border off this window.

Code responsible for creating new transparent window is:

const electron = require('electron');
const { app, BrowserWindow, Menu } = electron;

let mainWindow;
let addWindow;
let createTransparentWindow;

app.on('ready', () => {
    mainWindow = new BrowserWindow({});
    mainWindow.loadURL(`file://${__dirname}/index.html`);
    const mainMenu = Menu.buildFromTemplate(menuTemplate);
    Menu.setApplicationMenu(mainMenu);

    const mainScreen = electron.screen.getPrimaryDisplay();
    createTransparentWindow = () => {
        addWindow = new BrowserWindow({
            width: mainScreen.size.width,
            height: mainScreen.size.height,
            transparent: true,
            frame: false,
            alwaysOnTop: true,
        });
        addWindow.loadURL(`file://${__dirname}/transparentWindow.html`)
    };
});


const menuTemplate = [
    {},
    {
        label: 'Record',
        submenu: [
            {
                label: 'TransparentWindow',
                click() {
                    createTransparentWindow();
                }
            }
        ]
    }
];

If I'm able to make apps which are below this window clickable please tell me how if not what kinda trick I need to introduce here?

I have created electron app which on button click shows another window which is 100% height and width and has border around its area. It's also transparent so you can see what is behind this window.

Now I'm wondering if I'm able to make things below clickable or I need to create some kind of hack like this new transparent window make it really small and somehow expand border off this window.

Code responsible for creating new transparent window is:

const electron = require('electron');
const { app, BrowserWindow, Menu } = electron;

let mainWindow;
let addWindow;
let createTransparentWindow;

app.on('ready', () => {
    mainWindow = new BrowserWindow({});
    mainWindow.loadURL(`file://${__dirname}/index.html`);
    const mainMenu = Menu.buildFromTemplate(menuTemplate);
    Menu.setApplicationMenu(mainMenu);

    const mainScreen = electron.screen.getPrimaryDisplay();
    createTransparentWindow = () => {
        addWindow = new BrowserWindow({
            width: mainScreen.size.width,
            height: mainScreen.size.height,
            transparent: true,
            frame: false,
            alwaysOnTop: true,
        });
        addWindow.loadURL(`file://${__dirname}/transparentWindow.html`)
    };
});


const menuTemplate = [
    {},
    {
        label: 'Record',
        submenu: [
            {
                label: 'TransparentWindow',
                click() {
                    createTransparentWindow();
                }
            }
        ]
    }
];

If I'm able to make apps which are below this window clickable please tell me how if not what kinda trick I need to introduce here?

• javascript
• window
• electron

• Doesn't seem to work on linux. – jayarjo Commented Sep 27, 2020 at 7:24

1 Answer 1

I found answer to my question here. So what you need to browserWindow is:

addWindow.setIgnoreMouseEvents(true);
addWindow.setFocusable(false);

and then you can click through.