electron-tips.md

As you start out with your Electron app, you'll start to notice some features which have been carried directly across from the browser realm but make less sense for a desktop app. Here are the ones I can remember:

Ctrl or ⌘ + Click Opens Links in New Window

In Electron just like in Chrome, if you hold down the Ctrl key (or ⌘ on Mac) while clicking a link it opens in a new window. For many SPA apps, this is undesired and will load another full copy of your app in another window. You can disable this by calling the following code once you've created a BrowserWindow

win = new BrowserWindow({ ... });
win.webContents.on('new-window', (event, url) => event.preventDefault());

Dropping File into Window Attempts to Loads It

Again like in Chrome, Electron will attempt to load any file that you drag into the window! This will completely lose your application state. Disable this functionality using:

win.webContents.on('will-navigate', (event) => event.preventDefault());

Page Can be Zoomed In/Out

Both Chrome and Electron let you zoom the page layout using touch-pinch gestures, holding Ctrl + Scroll and Ctrl + + / - keyboard shortcuts. Users can perform these actions accidentially and zoom the viewport to the point where the text is not ledgible. You can disable this by:

// We couldn't get setLayoutZoomLevelLimits working reliably on all platforms. 
// See this issue: https://github.com/electron/electron/issues/8793
webFrame.setLayoutZoomLevelLimits(1, 1) 
// instead we're using this deprecated method which still works
webFrame.setZoomLevelLimits(1, 1);

Highlighting Text

In browsers you can highlight any text you like including on buttons and across multiple elements. This makes your app feel like a web page so you'll want to disable this on appropriate elements. This is possible via CSS:

* {
  user-select: none;
}

.selectable-text {
  user-select: text;
}

Text & Links Draggable

One handy feature in Chrome is being able to drag links or highlighted text up to the top of the window to create a new tab. Last time I checked, this feature is enabled by default in Electron too! This is also disabled on every element via CSS and re-enabled for draggable items:

* {
  -webkit-user-drag: none;
}

[draggable=true]{
  -webkit-user-drag: element;
}