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.
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
BrowserWindowinstances you can now use the
roundedCornersoption to keep corners square in frameless windows, useful for tray or small‑window scenarios.
The
sessionmodule gained a
storagePathproperty, 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
BrowserWindowto
session, e.g.,
sess.loadExtensionand
sess.getAllExtensions().
Dark‑mode related APIs moved to
nativeTheme, e.g.,
nativeTheme.shouldUseDarkColors.
Node.js Highlights
Node.js is now 14.16.0. The
fsmodule 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.rmand
fs.rmSyncwere added (Node 14.14.0) to delete files or directories conveniently.
V8 New Features
Top‑level
awaitis supported.
<code>await fetch('https://example.com');
</code>Private class fields using
#varsyntax 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.onLinebut 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.helloremain inaccessible.
WebContents New API: webFrameMain
The
webFrameMainproperty on the main‑process
WebContentslets you locate and control frames from the main process, complementing the existing
webFrameused 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
ShareMenudirectly:
<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
credentialsis now accepted in
new ClientRequest(options), matching the Fetch spec.
useSessionCookiesadded to
ClientRequestto 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/remotepackage instead of the built‑in remote module.
Default Context Isolation
Both
contextIsolationand
worldSafeExecuteJavaScriptnow 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.
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.
How this landed with the community
Was this worth your time?
0 Comments
Thoughtful readers leave field notes, pushback, and hard-won operational detail here.