Frontend Development 10 min read

What’s New in Electron 12 & 13? Key Features, APIs, and Code Samples

This article reviews the latest Electron 12 and 13 releases, highlighting new BrowserWindow options, session storage paths, moved APIs, Node.js promise‑based file system methods, V8 enhancements, contextBridge isolation, webFrameMain, menu sharing, async trash handling, spellcheck updates, net module additions, and breaking changes such as the removal of the Remote module and Flash support.

Taobao Frontend Technology
Taobao Frontend Technology
Taobao Frontend Technology
What’s New in Electron 12 & 13? Key Features, APIs, and Code Samples

The latest stable Electron release is 13‑x‑y; it brings Node.js 14.16.0 and V8 9.1 while adding several framework‑level features.

Electron 13 Features

Notable Additions

When creating

BrowserWindow

instances you can now use the

roundedCorners

option to keep corners square in frameless windows, useful for tray or small‑window scenarios.

The

session

module gained a

storagePath

property, allowing named sessions (e.g., using

fromPartition('persist:abc')

) to store caches such as code cache and local storage in a dedicated folder.

Some plugin APIs moved from

BrowserWindow

to

session

, e.g.,

sess.loadExtension

and

sess.getAllExtensions()

.

Dark‑mode related APIs moved to

nativeTheme

, e.g.,

nativeTheme.shouldUseDarkColors

.

Node.js Highlights

Node.js is now 14.16.0. The

fs

module supports a promise API, eliminating the need for

util.promisify

. Example:

<code>import fs, { promises as fsPromises, PathLike } from 'fs';
export async function ensureDir(dirPath: PathLike) {
  try {
    await fsPromises.mkdir(dirPath, { recursive: true });
  } catch (error) {
    if (error.code !== 'EEXIST') {
      throw error;
    }
  }
}
</code>

Additionally,

fs.rm

and

fs.rmSync

were added (Node 14.14.0) to delete files or directories conveniently.

V8 New Features

Top‑level

await

is supported.

<code>await fetch('https://example.com');
</code>

Private class fields using

#var

syntax are now standard.

<code>class A {
  static test(obj) {
    console.log(#foo in obj);
  }
  #foo = 0;
}
A.test(new A()); // true
A.test({}); // false
</code>

Electron 12 Features

net.isOnline Method

The new

net.isOnline()

API reports the network status without creating a

BrowserWindow

. It mirrors

navigator.onLine

but is implemented in Chromium.

Context Bridge Isolation

With

contextIsolation: true

, you can expose variables or functions to the renderer via

contextBridge.exposeInMainWorld

:

<code>// main.ts
const mainWindow = new BrowserWindow({
  height: 600,
  width: 800,
  webPreferences: { contextIsolation: true, preload: path.join(__dirname, './preload.js') },
});

// preload.ts (isolated world)
const { contextBridge, ipcRenderer } = require('electron');
contextBridge.exposeInMainWorld('electron', {
  doThing: () => ipcRenderer.send('do-a-thing')
});
</code>

After loading, the renderer can call

window.electron.doThing()

, while plain globals like

window.hello

remain inaccessible.

WebContents New API: webFrameMain

The

webFrameMain

property on the main‑process

WebContents

lets you locate and control frames from the main process, complementing the existing

webFrame

used in the renderer.

<code>const { BrowserWindow } = require('electron');
async function main() {
  const win = new BrowserWindow({ width: 800, height: 600 });
  await win.loadURL('https://reddit.com');
  const youtubeEmbeds = win.webContents.mainFrame.frames.filter(frame => {
    try {
      const url = new URL(frame.url);
      return url.host === 'www.youtube.com';
    } catch {
      return false;
    }
  });
  console.log(youtubeEmbeds);
}
main();
</code>

MenuItem Share Menu

Electron 12 adds a macOS share menu role:

<code>const menu = Menu.buildFromTemplate([
  { role: 'windowMenu' },
  { role: 'shareMenu', sharingItem: { urls: ['https://github.com/electron/electron/issues/6330'] } },
]);
menu.popup(win);
</code>

You can also create a

ShareMenu

directly:

<code>const menu2 = new ShareMenu({ filePaths: [__filename] });
menu2.popup(win);
</code>

Async Trash via shell.trashItem()

The synchronous

shell.moveItemToTrash()

is deprecated. Tests show asynchronous

shell.trashItem()

is far faster (≈0.15 ms vs ≈500 ms) and prevents the whole app from freezing.

Earlier Electron 8.x/9.x also migrated shell.openExternal to an async version without changing its name.

Spellcheck Module Updates

New methods

webFrame.isWordMisspelled(word)

and

webFrame.getWordSuggestions(word)

allow built‑in spellchecking without third‑party libraries.

net Module New Properties

credentials

is now accepted in

new ClientRequest(options)

, matching the Fetch spec.

useSessionCookies

added to

ClientRequest

to forward the current session’s cookies.

<code>const sess = session.defaultSession;
const [cookie] = await sess.cookies.get({ name: 'SessionId' });
if (cookie && cookie.expirationDate) {
  console.log('cookie expiration date', cookie.expirationDate);
}
</code>

Breaking Changes

Remote Module Disabled

Use the separate

@electron/remote

package instead of the built‑in remote module.

Default Context Isolation

Both

contextIsolation

and

worldSafeExecuteJavaScript

now default to

true

, tightening security.

Flash Support Removed

Flash is no longer bundled.

Other Notes

Support for Electron 9.x and 10.x has ended (see the official timeline).

Full release notes are available on the Electron stable releases page.

Across the 12‑to‑13 upgrade path, Electron has steadily improved security, adding extensive isolation APIs (contextBridge, session handling, contextIsolation) and updating Node.js with many safety fixes, while the core framework itself introduces fewer but well‑targeted enhancements.

Electronnode.jsAPIV8Desktop Apps
Taobao Frontend Technology
Written by

Taobao Frontend Technology

The frontend landscape is constantly evolving, with rapid innovations across familiar languages. Like us, your understanding of the frontend is continually refreshed. Join us on Taobao, a vibrant, all‑encompassing platform, to uncover limitless potential.

0 followers
Reader feedback

How this landed with the community

login Sign in to like

Rate this article

Was this worth your time?

Sign in to rate
Discussion

0 Comments

Thoughtful readers leave field notes, pushback, and hard-won operational detail here.