Electron window shenanigans



Electron is pretty cool. The way i use it lately is rather for building small and simple tools. I need my ui to be also small and smart.
Methods below are mostly copied from official electoron documentation, but it is worth to remeber that you can do stuff like this.

Click-through window

To create a click-through window, i.e. making the window ignore all mouse events, you can call the win.setIgnoreMouseEvents(ignore) API:

const { BrowserWindow } = require("electron");
let win = new BrowserWindow();
win.setIgnoreMouseEvents(true);

Forwarding

Ignoring mouse messages makes the web page oblivious to mouse movement, meaning that mouse movement events will not be emitted. On Windows operating systems an optional parameter can be used to forward mouse move messages to the web page, allowing events such as mouseleave to be emitted:

let win = require("electron").remote.getCurrentWindow();
let el = document.getElementById("clickThroughElement");
el.addEventListener("mouseenter", () => {
win.setIgnoreMouseEvents(true, { forward: true });
});
el.addEventListener("mouseleave", () => {
win.setIgnoreMouseEvents(false);
});

This makes the web page click-through when over el, and returns to normal outside it.

Transparent window

By setting the transparent option to true, you can also make the frameless window transparent:

const { BrowserWindow } = require("electron");
let win = new BrowserWindow({ transparent: true, frame: false });
win.show();

Be aware though that this way you have no UI to move or minimize / maximize your window anymore. This is why you have to use below methods to make window usable again.

Draggable region

By default, the frameless window is non-draggable. Apps need to specify -webkit-app-region: drag in CSS to tell Electron which regions are draggable (like the OS's standard title bar), and apps can also use -webkit-app-region: no-drag to exclude the non-draggable area from the draggable region. Note that only rectangular shapes are currently supported.

Note: -webkit-app-region: drag is known to have problems while the developer tools are open. See this GitHub issue for more information including a workaround.

To make the whole window draggable, you can add -webkit-app-region: drag as body's style:

<body style="-webkit-app-region: drag">
</body>

And note that if you have made the whole window draggable, you must also mark buttons as non-draggable, otherwise it would be impossible for users to click on them:

button {
-webkit-app-region: no-drag;
}

If you're setting just a custom title bar as draggable, you also need to make all buttons in title bar non-draggable.

Text selection

In a frameless window the dragging behavior may conflict with selecting text. For example, when you drag the title bar you may accidentally select the text on the title bar. To prevent this, you need to disable text selection within a draggable area like this:

.titlebar {
-webkit-user-select: none;
-webkit-app-region: drag;
}

Recent Posts

Quick formatted {dd-mm-yy hh:mm} date output in JavaScript

Dependency free module to copy all files (sync) from directory in nodejs

Git repository as dependency in package.json.

Iterating through nested JavaScript object and extracting data.

Modules Cheatsheet

Ultimate slugify function

XPath cheatsheet

Vanilla JS XPath query function

Online code utilities

← Back to all posts