<?xml version="1.0" encoding="utf-8"?>
<feed xmlns="http://www.w3.org/2005/Atom">
    <id>https://electronjs.org/blog</id>
    <title>Electron Blog</title>
    <updated>2026-03-17T00:00:00.000Z</updated>
    <generator>https://github.com/jpmonette/feed</generator>
    <link rel="alternate" href="https://electronjs.org/blog"/>
    <subtitle>Electron Blog</subtitle>
    <icon>https://electronjs.org/assets/img/favicon.ico</icon>
    <entry>
        <title type="html"><![CDATA[Tech Talk: How Electron went Wayland-native, and what it means for your apps]]></title>
        <id>https://electronjs.org/blog/tech-talk-wayland</id>
        <link href="https://electronjs.org/blog/tech-talk-wayland"/>
        <updated>2026-03-17T00:00:00.000Z</updated>
        <summary type="html"><![CDATA[Electron recently switched to Wayland by default on Linux, bringing dozens of popular desktop apps along with it. Here's what changed and how it affects developers and users.]]></summary>
        <content type="html"><![CDATA[<div class="theme-admonition theme-admonition-info admonition_xJq3 alert alert--info"><div class="admonitionHeading_Gvgb"><span class="admonitionIcon_Rf37"><svg viewBox="0 0 14 16"><path fill-rule="evenodd" d="M7 2.3c3.14 0 5.7 2.56 5.7 5.7s-2.56 5.7-5.7 5.7A5.71 5.71 0 0 1 1.3 8c0-3.14 2.56-5.7 5.7-5.7zM7 1C3.14 1 0 4.14 0 8s3.14 7 7 7 7-3.14 7-7-3.14-7-7-7zm1 3H6v5h2V4zm0 6H6v2h2v-2z"></path></svg></span>info</div><div class="admonitionContent_BuS1"><p>Tech talks are a new blog post series where we share glimpses into our work on Electron. If you find this work interesting, please consider <a href="https://github.com/electron/electron/" target="_blank" rel="noopener noreferrer" class="">contributing</a>!</p></div></div>
<p>When Electron switched to <a href="https://wayland.freedesktop.org/" target="_blank" rel="noopener noreferrer" class="">Wayland</a> on Linux last fall, most people didn't notice.</p>
<p>Major Linux distributions adopted the modern display protocol years ago, and both the KDE Plasma and GNOME desktop environments are in the process of <a href="https://blogs.kde.org/2025/11/26/going-all-in-on-a-wayland-future/" target="_blank" rel="noopener noreferrer" class="">dropping X11 support</a> <a href="https://www.phoronix.com/news/GNOME-50-Alpha/" target="_blank" rel="noopener noreferrer" class="">completely</a>.</p>
<p>But a platform migration isn't complete without apps, and a large part of the Linux app ecosystem went through a second Wayland transition last August — well after most distros had changed their defaults. That's when Chromium <a href="https://chromium-review.googlesource.com/c/chromium/src/+/6819616" target="_blank" rel="noopener noreferrer" class="">turned on Wayland by default</a>, bringing Electron and dozens of Linux desktop apps along with it.</p>
<h2 class="anchor anchorTargetStickyNavbar_Vzrq" id="the-third-impact-electron-goes-wayland-native">The third impact: Electron goes Wayland-native<a href="https://electronjs.org/blog/tech-talk-wayland#the-third-impact-electron-goes-wayland-native" class="hash-link" aria-label="Direct link to The third impact: Electron goes Wayland-native" title="Direct link to The third impact: Electron goes Wayland-native" translate="no">​</a></h2>
<p>Wayland is supported out of the box in <a href="https://releases.electronjs.org/release/v38.2.0" target="_blank" rel="noopener noreferrer" class="">Electron 38.2</a> and newer. As long as your apps are up-to-date, it just works. (If you were previously launching your Electron apps with very long commands like <code>CONFUSING_OZONE_VARIABLE --ozone-platform=wayland</code>, you no longer need to do that.)</p>
<p>This change was possible because the Chromium and Electron projects have been <a href="https://github.com/electron/electron/pull/26022" target="_blank" rel="noopener noreferrer" class="">working on Wayland support</a> for more than half a decade. But until recently, Chrome and Electron apps continued to use X11 by default, even when launched in a Wayland session. This wasn’t a big issue, since X11 apps still work fairly well on Wayland by running inside an invisible X server called <a href="https://wayland.freedesktop.org/docs/html/ch05.html" target="_blank" rel="noopener noreferrer" class="">Xwayland</a>.</p>
<p><a href="https://electronjs.org/assets/files/xwayland-8fc6983c43adb7294e26749d678d1b60.png" target="_blank" class=""><img decoding="async" loading="lazy" alt="Screenshot of an Electron app running in X11 compatibility mode (XWayland) in a Wayland session on Ubuntu" src="https://electronjs.org/assets/images/xwayland-8fc6983c43adb7294e26749d678d1b60.png" width="1280" height="960" class="img_ev3q"></a></p>
<p>Running apps through a compatibility layer is not the same as running them directly on Wayland. On Wayland, there’s less sitting between your app and the compositor, so there's lower overhead and much stronger isolation between applications. Modern Wayland compositors also let apps take advantage of newer platform and display features like variable refresh rates, HiDPI and fractional scaling, and HDR.</p>
<p><a href="https://electronjs.org/assets/files/hdr-f6b141a7502024160f550c614c947608.png" target="_blank" class=""><img decoding="async" loading="lazy" alt="Screenshot of an Electron app running natively on Wayland, demonstrating support for wide gamut color and HDR" src="https://electronjs.org/assets/images/hdr-f6b141a7502024160f550c614c947608.png" width="1295" height="1076" class="img_ev3q"></a></p>
<p>These are all good reasons for Electron to make the switch. In late September, Electron followed Chromium’s lead and began <a href="https://www.electronjs.org/blog/electron-38-0#removed-electron_ozone_platform_hint-environment-variable" target="_blank" rel="noopener noreferrer" class="">defaulting to Wayland</a>. And as apps began to update, people who had been “using Wayland” without issues for months or years started to find out what it was really like to experience their apps on Wayland for the first time.</p>
<h2 class="anchor anchorTargetStickyNavbar_Vzrq" id="waylands-house-waylands-rules">Wayland’s house, Wayland’s rules<a href="https://electronjs.org/blog/tech-talk-wayland#waylands-house-waylands-rules" class="hash-link" aria-label="Direct link to Wayland’s house, Wayland’s rules" title="Direct link to Wayland’s house, Wayland’s rules" translate="no">​</a></h2>
<p>Supporting Wayland required dozens of changes throughout <a href="https://chromium-review.googlesource.com/q/subject:%22wayland%22" target="_blank" rel="noopener noreferrer" class="">Chromium</a> and <a href="https://github.com/electron/electron/pulls?q=is%3Apr+wayland" target="_blank" rel="noopener noreferrer" class="">Electron</a>, from internals to developer-facing APIs. It also required a different way of thinking about what desktop apps should be able to do.</p>
<p>Wayland reconsiders assumptions made by older systems and asks whether apps should be able to:</p>
<ul>
<li class="">Take focus away from other apps</li>
<li class="">View and interact with windows from other apps</li>
<li class="">Respond to mouse and keyboard input when not focused</li>
<li class="">Choose where to position their own windows on the screen (and which physical monitor to appear on)</li>
<li class="">Resize their windows at any time</li>
</ul>
<p>Wayland's answer to these questions is essentially “no.” When you open a window, the compositor — not the app developer — decides where it goes. Apps cannot unilaterally move, resize, or focus their windows without user input, and they can only interact with the rest of the desktop through optional <a href="https://wayland.app/protocols/" target="_blank" rel="noopener noreferrer" class="">protocol extensions</a> and <a href="https://flatpak.github.io/xdg-desktop-portal/" target="_blank" rel="noopener noreferrer" class="">XDG portals</a>.</p>
<p>These kinds of rules are understandable; no one likes it when a misbehaving app steals focus or loads halfway off the screen. But it can still surprise people when their apps suddenly lose access to familiar affordances on Wayland. This is especially the case for a cross-platform framework like Electron, which exists to help developers achieve consistent results everywhere.</p>
<p>Some widely used Electron APIs that work on X11, macOS, and Windows are not available on Wayland. For example, <a href="https://www.electronjs.org/docs/latest/api/base-window#winsetpositionx-y-animate" target="_blank" rel="noopener noreferrer" class=""><code>win.setPosition(x, y)</code></a> and <a href="https://www.electronjs.org/docs/latest/api/screen#screengetcursorscreenpoint" target="_blank" rel="noopener noreferrer" class=""><code>screen.getCursorScreenPoint()</code></a> aren't supported, as Wayland <a href="https://lists.freedesktop.org/archives/wayland-devel/2015-September/024410.html" target="_blank" rel="noopener noreferrer" class="">deliberately forbids</a> apps from accessing global screen coordinates.</p>
<p>Other features work differently: recording the screen with <a href="https://www.electronjs.org/docs/latest/api/desktop-capturer" target="_blank" rel="noopener noreferrer" class=""><code>desktopCapturer</code></a> and setting keyboard shortcuts with <a href="https://www.electronjs.org/docs/latest/api/global-shortcut" target="_blank" rel="noopener noreferrer" class=""><code>globalShortcut</code></a> are more restricted, and both heavily depend on the desktop environment and portal versions. Here's what it looks like when screen sharing in Signal Desktop on GNOME 48.</p>
<p><a href="https://electronjs.org/assets/files/signalscreenshare-4f0031952ec13722d28814608d871c25.png" target="_blank" class=""><img decoding="async" loading="lazy" alt="Screenshot of Signal Desktop requesting permission to share the screen on GNOME" src="https://electronjs.org/assets/images/signalscreenshare-4f0031952ec13722d28814608d871c25.png" width="1627" height="1198" class="img_ev3q"></a></p>
<p>Making this more complicated for developers is the fact that Wayland isn't a single piece of software, but a protocol. Every <a href="https://en.wikipedia.org/wiki/Wayland_(protocol)#Wayland_compositors" target="_blank" rel="noopener noreferrer" class="">compositor</a> implements it a little differently, almost like browser engines. (There are even <a href="https://absurdlysuspicious.github.io/wayland-protocols-table/" target="_blank" rel="noopener noreferrer" class="">protocol support trackers</a> that look like they came from MDN or CanIUse.)</p>
<p>So when Slack tries to focus its main window with <a href="https://www.electronjs.org/docs/latest/api/browser-window#winfocus" target="_blank" rel="noopener noreferrer" class=""><code>win.focus()</code></a>, GNOME's compositor (Mutter) shows a notification. On KDE Plasma (KWin), the app icon flashes in the panel instead. Neither outcome is what the app's developers had in mind, but both are valid interpretations of the <a href="https://wayland.app/protocols/xdg-activation-v1" target="_blank" rel="noopener noreferrer" class="">activation spec</a>.</p>
<p><a href="https://electronjs.org/assets/files/focus-bd12b1a8eb0999cba0edfb16934505d4.png" target="_blank" class=""><img decoding="async" loading="lazy" alt="Screenshot comparing what happens when Slack tries to focus itself on GNOME and KDE" src="https://electronjs.org/assets/images/focus-bd12b1a8eb0999cba0edfb16934505d4.png" width="1280" height="720" class="img_ev3q"></a></p>
<p>Some capabilities simply work better on Wayland than on X11, including anything to do with colors, transparency, and hardware-accelerated rendering. <a href="https://www.electronjs.org/docs/latest/api/base-window#winsetopacityopacity-windows-macos" target="_blank" rel="noopener noreferrer" class=""><code>win.setOpacity(n)</code></a> is an example of an Electron API which hasn't been available on Linux in the past, but which will now be feasible to support.</p>
<p>Even the stricter restrictions can benefit apps. When 1Password runs on Wayland, its <a href="https://developer.1password.com/docs/ssh/agent/" target="_blank" rel="noopener noreferrer" class="">SSH agent</a> lets users confirm requests with a single click instead of asking them to enter their passwords. This is safe because Wayland's input isolation is strong enough to prevent the prompt from being skipped with <a href="https://en.wikipedia.org/wiki/Clickjacking" target="_blank" rel="noopener noreferrer" class="">clickjacking</a> — only a real human being can click the button.</p>
<p><a href="https://electronjs.org/assets/files/1passwordssh-6ef79e1c3174043cb11571d3874802bf.png" target="_blank" class=""><img decoding="async" loading="lazy" alt="Screenshot of the 1Password SSH agent showing a prompt with an Authorize button, floating over a terminal with an SSH command." src="https://electronjs.org/assets/images/1passwordssh-6ef79e1c3174043cb11571d3874802bf.png" width="1641" height="1293" class="img_ev3q"></a></p>
<p>The basic tradeoff is that Wayland restricts some of what apps can do but also enables them to be more capable and secure. And in one area, Wayland gives developers more flexibility and more responsibility than before: client-side decorations (CSD).</p>
<h2 class="anchor anchorTargetStickyNavbar_Vzrq" id="understanding-csd-or-when-a-window-isnt-a-window">Understanding CSD, or when a window isn’t a window<a href="https://electronjs.org/blog/tech-talk-wayland#understanding-csd-or-when-a-window-isnt-a-window" class="hash-link" aria-label="Direct link to Understanding CSD, or when a window isn’t a window" title="Direct link to Understanding CSD, or when a window isn’t a window" translate="no">​</a></h2>
<p>The Wayland protocol is very lightweight, and its simplicity extends to the way it draws window frames. On X11, the window manager typically supplies a window’s title bar and frame decorations. But when you create a window (<a href="https://wayland.app/protocols/xdg-shell" target="_blank" rel="noopener noreferrer" class=""><code>xdg_toplevel</code></a>) on Wayland, all you get back from the compositor is a plain rectangle.</p>
<p><a href="https://electronjs.org/assets/files/waylandnocsd-1fda0479eb87487d13ce5473ed32277f.png" target="_blank" class=""><img decoding="async" loading="lazy" alt="Screenshot of a blank app window on Wayland with no decorations. It&amp;#39;s just a white rectangle." src="https://electronjs.org/assets/images/waylandnocsd-1fda0479eb87487d13ce5473ed32277f.png" width="1280" height="960" class="img_ev3q"></a></p>
<p>That rectangle is a powerful canvas. On a modern compositor like GNOME’s Mutter, it’s triple-buffered and GPU-accelerated. But if you want any of the trimmings users might expect — title bar buttons, drop shadows, even resize handles — you have to add them yourself. This requirement is called client-side decorations (CSD), and it’s one of the major differences between X11 and Wayland.</p>
<p>Electron already had some support for client-side decorations, provided by a class called <code>ClientFrameViewLinux</code> which uses GTK to paint convincing native window frames. These look very similar to the ones GNOME used to supply on X11, but they are produced entirely in-framework.</p>
<p><a href="https://electronjs.org/assets/files/clientframeviewlinux-cfd509bc5a3099a12009bb9aa9da3749.png" target="_blank" class=""><img decoding="async" loading="lazy" alt="Screenshot of a ClientFrameViewLinux with client-side decorations on GNOME" src="https://electronjs.org/assets/images/clientframeviewlinux-cfd509bc5a3099a12009bb9aa9da3749.png" width="1280" height="960" class="img_ev3q"></a></p>
<p>But client-side window frames are not an exact match for server-side decorations (SSD) from X11 window managers. They need to be implemented by each app or framework, so the details can look noticeably different when you put apps side by side, from their title bar areas right down to their drop shadows and corner shapes.</p>
<p><a href="https://electronjs.org/assets/files/csdcomparison-92a791c2382c1f4c96e8cd20d932276d.png" target="_blank" class=""><img decoding="async" loading="lazy" alt="Screenshot of four apps with CSD from different frameworks (clockwise from top-left: Adwaita, Qt, Electron, and Firefox)" src="https://electronjs.org/assets/images/csdcomparison-92a791c2382c1f4c96e8cd20d932276d.png" width="1728" height="1296" class="img_ev3q"></a></p>
<p>The differences are usually minor, but when CSD is completely absent from a window, the result can be visually jarring.</p>
<p>Many popular apps, including Visual Studio Code, Obsidian, and Discord, use <a href="https://www.electronjs.org/docs/latest/tutorial/custom-window-styles" target="_blank" rel="noopener noreferrer" class="">frameless windows</a> with <a href="https://www.electronjs.org/docs/latest/tutorial/custom-title-bar" target="_blank" rel="noopener noreferrer" class="">custom title bars</a>. Prior to <a href="https://www.electronjs.org/blog/electron-41-0" target="_blank" rel="noopener noreferrer" class="">Electron 41</a>, frameless windows did not support CSD at all, so they looked like featureless rectangles on Wayland.</p>
<p><a href="https://electronjs.org/assets/files/vscodenocsd-6f2013f1656e09eff0cfca1e94fa0a71.png" target="_blank" class=""><img decoding="async" loading="lazy" alt="Screenshot of VS Code on KDE with no CSD" src="https://electronjs.org/assets/images/vscodenocsd-6f2013f1656e09eff0cfca1e94fa0a71.png" width="1731" height="1300" class="img_ev3q"></a></p>
<p>Improving coverage for CSD was a task with framework-wide consequences. The biggest obstacle involved window sizes and how to measure and set them accurately. Electron already manages two different kinds of window boundaries:</p>
<ul>
<li class=""><strong>“window bounds”</strong>, the size of the window, including its titlebar, menubar, and frame.</li>
<li class=""><strong>“content bounds”</strong>, the size of the internal web view which hosts the app’s web content.</li>
</ul>
<p>Both values can be controlled independently. If a developer calls for an 800x600 window, Electron calculates the height of the title bar and shrinks the web app to something like 800x540. (It also works the other way around for <a href="https://www.electronjs.org/docs/latest/api/base-window#new-basewindowoptions" target="_blank" rel="noopener noreferrer" class="">content-sized</a> windows.)</p>
<p><a href="https://electronjs.org/assets/files/windowbounds-b41c7193d91e6981b341bb9acabdc6a6.png" target="_blank" class=""><img decoding="async" loading="lazy" alt="Diagram of an Electron app&amp;#39;s window and content bounds without CSD" src="https://electronjs.org/assets/images/windowbounds-b41c7193d91e6981b341bb9acabdc6a6.png" width="1650" height="1275" class="img_ev3q"></a></p>
<p>To support CSD, Electron also needed to keep track of a new kind of boundary:</p>
<ul>
<li class=""><strong>“widget bounds”</strong>, the size of the transparent widget which draws everything inside of it, including the window frame and its external decorations.</li>
</ul>
<p>When CSD is required, Electron first takes the window's underlying <a href="https://wayland.app/protocols/xdg-shell#xdg_surface" target="_blank" rel="noopener noreferrer" class="">surface</a> (accessed internally via a Chromium <a href="https://source.chromium.org/chromium/chromium/src/+/main:ui/ozone/platform/wayland/host/wayland_window.cc;l=94;drc=ac4eed7b549169cd64f0e15b503f4f0635dc1bd9" target="_blank" rel="noopener noreferrer" class="">accelerated widget</a>) and inflates it so it's large enough to fit all the decorations.</p>
<p>The framework then paints the opaque bits of the window (title bar, frame, and web content) at their appropriate sizes and positions inside the transparent widget. The outermost areas are filled in with drop shadows and resize hit targets, creating the look and feel of a native, three-dimensional window without relying on server-side decorations.</p>
<p>With CSD, a "logical" window at 800x600 might be inset into a 840x640 widget. The exact geometries depend on the user's theme and the window's state: whether it is currently active, maximized, tiled, or fullscreen can affect the size and presence of decorations.</p>
<p><a href="https://electronjs.org/assets/files/widgetbounds-e2921ef22f4dad4281d9cb74357b3d83.png" target="_blank" class=""><img decoding="async" loading="lazy" alt="Diagram of an Electron app&amp;#39;s full CSD bounds, including the transparent widget surrounding the window" src="https://electronjs.org/assets/images/widgetbounds-e2921ef22f4dad4281d9cb74357b3d83.png" width="1650" height="1275" class="img_ev3q"></a></p>
<p>Of course, widget bounds should never leak into the public API. The framework needs to abstract this complexity away from app developers, who are generally not thinking about the extents of resize targets or shadow insets changing underneath them.</p>
<p>The good news is that much of this was sorted out between last September and March, and as a result, Electron 41 supports CSD on Wayland in all window configurations, including frameless windows with <a href="https://www.electronjs.org/docs/latest/api/structures/base-window-options" target="_blank" rel="noopener noreferrer" class="">Window Controls Overlay</a>.</p>
<p><a href="https://electronjs.org/assets/files/vscodecsd-26e13ece78b184484cc8e27f122e3e99.png" target="_blank" class=""><img decoding="async" loading="lazy" alt="Screenshot of VS Code using a prerelease version of Electron 41.x with CSD shadows." src="https://electronjs.org/assets/images/vscodecsd-26e13ece78b184484cc8e27f122e3e99.png" width="1813" height="1316" class="img_ev3q"></a></p>
<h2 class="anchor anchorTargetStickyNavbar_Vzrq" id="whats-next--and-how-you-can-help">What’s next — and how you can help<a href="https://electronjs.org/blog/tech-talk-wayland#whats-next--and-how-you-can-help" class="hash-link" aria-label="Direct link to What’s next — and how you can help" title="Direct link to What’s next — and how you can help" translate="no">​</a></h2>
<p>Wayland is an everyday reality for Linux users in 2026, so a great Wayland experience is now just what it means to support Linux.</p>
<p>Electron reached an important milestone last month with the creation of a <a href="https://github.com/electron/electron/pull/49908" target="_blank" rel="noopener noreferrer" class="">Wayland test job in CI</a>. More tests still need to be ported over, but it’s now much easier to catch regressions.</p>
<p>Now that the basic support is in place, Wayland opens up new possibilities for Electron apps. CSD in particular offers developers more ways to customize window frames and integrate them with both their web content and the platform. <a href="https://github.com/electron/electron/issues" target="_blank" rel="noopener noreferrer" class="">Let us know</a> what you'd like to see; one feature that's high on my own shortlist is rounded corners.</p>
<p><a href="https://electronjs.org/assets/files/roundedcorners-da8eb9a58504779605f9f315f9a55392.png" target="_blank" class=""><img decoding="async" loading="lazy" alt="Screenshot of a frameless window with rounded corners (not currently possible in Electron, but soon?)" src="https://electronjs.org/assets/images/roundedcorners-da8eb9a58504779605f9f315f9a55392.png" width="1840" height="1439" class="img_ev3q"></a></p>
<p>The framework is only part of the story. If you develop an Electron app and you haven’t thoroughly tested it on Linux in a while (even as recently as last fall), give it a spin with Electron 41+ on a modern distribution like Ubuntu 25.10 or Fedora 43. Try your app on both KDE Plasma and GNOME, and maybe something more exotic like <a href="https://github.com/niri-wm/niri" target="_blank" rel="noopener noreferrer" class="">Niri</a>.</p>
<p>You may discover changes you could make to accommodate Wayland's unique constraints. Some differences are covered in the <a href="https://www.electronjs.org/docs/latest/api/browser-window" target="_blank" rel="noopener noreferrer" class="">Electron documentation</a>, but the best way to understand the new environment is to use it.</p>
<p>And if you’d like to see faster progress and support for more platform features, consider <a href="https://github.com/electron/electron/blob/main/CONTRIBUTING.md" target="_blank" rel="noopener noreferrer" class="">becoming a contributor</a>. Like Linux itself, Electron is a community-run <a href="https://openjsf.org/blog/electron-joins-the-openjs-foundation" target="_blank" rel="noopener noreferrer" class="">free software project</a> that’s open to everyone, and we're actively looking for Linux contributors and maintainers.</p>
<p>Electron powers many of the most popular desktop apps across platforms, so getting involved is an effective way to help make desktop Linux more viable for millions of people.</p>]]></content>
        <author>
            <name>mitchchn</name>
            <uri>https://github.com/mitchchn</uri>
        </author>
        <category label="Tech Talk" term="Tech Talk"/>
        <category label="Electron Internals" term="Electron Internals"/>
    </entry>
    <entry>
        <title type="html"><![CDATA[Electron 41]]></title>
        <id>https://electronjs.org/blog/electron-41-0</id>
        <link href="https://electronjs.org/blog/electron-41-0"/>
        <updated>2026-03-10T00:00:00.000Z</updated>
        <summary type="html"><![CDATA[Electron 41 has been released! It includes upgrades to Chromium 146.0.7680.65, V8 14.6, and Node v24.14.0.]]></summary>
        <content type="html"><![CDATA[<p>Electron 41 has been released! It includes upgrades to Chromium 146.0.7680.65, V8 14.6, and Node v24.14.0.</p>
<hr>
<p>The Electron team is excited to announce the release of Electron 41! You can install it with npm via <code>npm install electron@latest</code> or download it from our <a href="https://releases.electronjs.org/release?channel=stable" target="_blank" rel="noopener noreferrer" class="">releases website</a>. Continue reading for details about this release.</p>
<p>If you have any feedback, please share it with us on <a href="https://bsky.app/profile/electronjs.org" target="_blank" rel="noopener noreferrer" class="">Bluesky</a> or <a href="https://social.lfx.dev/@electronjs" target="_blank" rel="noopener noreferrer" class="">Mastodon</a>, or join our community <a href="https://discord.com/invite/electronjs" target="_blank" rel="noopener noreferrer" class="">Discord</a>! Bugs and feature requests can be reported in Electron's <a href="https://github.com/electron/electron/issues" target="_blank" rel="noopener noreferrer" class="">issue tracker</a>.</p>
<div class="theme-admonition theme-admonition-info admonition_xJq3 alert alert--info"><div class="admonitionHeading_Gvgb"><span class="admonitionIcon_Rf37"><svg viewBox="0 0 14 16"><path fill-rule="evenodd" d="M7 2.3c3.14 0 5.7 2.56 5.7 5.7s-2.56 5.7-5.7 5.7A5.71 5.71 0 0 1 1.3 8c0-3.14 2.56-5.7 5.7-5.7zM7 1C3.14 1 0 4.14 0 8s3.14 7 7 7 7-3.14 7-7-3.14-7-7-7zm1 3H6v5h2V4zm0 6H6v2h2v-2z"></path></svg></span>info</div><div class="admonitionContent_BuS1"><p>After publishing the initial 41.0.0 package, we integrated some high-priority
bugs into follow-up patch releases. We recommend installing <strong>41.0.2</strong> when
upgrading to Electron 41.</p></div></div>
<h2 class="anchor anchorTargetStickyNavbar_Vzrq" id="notable-changes">Notable Changes<a href="https://electronjs.org/blog/electron-41-0#notable-changes" class="hash-link" aria-label="Direct link to Notable Changes" title="Direct link to Notable Changes" translate="no">​</a></h2>
<h3 class="anchor anchorTargetStickyNavbar_Vzrq" id="asar-integrity-digest-for-improved-security">ASAR Integrity digest for improved security<a href="https://electronjs.org/blog/electron-41-0#asar-integrity-digest-for-improved-security" class="hash-link" aria-label="Direct link to ASAR Integrity digest for improved security" title="Direct link to ASAR Integrity digest for improved security" translate="no">​</a></h3>
<p>As of Electron 41, macOS Electron apps can now embed a digest of their <a href="https://www.electronjs.org/docs/latest/tutorial/asar-integrity" target="_blank" rel="noopener noreferrer" class="">ASAR Integrity</a> information. This adds an additional layer of tamper detection for apps that use ASAR Integrity by validating the integrity information itself at app launch.</p>
<p>To enable the feature for your app, you can run the following command with <code>@electron/asar</code> v4.1.0 and above:</p>
<div class="language-bash codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_QJqH"><pre tabindex="0" class="prism-code language-bash codeBlock_bY9V thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#393A34"><span class="token plain">asar integrity-digest on /path/to/YourApp.app</span><br></span></code></pre></div></div>
<p>You <strong><em>must</em></strong> re-sign your app afterwards. For more information, see <a href="https://github.com/electron/asar/blob/v4.1.0/README.md#integrity-digest" target="_blank" rel="noopener noreferrer" class="">the <code>@electron/asar</code> CLI documentation.</a></p>
<p>Support for this feature in <a href="https://electronforge.io/" target="_blank" rel="noopener noreferrer" class="">Electron Forge</a> is planned for the near future (<a href="https://github.com/electron/forge/pull/4159" target="_blank" rel="noopener noreferrer" class="">electron/forge#4159</a>).</p>
<h3 class="anchor anchorTargetStickyNavbar_Vzrq" id="improved-wayland-support">Improved Wayland support<a href="https://electronjs.org/blog/electron-41-0#improved-wayland-support" class="hash-link" aria-label="Direct link to Improved Wayland support" title="Direct link to Improved Wayland support" translate="no">​</a></h3>
<p>On Wayland (Linux), frameless windows now have drop shadows and extended resize boundaries. To create fully frameless windows with no decorations, set <code>hasShadow: false</code> in the window constructor. <a href="https://github.com/electron/electron/pull/49885" target="_blank" rel="noopener noreferrer" class="">#49885</a></p>
<p><a href="https://github.com/mitchchn" target="_blank" rel="noopener noreferrer" class="">Mitchell Cohen</a> is writing a blog article about recent work to improve Electron's support of Wayland and client-side decorations on Linux. Watch this space!</p>
<h3 class="anchor anchorTargetStickyNavbar_Vzrq" id="added-support-for-msix-auto-updating">Added support for MSIX auto-updating<a href="https://electronjs.org/blog/electron-41-0#added-support-for-msix-auto-updating" class="hash-link" aria-label="Direct link to Added support for MSIX auto-updating" title="Direct link to Added support for MSIX auto-updating" translate="no">​</a></h3>
<p>The Electron team recently added MSIX auto-updater support according to <a href="https://github.com/electron/rfcs/pull/21" target="_blank" rel="noopener noreferrer" class="">RFC #21</a>. You can now ship both MSIX and Squirrel.Mac in your update server essentially with the same JSON response format. See the <a href="https://www.electronjs.org/docs/latest/api/auto-updater" target="_blank" rel="noopener noreferrer" class="">autoUpdater documentation</a> for more information.</p>
<p>This was added in Electron 41 by <a href="https://github.com/electron/electron/pull/49586" target="_blank" rel="noopener noreferrer" class="">#49586</a> and has also been backported to Electron 39.5.0 (<a href="https://github.com/electron/electron/pull/49585" target="_blank" rel="noopener noreferrer" class="">#49585</a>) and 40.2.0 (<a href="https://github.com/electron/electron/pull/49587" target="_blank" rel="noopener noreferrer" class="">#49587</a>).</p>
<h2 class="anchor anchorTargetStickyNavbar_Vzrq" id="stack-changes">Stack Changes<a href="https://electronjs.org/blog/electron-41-0#stack-changes" class="hash-link" aria-label="Direct link to Stack Changes" title="Direct link to Stack Changes" translate="no">​</a></h2>
<ul>
<li class="">
<p>Chromium <code>146.0.7680.65</code></p>
<ul>
<li class=""><a href="https://developer.chrome.com/blog/new-in-chrome-146/" target="_blank" rel="noopener noreferrer" class="">New in 146</a></li>
<li class=""><a href="https://developer.chrome.com/blog/new-in-chrome-145/" target="_blank" rel="noopener noreferrer" class="">New in 145</a></li>
</ul>
</li>
<li class="">
<p>Node <code>v24.14.0</code></p>
<ul>
<li class=""><a href="https://nodejs.org/en/blog/release/v24.14.0" target="_blank" rel="noopener noreferrer" class="">Node 24.14.0 blog post</a></li>
<li class=""><a href="https://nodejs.org/en/blog/release/v24.13.1" target="_blank" rel="noopener noreferrer" class="">Node 24.13.1 blog post</a></li>
<li class=""><a href="https://nodejs.org/en/blog/release/v24.13.0" target="_blank" rel="noopener noreferrer" class="">Node 24.13.0 blog post</a></li>
<li class=""><a href="https://nodejs.org/en/blog/release/v24.12.0" target="_blank" rel="noopener noreferrer" class="">Node 24.12.0 blog post</a></li>
</ul>
</li>
<li class="">
<p>V8 <code>14.4</code></p>
<ul>
<li class=""><a href="https://chromium.googlesource.com/v8/v8.git/+/3f4b2d428486d982bf51d7c0487adcd9f73f5fd8" target="_blank" rel="noopener noreferrer" class="">V8 roll increment</a></li>
</ul>
</li>
</ul>
<p>Electron 41 upgrades Chromium from <code>144.0.7559.60</code> to <code>146.0.7680.65</code>, Node.js from <code>v24.11.1</code> to <code>v24.14.0</code>, and V8 from <code>14.4</code> to <code>14.6</code>.</p>
<h2 class="anchor anchorTargetStickyNavbar_Vzrq" id="new-features-and-improvements">New Features and Improvements<a href="https://electronjs.org/blog/electron-41-0#new-features-and-improvements" class="hash-link" aria-label="Direct link to New Features and Improvements" title="Direct link to New Features and Improvements" translate="no">​</a></h2>
<ul>
<li class="">Added <code>--disable-geolocation</code> command-line flag for macOS apps to disable location services. <a href="https://github.com/electron/electron/pull/45934" target="_blank" rel="noopener noreferrer" class="">#45934</a></li>
<li class="">Added NV12 support for import shared texture. <a href="https://github.com/electron/electron/pull/48922" target="_blank" rel="noopener noreferrer" class="">#48922</a> <sup>(Also in <a href="https://github.com/electron/electron/pull/49040" target="_blank" rel="noopener noreferrer" class="">40</a>)</sup></li>
<li class="">Added a <code>disclaim</code> option to the <code>utilityProcess</code> API to allow for TCC disclaiming on macOS. <a href="https://github.com/electron/electron/pull/49693" target="_blank" rel="noopener noreferrer" class="">#49693</a> <sup>(Also in <a href="https://github.com/electron/electron/pull/49696" target="_blank" rel="noopener noreferrer" class="">39</a>, <a href="https://github.com/electron/electron/pull/49695" target="_blank" rel="noopener noreferrer" class="">40</a>)</sup></li>
<li class="">Added a <code>reason</code> property to the <code>Notification</code> <code>'closed'</code> event on Windows to allow developers to know the reason the notification was dismissed. <a href="https://github.com/electron/electron/pull/50029" target="_blank" rel="noopener noreferrer" class="">#50029</a> <sup>(Also in <a href="https://github.com/electron/electron/pull/50030" target="_blank" rel="noopener noreferrer" class="">40</a>)</sup></li>
<li class="">Added an <code>usePrinterDefaultPageSize</code> option to <code>webContents.print()</code> to allow using the printer's default page size. <a href="https://github.com/electron/electron/pull/49812" target="_blank" rel="noopener noreferrer" class="">#49812</a></li>
<li class="">Added support for WebSocket authentication through the <code>login</code> event on <code>webContents</code>. <a href="https://github.com/electron/electron/pull/48512" target="_blank" rel="noopener noreferrer" class="">#48512</a> <sup>(Also in <a href="https://github.com/electron/electron/pull/49065" target="_blank" rel="noopener noreferrer" class="">39</a>, <a href="https://github.com/electron/electron/pull/49064" target="_blank" rel="noopener noreferrer" class="">40</a>)</sup></li>
<li class="">Added support for the Node.js <a href="https://nodejs.org/docs/latest-v22.x/api/cli.html#--experimental-transform-types" target="_blank" rel="noopener noreferrer" class=""><code>--experimental-transform-types</code></a> flag. <a href="https://github.com/electron/electron/pull/49882" target="_blank" rel="noopener noreferrer" class="">#49882</a> <sup>(Also in <a href="https://github.com/electron/electron/pull/49881" target="_blank" rel="noopener noreferrer" class="">39</a>, <a href="https://github.com/electron/electron/pull/49883" target="_blank" rel="noopener noreferrer" class="">40</a>)</sup></li>
<li class="">Added support for <code>long-animation-frame</code> script attribution (via <code>--enable-features=AlwaysLogLOAFURL</code>). <a href="https://github.com/electron/electron/pull/49773" target="_blank" rel="noopener noreferrer" class="">#49773</a> <sup>(Also in <a href="https://github.com/electron/electron/pull/49771" target="_blank" rel="noopener noreferrer" class="">39</a>, <a href="https://github.com/electron/electron/pull/49772" target="_blank" rel="noopener noreferrer" class="">40</a>)</sup></li>
<li class="">Added the ability to disable auto-focusing of <code>WebContents</code> on navigation using <code>webPreferences.focusOnNavigation</code>. <a href="https://github.com/electron/electron/pull/49511" target="_blank" rel="noopener noreferrer" class="">#49511</a> <sup>(Also in <a href="https://github.com/electron/electron/pull/49512" target="_blank" rel="noopener noreferrer" class="">40</a>)</sup></li>
<li class="">Irrelevant errors from the Chromium DevTools frontend are now silenced in the main process. <a href="https://github.com/electron/electron/pull/49292" target="_blank" rel="noopener noreferrer" class="">#49292</a> <sup>(Also in <a href="https://github.com/electron/electron/pull/49359" target="_blank" rel="noopener noreferrer" class="">40</a>)</sup></li>
<li class="">Enable V8 trap handlers for WASM behind <code>WasmTrapHandlers</code> <a href="https://www.electronjs.org/docs/latest/tutorial/fuses" target="_blank" rel="noopener noreferrer" class="">fuse</a>. <a href="https://github.com/electron/electron/pull/49839" target="_blank" rel="noopener noreferrer" class="">#49839</a></li>
<li class="">Extended actions support for Windows notifications to include buttons, select dropdowns, and replies. <a href="https://github.com/electron/electron/pull/49787" target="_blank" rel="noopener noreferrer" class="">#49787</a> <sup>(Also in <a href="https://github.com/electron/electron/pull/49786" target="_blank" rel="noopener noreferrer" class="">40</a>)</sup></li>
</ul>
<h3 class="anchor anchorTargetStickyNavbar_Vzrq" id="breaking-changes">Breaking Changes<a href="https://electronjs.org/blog/electron-41-0#breaking-changes" class="hash-link" aria-label="Direct link to Breaking Changes" title="Direct link to Breaking Changes" translate="no">​</a></h3>
<h4 class="anchor anchorTargetStickyNavbar_Vzrq" id="behavior-changed-pdfs-no-longer-create-a-separate-webcontents">Behavior Changed: PDFs no longer create a separate WebContents<a href="https://electronjs.org/blog/electron-41-0#behavior-changed-pdfs-no-longer-create-a-separate-webcontents" class="hash-link" aria-label="Direct link to Behavior Changed: PDFs no longer create a separate WebContents" title="Direct link to Behavior Changed: PDFs no longer create a separate WebContents" translate="no">​</a></h4>
<p>Previously, PDF resources created a separate guest <a href="https://www.electronjs.org/docs/latest/api/web-contents" target="_blank" rel="noopener noreferrer" class=""><code>WebContents</code></a> for rendering. Now, PDFs are rendered within the same <code>WebContents</code> instead. If you have code to detect PDF resources, use the <a href="https://www.electronjs.org/docs/latest/api/web-frame-main" target="_blank" rel="noopener noreferrer" class="">frame tree</a> instead of <code>WebContents</code>.</p>
<p>Under the hood, Chromium <a href="https://chromium-review.googlesource.com/c/chromium/src/+/7239572" target="_blank" rel="noopener noreferrer" class="">enabled</a> a feature that changes PDFs to use out-of-process iframes (OOPIFs) instead of the <code>MimeHandlerViewGuest</code> extension.</p>
<h4 class="anchor anchorTargetStickyNavbar_Vzrq" id="behavior-changed-updated-cookie-change-cause-in-the-cookie-changed-event">Behavior Changed: Updated Cookie Change Cause in the Cookie <code>'changed'</code> Event<a href="https://electronjs.org/blog/electron-41-0#behavior-changed-updated-cookie-change-cause-in-the-cookie-changed-event" class="hash-link" aria-label="Direct link to behavior-changed-updated-cookie-change-cause-in-the-cookie-changed-event" title="Direct link to behavior-changed-updated-cookie-change-cause-in-the-cookie-changed-event" translate="no">​</a></h4>
<p>We have updated the cookie change cause in the cookie <a href="https://www.electronjs.org/docs/latest/api/cookies#event-changed" target="_blank" rel="noopener noreferrer" class=""><code>'changed'</code> event</a>.
When a new cookie is set, the change cause is <code>inserted</code>.
When a cookie is deleted, the change cause remains <code>explicit</code>.
When the cookie being set is identical to an existing one (same name, domain, path, and value, with no actual changes), the change cause is <code>inserted-no-change-overwrite</code>.
When the value of the cookie being set remains unchanged but some of its attributes are updated, such as the expiration attribute, the change cause will be <code>inserted-no-value-change-overwrite</code>.</p>
<h2 class="anchor anchorTargetStickyNavbar_Vzrq" id="end-of-support-for-38xy">End of Support for 38.x.y<a href="https://electronjs.org/blog/electron-41-0#end-of-support-for-38xy" class="hash-link" aria-label="Direct link to End of Support for 38.x.y" title="Direct link to End of Support for 38.x.y" translate="no">​</a></h2>
<p>Electron 38.x.y has reached end-of-support as per the project's <a href="https://www.electronjs.org/docs/latest/tutorial/electron-timelines#version-support-policy" target="_blank" rel="noopener noreferrer" class="">support policy</a>. Developers and applications are encouraged to upgrade to a newer version of Electron. See <a href="https://releases.electronjs.org/schedule" target="_blank" rel="noopener noreferrer" class="">https://releases.electronjs.org/schedule</a> to see the timeline for supported versions of Electron.</p>
<h2 class="anchor anchorTargetStickyNavbar_Vzrq" id="whats-next">What's Next<a href="https://electronjs.org/blog/electron-41-0#whats-next" class="hash-link" aria-label="Direct link to What's Next" title="Direct link to What's Next" translate="no">​</a></h2>
<p>In the short term, you can expect the team to continue to focus on keeping up with the development of the major components that make up Electron, including Chromium, Node, and V8.</p>
<p>You can find <a href="https://www.electronjs.org/docs/latest/tutorial/electron-timelines" target="_blank" rel="noopener noreferrer" class="">Electron's public timeline here</a>.</p>
<p>More information about future changes can be found on the <a href="https://github.com/electron/electron/blob/main/docs/breaking-changes.md" target="_blank" rel="noopener noreferrer" class="">Planned Breaking Changes</a> page.</p>]]></content>
        <author>
            <name>ckerr</name>
            <uri>https://github.com/ckerr</uri>
        </author>
        <author>
            <name>nmggithub</name>
            <uri>https://github.com/nmggithub</uri>
        </author>
        <category label="Release" term="Release"/>
    </entry>
    <entry>
        <title type="html"><![CDATA[Electron 40.0.0]]></title>
        <id>https://electronjs.org/blog/electron-40-0</id>
        <link href="https://electronjs.org/blog/electron-40-0"/>
        <updated>2026-01-13T00:00:00.000Z</updated>
        <summary type="html"><![CDATA[Electron 40.0.0 has been released! It includes upgrades to Chromium 144.0.7559.60, V8 14.4, and Node 24.11.1.]]></summary>
        <content type="html"><![CDATA[<p>Electron 40.0.0 has been released! It includes upgrades to Chromium 144.0.7559.60, V8 14.4, and Node 24.11.1.</p>
<hr>
<p>The Electron team is excited to announce the release of Electron 40.0.0! You can install it with npm via <code>npm install electron@latest</code> or download it from our <a href="https://releases.electronjs.org/release?channel=stable" target="_blank" rel="noopener noreferrer" class="">releases website</a>. Continue reading for details about this release.</p>
<p>If you have any feedback, please share it with us on <a href="https://bsky.app/profile/electronjs.org" target="_blank" rel="noopener noreferrer" class="">Bluesky</a> or <a href="https://social.lfx.dev/@electronjs" target="_blank" rel="noopener noreferrer" class="">Mastodon</a>, or join our community <a href="https://discord.com/invite/electronjs" target="_blank" rel="noopener noreferrer" class="">Discord</a>! Bugs and feature requests can be reported in Electron's <a href="https://github.com/electron/electron/issues" target="_blank" rel="noopener noreferrer" class="">issue tracker</a>.</p>
<h2 class="anchor anchorTargetStickyNavbar_Vzrq" id="stack-changes">Stack Changes<a href="https://electronjs.org/blog/electron-40-0#stack-changes" class="hash-link" aria-label="Direct link to Stack Changes" title="Direct link to Stack Changes" translate="no">​</a></h2>
<ul>
<li class="">
<p>Chromium <code>144.0.7559.60</code></p>
<ul>
<li class=""><a href="https://developer.chrome.com/blog/new-in-chrome-144/" target="_blank" rel="noopener noreferrer" class="">New in 144</a></li>
<li class=""><a href="https://developer.chrome.com/blog/new-in-chrome-143/" target="_blank" rel="noopener noreferrer" class="">New in 143</a></li>
</ul>
</li>
<li class="">
<p>Node <code>v24.11.1</code></p>
<ul>
<li class=""><a href="https://nodejs.org/en/blog/release/v24.11.1/" target="_blank" rel="noopener noreferrer" class="">Node 24.11.1 blog post</a></li>
</ul>
</li>
<li class="">
<p>V8 <code>14.4</code></p>
<ul>
<li class=""><a href="https://chromium.googlesource.com/v8/v8.git/+/e4746e7564d601ae4dfb8355c0d7af00d1178694" target="_blank" rel="noopener noreferrer" class="">V8 roll increment</a></li>
</ul>
</li>
</ul>
<p>Electron 40 upgrades Chromium from <code>142.0.7444.52</code> to <code>144.0.7559.60</code>, Node.js from <code>v22.20.0</code> to <code>v24.11.1</code>, and V8 from <code>14.2</code> to <code>14.4</code>.</p>
<h3 class="anchor anchorTargetStickyNavbar_Vzrq" id="new-features-and-improvements">New Features and Improvements<a href="https://electronjs.org/blog/electron-40-0#new-features-and-improvements" class="hash-link" aria-label="Direct link to New Features and Improvements" title="Direct link to New Features and Improvements" translate="no">​</a></h3>
<ul>
<li class="">Added <code>"memory-eviction"</code> as a possible reason for a child process to exit. <a href="https://github.com/electron/electron/pull/48362" target="_blank" rel="noopener noreferrer" class="">#48362</a></li>
<li class="">Added <code>bypassCustomProtocolHandlers</code> option to <code>net.request</code>. <a href="https://github.com/electron/electron/pull/48883" target="_blank" rel="noopener noreferrer" class="">#48883</a> <sup>(Also in <a href="https://github.com/electron/electron/pull/48881" target="_blank" rel="noopener noreferrer" class="">38</a>, <a href="https://github.com/electron/electron/pull/48882" target="_blank" rel="noopener noreferrer" class="">39</a>)</sup></li>
<li class="">Added support to import external shared texture as <code>VideoFrame</code>. <a href="https://github.com/electron/electron/pull/48831" target="_blank" rel="noopener noreferrer" class="">#48831</a></li>
<li class="">Automatically focus DevTools when element is inspected or breakpoint is triggered. <a href="https://github.com/electron/electron/pull/46386" target="_blank" rel="noopener noreferrer" class="">#46386</a> <sup>(Also in <a href="https://github.com/electron/electron/pull/48703" target="_blank" rel="noopener noreferrer" class="">37</a>, <a href="https://github.com/electron/electron/pull/48701" target="_blank" rel="noopener noreferrer" class="">38</a>, <a href="https://github.com/electron/electron/pull/48702" target="_blank" rel="noopener noreferrer" class="">39</a>)</sup></li>
<li class="">Enabled resetting accent color to follow system accent settings if a previous color has been set via <code>window.setAccentColor(null)</code>. <a href="https://github.com/electron/electron/pull/48274" target="_blank" rel="noopener noreferrer" class="">#48274</a> <sup>(Also in <a href="https://github.com/electron/electron/pull/48853" target="_blank" rel="noopener noreferrer" class="">38</a>, <a href="https://github.com/electron/electron/pull/48852" target="_blank" rel="noopener noreferrer" class="">39</a>)</sup></li>
<li class="">Updated <code>nativeImage.createFromNamedImage</code> to support SF Symbol names. <a href="https://github.com/electron/electron/pull/48772" target="_blank" rel="noopener noreferrer" class="">#48772</a> <sup>(Also in <a href="https://github.com/electron/electron/pull/48773" target="_blank" rel="noopener noreferrer" class="">39</a>)</sup></li>
</ul>
<h3 class="anchor anchorTargetStickyNavbar_Vzrq" id="breaking-changes">Breaking Changes<a href="https://electronjs.org/blog/electron-40-0#breaking-changes" class="hash-link" aria-label="Direct link to Breaking Changes" title="Direct link to Breaking Changes" translate="no">​</a></h3>
<h4 class="anchor anchorTargetStickyNavbar_Vzrq" id="deprecated-clipboard-api-access-from-renderer-processes">Deprecated: clipboard API access from renderer processes<a href="https://electronjs.org/blog/electron-40-0#deprecated-clipboard-api-access-from-renderer-processes" class="hash-link" aria-label="Direct link to Deprecated: clipboard API access from renderer processes" title="Direct link to Deprecated: clipboard API access from renderer processes" translate="no">​</a></h4>
<p>Using the <code>clipboard</code> API directly in the renderer process is deprecated. If you want to call this API from a renderer process, place the API call in your preload script and expose it using the <code>contextBridge</code> API.</p>
<h4 class="anchor anchorTargetStickyNavbar_Vzrq" id="behavior-changed-macos-dsym-files-now-compressed-with-tarxz">Behavior Changed: macOS dSYM files now compressed with tar.xz<a href="https://electronjs.org/blog/electron-40-0#behavior-changed-macos-dsym-files-now-compressed-with-tarxz" class="hash-link" aria-label="Direct link to Behavior Changed: macOS dSYM files now compressed with tar.xz" title="Direct link to Behavior Changed: macOS dSYM files now compressed with tar.xz" translate="no">​</a></h4>
<p>Debug symbols for macOS (dSYM) now use xz compression in order to handle larger file sizes. <code>dsym.zip</code> files are now <code>dsym.tar.xz</code> files. End users using debug symbols may need to update their zip utilities.</p>
<h2 class="anchor anchorTargetStickyNavbar_Vzrq" id="end-of-support-for-37xy">End of Support for 37.x.y<a href="https://electronjs.org/blog/electron-40-0#end-of-support-for-37xy" class="hash-link" aria-label="Direct link to End of Support for 37.x.y" title="Direct link to End of Support for 37.x.y" translate="no">​</a></h2>
<p>Electron 37.x.y has reached end-of-support as per the project's <a href="https://www.electronjs.org/docs/latest/tutorial/electron-timelines#version-support-policy" target="_blank" rel="noopener noreferrer" class="">support policy</a>. Developers and applications are encouraged to upgrade to a newer version of Electron.</p>
<table><thead><tr><th>E40 (Jan'26)</th><th>E41 (Mar'26)</th><th>E42 (May'26)</th></tr></thead><tbody><tr><td>40.x.y</td><td>41.x.y</td><td>42.x.y</td></tr><tr><td>39.x.y</td><td>40.x.y</td><td>41.x.y</td></tr><tr><td>38.x.y</td><td>39.x.y</td><td>40.x.y</td></tr></tbody></table>
<h2 class="anchor anchorTargetStickyNavbar_Vzrq" id="whats-next">What's Next<a href="https://electronjs.org/blog/electron-40-0#whats-next" class="hash-link" aria-label="Direct link to What's Next" title="Direct link to What's Next" translate="no">​</a></h2>
<p>In the short term, you can expect the team to continue to focus on keeping up with the development of the major components that make up Electron, including Chromium, Node, and V8.</p>
<p>You can find <a href="https://www.electronjs.org/docs/latest/tutorial/electron-timelines" target="_blank" rel="noopener noreferrer" class="">Electron's public timeline here</a>.</p>
<p>More information about future changes can be found on the <a href="https://github.com/electron/electron/blob/main/docs/breaking-changes.md" target="_blank" rel="noopener noreferrer" class="">Planned Breaking Changes</a> page.</p>]]></content>
        <author>
            <name>mlaurencin</name>
            <uri>https://github.com/mlaurencin</uri>
        </author>
        <category label="Release" term="Release"/>
    </entry>
    <entry>
        <title type="html"><![CDATA[Tech Talk: Improving Window Resize Behavior]]></title>
        <id>https://electronjs.org/blog/tech-talk-window-resize-behavior</id>
        <link href="https://electronjs.org/blog/tech-talk-window-resize-behavior"/>
        <updated>2025-12-19T00:00:00.000Z</updated>
        <summary type="html"><![CDATA[We're launching a new blog post series where we share glimpses into our work on Electron. If you find this work interesting, please consider contributing!]]></summary>
        <content type="html"><![CDATA[<p><em>We're launching a new blog post series where we share glimpses into our work on Electron. If you find this work interesting, please consider <a href="https://github.com/electron/electron/" target="_blank" rel="noopener noreferrer" class="">contributing</a>!</em></p>
<hr>
<p>Recently, I worked on improving Electron and Chromium's window resize behavior.</p>
<h2 class="anchor anchorTargetStickyNavbar_Vzrq" id="the-bug">The bug<a href="https://electronjs.org/blog/tech-talk-window-resize-behavior#the-bug" class="hash-link" aria-label="Direct link to The bug" title="Direct link to The bug" translate="no">​</a></h2>
<p>We were seeing an issue on Windows where old frames would become visible while resizing a window:</p>
<p><img decoding="async" loading="lazy" alt="Animated GIF showing the issue where old frames would be shown while resizing windows" src="https://electronjs.org/assets/images/window-resize-bug-showing-old-frames-4d3f73d4b7d13e44539ca65120662a43.gif" width="860" height="493" class="img_ev3q"></p>
<h2 class="anchor anchorTargetStickyNavbar_Vzrq" id="what-made-this-bug-particularly-interesting">What made this bug particularly interesting?<a href="https://electronjs.org/blog/tech-talk-window-resize-behavior#what-made-this-bug-particularly-interesting" class="hash-link" aria-label="Direct link to What made this bug particularly interesting?" title="Direct link to What made this bug particularly interesting?" translate="no">​</a></h2>
<ol>
<li class="">It was challenging.</li>
<li class="">It was deep in a large codebase.</li>
<li class="">As you'll see later, there were two different bugs under the hood.</li>
</ol>
<h2 class="anchor anchorTargetStickyNavbar_Vzrq" id="fixing-the-bug">Fixing the bug<a href="https://electronjs.org/blog/tech-talk-window-resize-behavior#fixing-the-bug" class="hash-link" aria-label="Direct link to Fixing the bug" title="Direct link to Fixing the bug" translate="no">​</a></h2>
<p>With a bug like this, the first challenge is figuring out where to start looking.</p>
<p>Electron builds upon Chromium, the open source version of Google Chrome. When compiling Electron, Electron's source code is added into the Chromium source tree as a subdirectory. Electron then relies on Chromium's code to provide most of the functionality of a modern browser.</p>
<p>Chromium has about 36 million lines of code. Electron is a large project, too. That is a lot of code that could be causing this issue.</p>
<h2 class="anchor anchorTargetStickyNavbar_Vzrq" id="narrowing-down-the-root-cause">Narrowing down the root cause<a href="https://electronjs.org/blog/tech-talk-window-resize-behavior#narrowing-down-the-root-cause" class="hash-link" aria-label="Direct link to Narrowing down the root cause" title="Direct link to Narrowing down the root cause" translate="no">​</a></h2>
<p>I did a lot of experimentation.</p>
<p>First, I noticed that the issue occurred in Google Chrome, too:</p>
<p><img decoding="async" loading="lazy" alt="Screenshot of Google Chrome also showing the resize issue" src="https://electronjs.org/assets/images/google-chrome-repro-4fdc95d866a64783be6bb64eef2f2cab.png" width="3022" height="1818" class="img_ev3q"></p>
<p>This suggested that the issue was likely in Chromium, not in Electron.</p>
<p>Additionally, the issue was not visible on macOS. That suggested that it was in Windows-specific source code.</p>
<h2 class="anchor anchorTargetStickyNavbar_Vzrq" id="the-crucial-lead">The crucial lead<a href="https://electronjs.org/blog/tech-talk-window-resize-behavior#the-crucial-lead" class="hash-link" aria-label="Direct link to The crucial lead" title="Direct link to The crucial lead" translate="no">​</a></h2>
<p>I tried a lot of different command line flags and configuration options.</p>
<p>I noticed that <a class="" href="https://electronjs.org/docs/latest/api/app#appdisablehardwareacceleration"><code>app.disableHardwareAcceleration()</code></a> fixed the issue. Without hardware acceleration, the issue was gone.</p>
<p>Here is some context: Chromium supports various different graphics APIs for showing pixels on screen (OpenGL, Vulkan, Metal, and more). On Windows, it uses different graphics APIs than on macOS or Linux. Even on Windows, Chromium can work with multiple different graphics backends.</p>
<p>Which graphics backend Chromium uses depends on the user's hardware. For example, some graphics backends require the computer to have a GPU.</p>
<p>I tried various graphics backends and noticed that the following flags fixed the issue:</p>
<ul>
<li class=""><code>--use-angle=warp</code></li>
<li class=""><code>--use-angle=vulkan</code></li>
<li class=""><code>--use-gl=desktop</code></li>
<li class=""><code>--use-gl=egl</code></li>
<li class=""><code>--use-gl=osmesa</code></li>
<li class=""><code>--use-gl=swiftshader</code></li>
</ul>
<p>The following flags reproduced the issue:</p>
<ul>
<li class=""><code>--use-angle=d3d11</code> (this is currently the default on Windows)</li>
<li class=""><code>--use-angle=gl</code> (falls back to Direct3D 11 on Windows, see <code>chrome://gpu/</code>)</li>
</ul>
<p>None of the working flags were good enough to be used as the default in Electron apps on Windows. They were either too slow or lacked broad driver support.</p>
<p>However, these workarounds pointed me into the right direction. They showed that the issue was in a code path that was only used with the ANGLE Direct3D 11 backend.</p>
<p><a href="https://en.wikipedia.org/wiki/Direct3D" target="_blank" rel="noopener noreferrer" class="">Direct3D</a> is a Windows API for hardware-accelerated graphics.</p>
<p><a href="https://en.wikipedia.org/wiki/ANGLE_(software)" target="_blank" rel="noopener noreferrer" class="">ANGLE</a> is a library that translates OpenGL calls into calls to the native graphics API of the given operating system, here Direct3D. ANGLE allows Chromium developers to write OpenGL calls on all platforms. ANGLE then translates them into Direct3D, Vulkan, or Metal API calls, depending on which graphics API is used.</p>
<h2 class="anchor anchorTargetStickyNavbar_Vzrq" id="locating-the-relevant-chromium-component">Locating the relevant Chromium component<a href="https://electronjs.org/blog/tech-talk-window-resize-behavior#locating-the-relevant-chromium-component" class="hash-link" aria-label="Direct link to Locating the relevant Chromium component" title="Direct link to Locating the relevant Chromium component" translate="no">​</a></h2>
<p>Chromium references Direct3D in tens of thousands of places. It wasn't realistic to go through all of them.</p>
<p>By chance, I stumbled across a few helpful debugging flags in the Chromium source code:</p>
<ul>
<li class=""><code>--ui-show-paint-rects</code></li>
<li class=""><code>--ui-show-property-changed-rects</code></li>
<li class=""><code>--ui-show-surface-damage-rects</code></li>
<li class=""><code>--ui-show-composited-layer-borders</code></li>
<li class=""><code>--tint-composited-content</code></li>
<li class=""><code>--tint-composited-content-modulate</code></li>
<li class="">(And more)</li>
</ul>
<p>They highlight areas of the browser window that were redrawn or updated by different parts of the Chromium graphics stack.</p>
<p>That allowed me to see which part of the graphics stack was producing which output.</p>
<p>In particular, the combination of <code>--tint-composited-content</code> and <code>--tint-composited-content-modulate</code> was really helpful. The former adds a tint to the output of the compositor. The latter changes the tint color on every frame.</p>
<p><img decoding="async" loading="lazy" alt="Screenshot of Chromium with the --tint-composited-content flag" src="https://electronjs.org/assets/images/tinting-composited-content-07a6dd4403f9d11c087c76cbc0a21d85.png" width="3022" height="1810" class="img_ev3q"></p>
<p>In the screenshot, the cyan-tinted frame was the last frame that was being drawn.</p>
<p>The jank to the right of that frame was not tinted cyan. It was tinted in different colors that were still there from previous frames. This indicated that the jank was not coming from the compositor. The compositor was sending the right output.</p>
<p>The compositor is part of Chromium's graphics stack. The following is very simplified, but for the purpose of this blog post you can imagine it like this:</p>
<ol>
<li class="">The compositor <code>cc</code> produces a <code>CompositorFrame</code>, which contains draw instructions.</li>
<li class=""><code>cc</code> sends that <code>CompositorFrame</code> to the display compositor <code>viz</code>.</li>
<li class=""><code>viz</code> then draws the frame and shows it on screen.</li>
</ol>
<p>Tinting each <code>CompositorFrame</code> showed that the compositor produced the right output. So the issue had to be in the display compositor <code>viz</code>.</p>
<h2 class="anchor anchorTargetStickyNavbar_Vzrq" id="locating-the-relevant-viz-code">Locating the relevant <code>viz</code> code<a href="https://electronjs.org/blog/tech-talk-window-resize-behavior#locating-the-relevant-viz-code" class="hash-link" aria-label="Direct link to locating-the-relevant-viz-code" title="Direct link to locating-the-relevant-viz-code" translate="no">​</a></h2>
<p>From there, I started searching for mentions of Direct3D in the <code>viz</code> source code.</p>
<p><em>Note: From here on, the post will get a bit more technical and reference source code symbols.</em></p>
<p>I found that on the ANGLE Direct3D 11 backend, Chromium uses the Windows <a href="https://learn.microsoft.com/en-us/windows/win32/directcomp/directcomposition-portal" target="_blank" rel="noopener noreferrer" class="">DirectComposition</a> API for drawing the window contents.</p>
<p>Chromium's DirectComposition <code>OutputSurface</code> differs from most other output surfaces in Chromium. It has the capability <code>supports_viewporter</code> (<a href="https://source.chromium.org/chromium/chromium/src/+/main:ui/gl/dcomp_presenter.cc;l=144-146;drc=1cffe9643e1e70f1f369bbb28e015d9c5f968546" target="_blank" rel="noopener noreferrer" class="">source link 1</a>, <a href="https://source.chromium.org/chromium/chromium/src/+/main:components/viz/service/display/output_surface.h;l=100-103;drc=c96a878b1cb45f60aac2285ffbdbd6b53dc92415" target="_blank" rel="noopener noreferrer" class="">source link 2</a>).</p>
<p>An output surface is a bitmap that can be drawn to, often backed by a GPU texture.</p>
<p>Without <code>supports_viewporter</code>, whenever the window size changes, Chromium will create a new output surface matching the new window size. Then it will draw on that surface and show it.</p>
<p><code>supports_viewporter</code> tries to reduce these costly surface allocations. With <code>supports_viewporter</code>, Chromium will not allocate a new surface on every resize. Instead, it will allocate a surface that is too large for what we need to draw. Then it will only paint to and show a certain sub-rectangle (the "viewport") of that surface on screen. The other parts of the surface are not supposed to be shown on screen.</p>
<p>This is supposed to make resizing more efficient because all Chromium needs to do is pad the surface to the proper width and height instead of allocating a new surface on every resize. This surface resize logic lives in <a href="https://source.chromium.org/chromium/chromium/src/+/main:components/viz/service/display/direct_renderer.cc;l=1082;drc=c96a878b1cb45f60aac2285ffbdbd6b53dc92415" target="_blank" rel="noopener noreferrer" class=""><code>direct_renderer.cc</code></a>.</p>
<p>Here's what that looks like:</p>
<p><img decoding="async" loading="lazy" alt="Visualization showing the surface, viewport, and clip rect" src="https://electronjs.org/assets/images/visualization-1-da8acf1dbc52d6530cc4d1654c396a46.png" width="2363" height="1074" class="img_ev3q"></p>
<p>Let me explain:</p>
<ul>
<li class="">The blue rectangle is our surface.</li>
<li class="">The green area is our viewport, i.e., the area of the surface that is supposed to be visible and that we actively draw to.</li>
<li class="">The red rectangle is our clip rect(angle), i.e., the part of the surface that is actually being shown on screen.</li>
</ul>
<p>As a performance optimization, only the viewport (the green area) is repainted when we get a new frame. The rest is left unchanged. This is important. We only ever repaint the green viewport. We don't update the areas outside of the viewport.</p>
<p>When we resize the window, what's supposed to happen is that in an atomic transaction (= at the exact same time) we repaint the viewport (= the area that's supposed to be visible on screen) and then update the clip rect to clip the surface to the new viewport size.</p>
<p>After the resize, it should look like this:</p>
<p><img decoding="async" loading="lazy" alt="Visualization with updated viewport and clip rect" src="https://electronjs.org/assets/images/visualization-2-c94901caccb784bed5548e159abf88d8.png" width="2363" height="1074" class="img_ev3q"></p>
<p>And that's where we get to the first of our two bugs.</p>
<h2 class="anchor anchorTargetStickyNavbar_Vzrq" id="first-bug">First bug<a href="https://electronjs.org/blog/tech-talk-window-resize-behavior#first-bug" class="hash-link" aria-label="Direct link to First bug" title="Direct link to First bug" translate="no">​</a></h2>
<p>Sometimes these operations can get out of sync. For example, the clip rect might get updated before the viewport is repainted. Then we get a result like this:</p>
<p><img decoding="async" loading="lazy" alt="Visualization where the clip rect was updated before the viewport" src="https://electronjs.org/assets/images/visualization-3-591fc7ac330ff6a128a21a77c1d7a5a7.png" width="2363" height="1074" class="img_ev3q"></p>
<p>We still show the old frame in the green viewport. But the clip rect has become larger and we show areas of the surface that we haven't repainted yet.</p>
<p>On the first resize of a window, these areas would be black. On the second resize, those areas would be filled with old pixel values. They would show whatever we had previously painted in those areas.</p>
<p>Similarly, in a certain edge case while making the window smaller, we would sometimes repaint the viewport before we would update the clip rect.</p>
<p><img decoding="async" loading="lazy" alt="Visualization where the viewport was repainted before the clip rect was updated" src="https://electronjs.org/assets/images/visualization-4-f3426cb7df0dcf75d76bf465c5f9c8fe.png" width="2363" height="1074" class="img_ev3q"></p>
<p>Then parts of the clip rect would still show the previous frame because the new frame was smaller and we did not repaint any areas beyond the new viewport.</p>
<p>Now why do these operations not happen in sync?</p>
<p>We use two different Windows APIs here:</p>
<ul>
<li class=""><a href="https://source.chromium.org/chromium/chromium/src/+/main:gpu/command_buffer/service/shared_image/dxgi_swap_chain_image_backing.cc;l=283;drc=92e802d8fa66bafb0cca9ed32143d6148d8e0411" target="_blank" rel="noopener noreferrer" class=""><code>IDXGISwapChain1::Present1</code></a> — This shows the new pixels on screen / updates the new viewport.</li>
<li class=""><a href="https://source.chromium.org/chromium/chromium/src/+/main:ui/gl/dc_layer_tree.cc;l=1034;drc=35d26d364efb57d0386b98312ba739f7f65ae97e" target="_blank" rel="noopener noreferrer" class=""><code>IDCompositionDevice::Commit</code></a> — This updates the clip rect.</li>
</ul>
<p>Here's what's important to understand: both functions return synchronously on the CPU. However, they schedule tasks that run asynchronously on the GPU at a later time. Windows and its services (such as <a href="https://en.wikipedia.org/wiki/Desktop_Window_Manager" target="_blank" rel="noopener noreferrer" class="">DWM</a>) decide when these tasks will run and in which order. So they take effect asynchronously, and not always within the same frame.</p>
<p>Unfortunately, Windows provides no way for us to synchronize those operations. So I had to find other approaches to fix this.</p>
<p>There were two options that I evaluated with the Chromium maintainers:</p>
<ol>
<li class="">While resizing, paint all previously drawn areas outside of the viewport transparent. This makes those areas invisible. It fixes the artifacts.</li>
<li class="">While resizing, switch from an <code>IDXGISwapChain1</code> to a DirectComposition surface which synchronizes updates with <code>IDCompositionDevice::Commit</code>. This also fixes the artifacts.</li>
</ol>
<p>We went with the first option because it leads to faster resizes than the second option.</p>
<p>I landed a <a href="https://crrev.com/c/7115438" target="_blank" rel="noopener noreferrer" class="">patch</a> in Chromium that implemented that first solution.</p>
<p>I also submitted two other patches in preparation for the main patch:</p>
<ol>
<li class="">The <a href="https://crrev.com/c/7129658" target="_blank" rel="noopener noreferrer" class="">first one</a> fixed a bug in existing code that would make CI fail in combination with the main patch. It also made launching Electron apps and Chrome a tiny bit faster.</li>
<li class="">The <a href="https://crrev.com/c/7210913" target="_blank" rel="noopener noreferrer" class="">second one</a> was split off to make code review easier on the main patch.</li>
</ol>
<h2 class="anchor anchorTargetStickyNavbar_Vzrq" id="second-bug">Second bug<a href="https://electronjs.org/blog/tech-talk-window-resize-behavior#second-bug" class="hash-link" aria-label="Direct link to Second bug" title="Direct link to Second bug" translate="no">​</a></h2>
<p>In addition to this first bug, there was a second bug which also led to stale pixels.</p>
<p>Here's what was going on there:</p>
<p>When the user resizes the window, Chromium needs to redraw the contents of the window for the new window size. This takes some time. The new frame isn't ready immediately.</p>
<p>Here's a sequence of frames that demonstrates this:</p>
<p><img decoding="async" loading="lazy" alt="First frame of the Chromium resize sequence" src="https://electronjs.org/assets/images/chromium-resize-sequence-1-1506e1883e774679eb634cc3015ed384.png" width="3248" height="2120" class="img_ev3q">
<img decoding="async" loading="lazy" alt="Second frame of the Chromium resize sequence" src="https://electronjs.org/assets/images/chromium-resize-sequence-2-222088171e9defb86b9c67a1844d9ef0.png" width="3248" height="2120" class="img_ev3q">
<img decoding="async" loading="lazy" alt="Third frame of the Chromium resize sequence" src="https://electronjs.org/assets/images/chromium-resize-sequence-3-3195950f19df4d5e2d5554d2318f28d9.png" width="3248" height="2120" class="img_ev3q">
<img decoding="async" loading="lazy" alt="Fourth frame of the Chromium resize sequence" src="https://electronjs.org/assets/images/chromium-resize-sequence-4-5368a92b507d2201821905db0418caa7.png" width="3248" height="2120" class="img_ev3q">
<img decoding="async" loading="lazy" alt="Fifth frame of the Chromium resize sequence" src="https://electronjs.org/assets/images/chromium-resize-sequence-5-f924ee4ceedd3fc9b0546740ed2d5893.png" width="3248" height="2120" class="img_ev3q"></p>
<p>At a certain time during the resize, Windows tells us: "The window is 1,000 pixels wide." But the frames that the browser compositor produces are lagging behind. The last frame that we have painted might be 600 pixels wide.</p>
<p>Historically, Chromium used to skip frames where the width of the window did not match the width of the frame that it last painted. It would decide to just not update the window.</p>
<p>However, that would often lead to the window contents not being updated at all until the resize operation was finished.</p>
<p>So <a href="https://crrev.com/1426453006" target="_blank" rel="noopener noreferrer" class="">in 2015</a> someone decided: "Why not show these frames? They might not match the window size perfectly, but at least we can show <em>something</em>."</p>
<p>It would lead to gutter, but at that time the gutter was black. So that was better than the previous implementation.</p>
<p>Now, 10 years later with DirectComposition, that gutter was often filled with stale pixels.</p>
<p>Let's look at what was happening there:</p>
<p>Every frame consists of multiple render passes. These render passes represent the various things that should be drawn on screen. From complicated bitmaps to rectangles filled with solid colors.</p>
<p>Every frame has a root render pass, which contains all other render passes and glues them together. (Render passes are arranged in a tree structure and the root render pass is the root of that tree.)</p>
<p>So now during a resize, we'd get to a point where we know the window is 1,000 pixels wide. Accordingly, we'd adjust the viewport of our output surface to also be 1,000 pixels wide. But the frame that we just received is only 600 pixels wide.</p>
<p>The <a href="https://source.chromium.org/chromium/chromium/src/+/main:components/viz/service/display/display.cc;l=1053-1062;drc=152a83bb9fcba4ea3a7b9f8efbe0f6204f95eadd" target="_blank" rel="noopener noreferrer" class="">optimization from 2015</a> would then go and change the width of the root render pass to also be 1,000 pixels. But it wouldn't change what the render passes would actually draw on screen. They'd still only contain instructions to draw a picture that is 600 pixels wide.</p>
<p>Here's what that would look like:</p>
<p><img decoding="async" loading="lazy" alt="Visualization where the frame is smaller than the viewport" src="https://electronjs.org/assets/images/visualization-5-5b9be2d5809799e6576c0e3b344c8c7a.png" width="2363" height="1074" class="img_ev3q"></p>
<p>The yellow area is the area in which the render passes of the frame actually drew something. It's 600 pixels wide.</p>
<p>However, our green viewport and our red clip rect are 1,000 pixels wide. That's the area that we show on screen. (After all, the width attribute of the root render pass claimed that it would redraw the full area of 1,000 pixels.)</p>
<p>But because we had no draw instructions for the 400 pixels on the right, those areas didn't get updated.</p>
<p>On the first resize, we'd show black pixels there. (That's the color that we initialize the surface with.)</p>
<p>On subsequent resizes, those areas would show whatever was drawn to them before. We'd see stale pixels.</p>
<p>I landed a fix for this issue in <a href="https://crrev.com/c/7156576" target="_blank" rel="noopener noreferrer" class="">crrev.com/c/7156576</a>.</p>
<p>The fix changes what we do when we receive a frame with a different size than our window. Instead of resizing the frame and adding gutter that contains stale pixels, we <a href="https://source.chromium.org/chromium/chromium/src/+/main:components/viz/service/frame_sinks/root_compositor_frame_sink_impl.cc;l=555-556;drc=78bd63326c0a2489e6b016140aa4d84014af077a" target="_blank" rel="noopener noreferrer" class="">resize our viewport</a> and our clip rect.</p>
<p><img decoding="async" loading="lazy" alt="Visualization where the clip rect and viewport size are adjusted to the frame size" src="https://electronjs.org/assets/images/visualization-6-182bf0c8c2f7577069b24e766535e5d9.png" width="2363" height="1074" class="img_ev3q"></p>
<p>We clip our surface to the size of the frame that we received. We don't show anything beyond the 600 pixels that we have draw instructions for.</p>
<p>Voilà, no more gutter, no more stale pixels!</p>
<div class="theme-admonition theme-admonition-note admonition_xJq3 alert alert--secondary"><div class="admonitionHeading_Gvgb"><span class="admonitionIcon_Rf37"><svg viewBox="0 0 14 16"><path fill-rule="evenodd" d="M6.3 5.69a.942.942 0 0 1-.28-.7c0-.28.09-.52.28-.7.19-.18.42-.28.7-.28.28 0 .52.09.7.28.18.19.28.42.28.7 0 .28-.09.52-.28.7a1 1 0 0 1-.7.3c-.28 0-.52-.11-.7-.3zM8 7.99c-.02-.25-.11-.48-.31-.69-.2-.19-.42-.3-.69-.31H6c-.27.02-.48.13-.69.31-.2.2-.3.44-.31.69h1v3c.02.27.11.5.31.69.2.2.42.31.69.31h1c.27 0 .48-.11.69-.31.2-.19.3-.42.31-.69H8V7.98v.01zM7 2.3c-3.14 0-5.7 2.54-5.7 5.68 0 3.14 2.56 5.7 5.7 5.7s5.7-2.55 5.7-5.7c0-3.15-2.56-5.69-5.7-5.69v.01zM7 .98c3.86 0 7 3.14 7 7s-3.14 7-7 7-7-3.12-7-7 3.14-7 7-7z"></path></svg></span>note</div><div class="admonitionContent_BuS1"><p>Without <code>supports_viewporter</code>, this would be an expensive operation because it would allocate a new output surface. However, with DirectComposition, we use the "viewporter" feature. So we don't reallocate the surface when we change the viewport size. We just make a different portion of it visible. Thus, it is a cheap operation.</p></div></div>
<h2 class="anchor anchorTargetStickyNavbar_Vzrq" id="backporting-the-patches-to-electron">Backporting the patches to Electron<a href="https://electronjs.org/blog/tech-talk-window-resize-behavior#backporting-the-patches-to-electron" class="hash-link" aria-label="Direct link to Backporting the patches to Electron" title="Direct link to Backporting the patches to Electron" translate="no">​</a></h2>
<p>Once the fixes made it into Chromium, we had to pull them into Electron, too.</p>
<p>On the <code>main</code> branch, Electron updates its Chromium version constantly. As a result, the patches were merged into <code>main</code> in a <a href="https://github.com/electron/electron/pull/49145" target="_blank" rel="noopener noreferrer" class="">Chromium roll PR</a>.</p>
<p>However, commits that make it into <code>main</code> right now will only be included in an Electron release in about three months. Our existing release and pre-release <a class="" href="https://electronjs.org/docs/latest/tutorial/electron-versioning#stabilization-branches">branches</a> run on older Chromium versions.</p>
<p>Thus, the next step was to backport the patches to <a href="https://github.com/electron/electron/pull/49138" target="_blank" rel="noopener noreferrer" class="">Electron 39</a> and <a href="https://github.com/electron/electron/pull/49191" target="_blank" rel="noopener noreferrer" class="">Electron 40</a>.</p>
<p>Electron keeps a list of Chromium patches in the <a href="https://github.com/electron/electron/tree/a90ccc753b4d38266323dd054db2b98a45917117/patches/chromium" target="_blank" rel="noopener noreferrer" class=""><code>patches/chromium</code> directory</a>. When we backport a Chromium patch, we add it there. When building Electron, these patches are applied to the Chromium source code.</p>
<p>(In general, we try to <a class="" href="https://electronjs.org/docs/latest/development/patches#patch-justification">keep the number</a> of Chromium patches low. Every patch can lead to merge conflicts during Chromium updates. The maintenance burden from patches is real.)</p>
<p>The Electron 39 <a href="https://github.com/electron/electron/pull/49138" target="_blank" rel="noopener noreferrer" class="">backport PR</a> was merged pretty quickly. The fix became part of <a href="https://releases.electronjs.org/release/v39.2.6" target="_blank" rel="noopener noreferrer" class="">Electron 39.2.6</a>. 🎉</p>
<p>If you resize a window on Electron 39.2.6 or later, you'll see no more stale pixels.</p>
<p><em>(The patches are also part of <a href="https://www.google.com/chrome/canary/" target="_blank" rel="noopener noreferrer" class="">Google Chrome Canary</a>. They should be part of a stable Google Chrome release in February 2026.)</em></p>
<h2 class="anchor anchorTargetStickyNavbar_Vzrq" id="thanks">Thanks<a href="https://electronjs.org/blog/tech-talk-window-resize-behavior#thanks" class="hash-link" aria-label="Direct link to Thanks" title="Direct link to Thanks" translate="no">​</a></h2>
<p>Big thanks to <a href="https://www.plasticity.xyz/" target="_blank" rel="noopener noreferrer" class="">Plasticity</a> for funding this work!</p>
<p>Thanks to Michael Tang and Vasiliy Telezhnikov from the Chromium team for their help.</p>
<h2 class="anchor anchorTargetStickyNavbar_Vzrq" id="final-thoughts">Final thoughts<a href="https://electronjs.org/blog/tech-talk-window-resize-behavior#final-thoughts" class="hash-link" aria-label="Direct link to Final thoughts" title="Direct link to Final thoughts" translate="no">​</a></h2>
<p>This was the hardest bug I have ever worked on (and I have worked on many hard bugs in 18 years of writing software).</p>
<p>But it was also one of the most fun projects I have ever worked on.</p>
<p>If you found this interesting, please consider <a href="https://github.com/electron/electron/" target="_blank" rel="noopener noreferrer" class="">contributing to Electron</a>! We love seeing new faces.</p>]]></content>
        <author>
            <name>nikwen</name>
            <uri>https://github.com/nikwen</uri>
        </author>
        <category label="Tech Talk" term="Tech Talk"/>
        <category label="Electron Internals" term="Electron Internals"/>
    </entry>
    <entry>
        <title type="html"><![CDATA[December Quiet Month (Dec'25)]]></title>
        <id>https://electronjs.org/blog/dec-quiet-period-25</id>
        <link href="https://electronjs.org/blog/dec-quiet-period-25"/>
        <updated>2025-11-28T00:00:00.000Z</updated>
        <summary type="html"><![CDATA[Starting December 1, the Electron project will enter a quiet period before picking back up at full capacity in January 2026. For full details, see the Policies section below.]]></summary>
        <content type="html"><![CDATA[<p>Starting December 1, the Electron project will enter a quiet period before picking back up at full capacity in January 2026. For full details, see the <a class="" href="https://electronjs.org/blog/dec-quiet-period-25#quiet-period-policies">Policies</a> section below.</p>
<div style="width:100%;height:0;padding-bottom:56%;position:relative;margin:2rem 0"><iframe src="https://giphy.com/embed/xUA7b5i7joquX9Cp8I" width="100%" height="100%" style="position:absolute" frameborder="0"></iframe></div>
<p>Since 2020, December has been a time for project maintainers to take a breather from regular maintenance duties in order to take a break or focus on heads-down work. This break helps us rest up and come back energized for the year to come.</p>
<p>That said, a month-long pause like this one is only achievable when an open-source project is in a healthy state—we’d like to thank all maintainers and external contributors for all of their continued efforts to keep the project moving. ❤️</p>
<h2 class="anchor anchorTargetStickyNavbar_Vzrq" id="2025-in-review">2025 in review<a href="https://electronjs.org/blog/dec-quiet-period-25#2025-in-review" class="hash-link" aria-label="Direct link to 2025 in review" title="Direct link to 2025 in review" translate="no">​</a></h2>
<p>As we close out the year, we’d like to highlight some of the projects we’ve accomplished. Here are some things we were proud of in 2025:</p>
<ul>
<li class="">⚛️&nbsp;Shipped 6 new major versions of Electron in tandem with every other Chromium major version.</li>
<li class="">🌿&nbsp;Migrated Electron’s build tooling from Ninja to Chromium’s new <a href="https://groups.google.com/a/chromium.org/g/chromium-dev/c/v-WOvWUtOpg" target="_blank" rel="noopener noreferrer" class="">siso</a> build system, which adds native remote execution support.</li>
<li class="">✨&nbsp;Revamped the <a href="http://releases.electronjs.org/" target="_blank" rel="noopener noreferrer" class="">releases.electronjs.org</a> page with a fresh new design.</li>
<li class="">✅&nbsp;Accepted four new <a href="https://github.com/electron/rfcs" target="_blank" rel="noopener noreferrer" class="">RFCs</a> and implemented two others into <code>electron/electron</code>.</li>
<li class="">☀️&nbsp;Completed two new <a href="https://summerofcode.withgoogle.com/" target="_blank" rel="noopener noreferrer" class="">Google Summer of Code</a> projects:<!-- -->
<ul>
<li class="">The <a href="https://github.com/electron/devtron/" target="_blank" rel="noopener noreferrer" class="">Devtron</a> DevTools IPC tracker Extension is now available via <code>npm install --save-dev @electron/devtron</code>.</li>
<li class="">The <a href="https://github.com/electron/rfcs/blob/main/text/0016-save-restore-window-state.md" target="_blank" rel="noopener noreferrer" class="">Save/Restore Window State API</a> for Electron’s <code>BaseWindow</code> module was accepted as an RFC and is awaiting its final merge in Electron core.</li>
</ul>
</li>
<li class="">📦&nbsp;Released modernized major versions for all <code>@electron/</code> npm packages as ECMAScript modules requiring at least Node 22.</li>
<li class="">🔒&nbsp;Moved package publishing from <a href="https://docs.continuousauth.dev/" target="_blank" rel="noopener noreferrer" class="">Continuous Auth</a> to the new token-less OIDC-based <a href="https://docs.npmjs.com/trusted-publishers" target="_blank" rel="noopener noreferrer" class="">trusted publishing</a> system in light of security incidents in the npm ecosystem.</li>
<li class="">🧑‍💻 Onboarded five new maintainers who help us ship great software every day and keep the project running long-term.</li>
</ul>
<p><strong>Thanks for a great year, and see you in 2026!</strong></p>
<h2 class="anchor anchorTargetStickyNavbar_Vzrq" id="quiet-period-policies">Quiet period policies<a href="https://electronjs.org/blog/dec-quiet-period-25#quiet-period-policies" class="hash-link" aria-label="Direct link to Quiet period policies" title="Direct link to Quiet period policies" translate="no">​</a></h2>
<p>Not much has changed from previous years, but we changed some of the wording around issue and pull request reviews to temper expectations but allow maintainers to continue to engage with the project as much as they want.</p>
<h3 class="anchor anchorTargetStickyNavbar_Vzrq" id="what-will-be-the-same-in-december">What will be the same in December<a href="https://electronjs.org/blog/dec-quiet-period-25#what-will-be-the-same-in-december" class="hash-link" aria-label="Direct link to What will be the same in December" title="Direct link to What will be the same in December" translate="no">​</a></h3>
<ol>
<li class="">Zero-day and other major security-related releases will be published as necessary. Security incidents should be reported via the escalation policy outlined in the <a href="https://github.com/electron/electron/blob/main/SECURITY.md" target="_blank" rel="noopener noreferrer" class="">SECURITY.md</a> document.</li>
<li class=""><a href="https://github.com/electron/electron/blob/main/CODE_OF_CONDUCT.md" target="_blank" rel="noopener noreferrer" class="">Code of Conduct</a> reports and moderation will continue.</li>
</ol>
<h3 class="anchor anchorTargetStickyNavbar_Vzrq" id="what-will-be-different-in-december">What will be different in December<a href="https://electronjs.org/blog/dec-quiet-period-25#what-will-be-different-in-december" class="hash-link" aria-label="Direct link to What will be different in December" title="Direct link to What will be different in December" translate="no">​</a></h3>
<ol>
<li class="">The last stable branch releases of the year for Electron 37, 38, and 39 will occur on the week of December 1st. There will be no additional planned releases in December.</li>
<li class="">There will be no nightly, alpha and beta releases for the last two weeks of December.</li>
<li class="">Regular <a href="https://github.com/electron/governance" target="_blank" rel="noopener noreferrer" class="">Working Group</a> meetings will be paused.</li>
<li class="">Issue triage may be delayed.</li>
<li class="">Pull request reviews and merges may be delayed.</li>
</ol>]]></content>
        <author>
            <name>erickzhao</name>
            <uri>https://github.com/erickzhao</uri>
        </author>
        <category label="Project News" term="Project News"/>
    </entry>
    <entry>
        <title type="html"><![CDATA[Electron 39.0.0]]></title>
        <id>https://electronjs.org/blog/electron-39-0</id>
        <link href="https://electronjs.org/blog/electron-39-0"/>
        <updated>2025-10-28T00:00:00.000Z</updated>
        <summary type="html"><![CDATA[Electron 39.0.0 has been released! It includes upgrades to Chromium 142.0.7444.52, V8 14.2, and Node 22.20.0.]]></summary>
        <content type="html"><![CDATA[<p>Electron 39.0.0 has been released! It includes upgrades to Chromium 142.0.7444.52, V8 14.2, and Node 22.20.0.</p>
<hr>
<p>The Electron team is excited to announce the release of Electron 39.0.0! You can install it with npm via <code>npm install electron@latest</code> or download it from our <a href="https://releases.electronjs.org/release?channel=stable" target="_blank" rel="noopener noreferrer" class="">releases website</a>. Continue reading for details about this release.</p>
<p>If you have any feedback, please share it with us on <a href="https://bsky.app/profile/electronjs.org" target="_blank" rel="noopener noreferrer" class="">Bluesky</a> or <a href="https://social.lfx.dev/@electronjs" target="_blank" rel="noopener noreferrer" class="">Mastodon</a>, or join our community <a href="https://discord.com/invite/electronjs" target="_blank" rel="noopener noreferrer" class="">Discord</a>! Bugs and feature requests can be reported in Electron's <a href="https://github.com/electron/electron/issues" target="_blank" rel="noopener noreferrer" class="">issue tracker</a>.</p>
<h2 class="anchor anchorTargetStickyNavbar_Vzrq" id="notable-changes">Notable Changes<a href="https://electronjs.org/blog/electron-39-0#notable-changes" class="hash-link" aria-label="Direct link to Notable Changes" title="Direct link to Notable Changes" translate="no">​</a></h2>
<h3 class="anchor anchorTargetStickyNavbar_Vzrq" id="asar-integrity-graduates-to-stable">ASAR Integrity graduates to stable<a href="https://electronjs.org/blog/electron-39-0#asar-integrity-graduates-to-stable" class="hash-link" aria-label="Direct link to ASAR Integrity graduates to stable" title="Direct link to ASAR Integrity graduates to stable" translate="no">​</a></h3>
<p>A long-standing "experimental" feature -- ASAR integrity -- is now stable in Electron 39. When you enable this feature, it validates your packaged <code>app.asar</code> at runtime against a build-time hash to detect any tampering. If no hash is present or if there is a mismatch in the hashes, the app will forcefully terminate.</p>
<p>See <a href="https://www.electronjs.org/docs/latest/tutorial/asar-integrity" target="_blank" rel="noopener noreferrer" class="">the ASAR integrity documentation</a> for full information on how on the feature works, on how to use it in your application, and how to use it in Electron Forge and Electron Packager.</p>
<p>In related news, <a href="https://github.com/electron/packager" target="_blank" rel="noopener noreferrer" class="">Electron Packager</a> v19 now enables ASAR by default. <a href="https://github.com/electron/packager/pull/1841" target="_blank" rel="noopener noreferrer" class="">#1841</a></p>
<h2 class="anchor anchorTargetStickyNavbar_Vzrq" id="stack-changes">Stack Changes<a href="https://electronjs.org/blog/electron-39-0#stack-changes" class="hash-link" aria-label="Direct link to Stack Changes" title="Direct link to Stack Changes" translate="no">​</a></h2>
<ul>
<li class="">Chromium <code>142.0.7444.52</code>
<ul>
<li class=""><a href="https://developer.chrome.com/blog/new-in-chrome-142" target="_blank" rel="noopener noreferrer" class="">New in 142</a></li>
<li class=""><a href="https://developer.chrome.com/blog/new-in-chrome-141" target="_blank" rel="noopener noreferrer" class="">New in 141</a></li>
</ul>
</li>
<li class="">Node <code>22.20.0</code>
<ul>
<li class=""><a href="https://nodejs.org/en/blog/release/v22.20.0" target="_blank" rel="noopener noreferrer" class="">v22.20.0 Announcement</a></li>
<li class=""><a href="https://nodejs.org/en/blog/release/v22.19.0" target="_blank" rel="noopener noreferrer" class="">v22.19.0 Announcement</a></li>
</ul>
</li>
<li class="">V8 <code>14.2</code>
<ul>
<li class=""><a href="https://chromium.googlesource.com/v8/v8.git/+/bb294624702efbb17691b642333f06bf5108e600" target="_blank" rel="noopener noreferrer" class="">V8 roll increment</a></li>
</ul>
</li>
</ul>
<p>Electron 39 upgrades Chromium from <code>140.0.7339.41</code> to <code>142.0.7444.52</code>, Node.js from <code>22.18.0</code> to <code>v22.20.0</code>, and V8 from <code>14.0</code> to <code>14.2</code>.</p>
<h2 class="anchor anchorTargetStickyNavbar_Vzrq" id="new-features-and-improvements">New Features and Improvements<a href="https://electronjs.org/blog/electron-39-0#new-features-and-improvements" class="hash-link" aria-label="Direct link to New Features and Improvements" title="Direct link to New Features and Improvements" translate="no">​</a></h2>
<ul>
<li class="">Added <code>app.isHardwareAccelerationEnabled()</code>. <a href="https://github.com/electron/electron/pull/48680" target="_blank" rel="noopener noreferrer" class="">#48680</a></li>
<li class="">Added <code>RGBAF16</code> output format with scRGB HDR color space support to Offscreen Rendering. <a href="https://github.com/electron/electron/pull/48504" target="_blank" rel="noopener noreferrer" class="">#48504</a></li>
<li class="">Added methods to enable more granular accessibility support management. <a href="https://github.com/electron/electron/pull/48625" target="_blank" rel="noopener noreferrer" class="">#48625</a></li>
<li class="">Added support for <code>USBDevice.configurations</code>. <a href="https://github.com/electron/electron/pull/47459" target="_blank" rel="noopener noreferrer" class="">#47459</a></li>
<li class="">Added the ability to retrieve the system accent color on Linux using <code>systemPreferences.getAccentColor</code>. <a href="https://github.com/electron/electron/pull/48628" target="_blank" rel="noopener noreferrer" class="">#48628</a></li>
<li class="">Allowed for persisting File System API grant status within a given session. <a href="https://github.com/electron/electron/pull/48326" target="_blank" rel="noopener noreferrer" class="">#48326</a> <sup>(Also in <a href="https://github.com/electron/electron/pull/48328" target="_blank" rel="noopener noreferrer" class="">37</a>, <a href="https://github.com/electron/electron/pull/48327" target="_blank" rel="noopener noreferrer" class="">38</a>)</sup></li>
<li class="">Support dynamic ESM imports in non-context isolated preloads. <a href="https://github.com/electron/electron/pull/48488" target="_blank" rel="noopener noreferrer" class="">#48488</a> <sup>(Also in <a href="https://github.com/electron/electron/pull/48487" target="_blank" rel="noopener noreferrer" class="">37</a>, <a href="https://github.com/electron/electron/pull/48489" target="_blank" rel="noopener noreferrer" class="">38</a>)</sup></li>
<li class="">Marked the <a href="https://www.electronjs.org/docs/latest/tutorial/asar-integrity" target="_blank" rel="noopener noreferrer" class="">ASAR integrity</a> feature as stable. It had previously been experimental. <a href="https://github.com/electron/electron/pull/48434" target="_blank" rel="noopener noreferrer" class="">#48434</a></li>
</ul>
<h2 class="anchor anchorTargetStickyNavbar_Vzrq" id="breaking-changes">Breaking Changes<a href="https://electronjs.org/blog/electron-39-0#breaking-changes" class="hash-link" aria-label="Direct link to Breaking Changes" title="Direct link to Breaking Changes" translate="no">​</a></h2>
<h3 class="anchor anchorTargetStickyNavbar_Vzrq" id="deprecated---host-rules-command-line-switch">Deprecated: <code>--host-rules</code> command line switch<a href="https://electronjs.org/blog/electron-39-0#deprecated---host-rules-command-line-switch" class="hash-link" aria-label="Direct link to deprecated---host-rules-command-line-switch" title="Direct link to deprecated---host-rules-command-line-switch" translate="no">​</a></h3>
<p>Chromium is deprecating the <code>--host-rules</code> switch.</p>
<p>You should use <code>--host-resolver-rules</code> instead.</p>
<h3 class="anchor anchorTargetStickyNavbar_Vzrq" id="behavior-changed-windowopen-popups-are-always-resizable">Behavior Changed: <code>window.open</code> popups are always resizable<a href="https://electronjs.org/blog/electron-39-0#behavior-changed-windowopen-popups-are-always-resizable" class="hash-link" aria-label="Direct link to behavior-changed-windowopen-popups-are-always-resizable" title="Direct link to behavior-changed-windowopen-popups-are-always-resizable" translate="no">​</a></h3>
<p>Per current <a href="https://html.spec.whatwg.org/multipage/nav-history-apis.html#dom-open-dev" target="_blank" rel="noopener noreferrer" class="">WHATWG spec</a>, the <code>window.open</code> API will now always create a resizable popup window.</p>
<p>To restore previous behavior:</p>
<div class="language-js codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_QJqH"><pre tabindex="0" class="prism-code language-js codeBlock_bY9V thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#393A34"><span class="token plain">webContents</span><span class="token punctuation" style="color:#393A34">.</span><span class="token method function property-access" style="color:#d73a49">setWindowOpenHandler</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">(</span><span class="token parameter">details</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"> </span><span class="token arrow operator" style="color:#393A34">=&gt;</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">  </span><span class="token keyword control-flow" style="color:#00009f">return</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">    </span><span class="token literal-property property" style="color:#36acaa">action</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">'allow'</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">    </span><span class="token literal-property property" style="color:#36acaa">overrideBrowserWindowOptions</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">      </span><span class="token literal-property property" style="color:#36acaa">resizable</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> details</span><span class="token punctuation" style="color:#393A34">.</span><span class="token property-access">features</span><span class="token punctuation" style="color:#393A34">.</span><span class="token method function property-access" style="color:#d73a49">includes</span><span class="token punctuation" style="color:#393A34">(</span><span class="token string" style="color:#e3116c">'resizable=yes'</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">    </span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">  </span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><br></span></code></pre></div></div>
<h3 class="anchor anchorTargetStickyNavbar_Vzrq" id="behavior-changed-nsaudiocaptureusagedescription-should-be-included-in-your-apps-infoplist-file-to-use-desktopcapturer--macos-142">Behavior Changed: <code>NSAudioCaptureUsageDescription</code> should be included in your app's Info.plist file to use <code>desktopCapturer</code> (🍏 macOS ≥14.2)<a href="https://electronjs.org/blog/electron-39-0#behavior-changed-nsaudiocaptureusagedescription-should-be-included-in-your-apps-infoplist-file-to-use-desktopcapturer--macos-142" class="hash-link" aria-label="Direct link to behavior-changed-nsaudiocaptureusagedescription-should-be-included-in-your-apps-infoplist-file-to-use-desktopcapturer--macos-142" title="Direct link to behavior-changed-nsaudiocaptureusagedescription-should-be-included-in-your-apps-infoplist-file-to-use-desktopcapturer--macos-142" translate="no">​</a></h3>
<p>Due to a <a href="https://source.chromium.org/chromium/chromium/src/+/ad17e8f8b93d5f34891b06085d373a668918255e" target="_blank" rel="noopener noreferrer" class="">Chromium update</a> which enables Apple's newer <a href="https://developer.apple.com/documentation/CoreAudio/capturing-system-audio-with-core-audio-taps#Configure-the-sample-code-project" target="_blank" rel="noopener noreferrer" class="">CoreAudio Tap API</a> by default, you now must have <code>NSAudioCaptureUsageDescription</code> defined in your <code>Info.plist</code> to use <code>desktopCapturer</code>.</p>
<p>Electron's <code>desktopCapturer</code> will create a dead audio stream if the new permission is absent. However, no errors or warnings will occur. This is partially a side-effect of Chromium not falling back to the older <code>Screen &amp; System Audio Recording</code> permissions system if the new system fails.</p>
<p>To restore previous behavior:</p>
<div class="language-js codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_QJqH"><pre tabindex="0" class="prism-code language-js codeBlock_bY9V thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#393A34"><span class="token comment" style="color:#999988;font-style:italic">//main.js (right beneath your require/import statments)</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">app</span><span class="token punctuation" style="color:#393A34">.</span><span class="token property-access">commandLine</span><span class="token punctuation" style="color:#393A34">.</span><span class="token method function property-access" style="color:#d73a49">appendSwitch</span><span class="token punctuation" style="color:#393A34">(</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">  </span><span class="token string" style="color:#e3116c">'disable-features'</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">  </span><span class="token string" style="color:#e3116c">'MacCatapLoopbackAudioForScreenShare'</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><br></span></code></pre></div></div>
<h3 class="anchor anchorTargetStickyNavbar_Vzrq" id="behavior-changed-shared-texture-osr-paint-event-data-structure">Behavior Changed: shared texture OSR <code>paint</code> event data structure<a href="https://electronjs.org/blog/electron-39-0#behavior-changed-shared-texture-osr-paint-event-data-structure" class="hash-link" aria-label="Direct link to behavior-changed-shared-texture-osr-paint-event-data-structure" title="Direct link to behavior-changed-shared-texture-osr-paint-event-data-structure" translate="no">​</a></h3>
<p>When using the shared texture offscreen rendering feature, the <code>paint</code> event now emits a more structured object.
It moves the <code>sharedTextureHandle</code>, <code>planes</code>, <code>modifier</code> into a unified <code>handle</code> property.
See <a href="https://www.electronjs.org/docs/latest/api/structures/offscreen-shared-texture" target="_blank" rel="noopener noreferrer" class="">the <code>OffscreenSharedTexture</code> documentation</a> for more details.</p>
<h2 class="anchor anchorTargetStickyNavbar_Vzrq" id="end-of-support-for-36xy">End of Support for 36.x.y<a href="https://electronjs.org/blog/electron-39-0#end-of-support-for-36xy" class="hash-link" aria-label="Direct link to End of Support for 36.x.y" title="Direct link to End of Support for 36.x.y" translate="no">​</a></h2>
<p>Electron 36.x.y has reached end-of-support as per the project's <a href="https://www.electronjs.org/docs/latest/tutorial/electron-timelines#version-support-policy" target="_blank" rel="noopener noreferrer" class="">support policy</a>. Developers and applications are encouraged to upgrade to a newer version of Electron.</p>
<table><thead><tr><th>E39 (Oct'25)</th><th>E40 (Jan'26)</th><th>E41 (Feb'26)</th></tr></thead><tbody><tr><td>39.x.y</td><td>40.x.y</td><td>41.x.y</td></tr><tr><td>38.x.y</td><td>39.x.y</td><td>40.x.y</td></tr><tr><td>37.x.y</td><td>38.x.y</td><td>39.x.y</td></tr></tbody></table>
<h2 class="anchor anchorTargetStickyNavbar_Vzrq" id="whats-next">What's Next<a href="https://electronjs.org/blog/electron-39-0#whats-next" class="hash-link" aria-label="Direct link to What's Next" title="Direct link to What's Next" translate="no">​</a></h2>
<p>In the short term, you can expect the team to continue to focus on keeping up with the development of the major components that make up Electron, including Chromium, Node, and V8.</p>
<p>You can find <a href="https://www.electronjs.org/docs/latest/tutorial/electron-timelines" target="_blank" rel="noopener noreferrer" class="">Electron's public timeline here</a>.</p>
<p>More information about future changes can be found on the <a href="https://github.com/electron/electron/blob/main/docs/breaking-changes.md" target="_blank" rel="noopener noreferrer" class="">Planned Breaking Changes</a> page.</p>]]></content>
        <author>
            <name>ckerr</name>
            <uri>https://github.com/ckerr</uri>
        </author>
        <category label="Release" term="Release"/>
    </entry>
    <entry>
        <title type="html"><![CDATA[Electron 38.0.0]]></title>
        <id>https://electronjs.org/blog/electron-38-0</id>
        <link href="https://electronjs.org/blog/electron-38-0"/>
        <updated>2025-09-09T00:00:00.000Z</updated>
        <summary type="html"><![CDATA[Electron 38.0.0 has been released! It includes upgrades to Chromium 140.0.7339.41, V8 14.0, and Node 22.16.0.]]></summary>
        <content type="html"><![CDATA[<p>Electron 38.0.0 has been released! It includes upgrades to Chromium 140.0.7339.41, V8 14.0, and Node 22.16.0.</p>
<hr>
<p>The Electron team is excited to announce the release of Electron 38.0.0! You can install it with npm via <code>npm install electron@latest</code> or download it from our <a href="https://releases.electronjs.org/release?channel=stable" target="_blank" rel="noopener noreferrer" class="">releases website</a>. Continue reading for details about this release.</p>
<p>If you have any feedback, please share it with us on <a href="https://bsky.app/profile/electronjs.org" target="_blank" rel="noopener noreferrer" class="">Bluesky</a> or <a href="https://social.lfx.dev/@electronjs" target="_blank" rel="noopener noreferrer" class="">Mastodon</a>, or join our community <a href="https://discord.com/invite/electronjs" target="_blank" rel="noopener noreferrer" class="">Discord</a>! Bugs and feature requests can be reported in Electron's <a href="https://github.com/electron/electron/issues" target="_blank" rel="noopener noreferrer" class="">issue tracker</a>.</p>
<h2 class="anchor anchorTargetStickyNavbar_Vzrq" id="stack-changes">Stack Changes<a href="https://electronjs.org/blog/electron-38-0#stack-changes" class="hash-link" aria-label="Direct link to Stack Changes" title="Direct link to Stack Changes" translate="no">​</a></h2>
<ul>
<li class="">Chromium <code>140.0.7339.41</code>
<ul>
<li class=""><a href="https://developer.chrome.com/blog/new-in-chrome-140/" target="_blank" rel="noopener noreferrer" class="">New in 140</a></li>
<li class=""><a href="https://developer.chrome.com/blog/new-in-chrome-139/" target="_blank" rel="noopener noreferrer" class="">New in 139</a></li>
</ul>
</li>
<li class="">Node <code>22.18.0</code>
<ul>
<li class=""><a href="https://nodejs.org/en/blog/release/v22.18.0/" target="_blank" rel="noopener noreferrer" class="">Node 22.18.0 blog post</a></li>
</ul>
</li>
<li class="">V8 <code>14.0</code>
<ul>
<li class=""><a href="https://chromium.googlesource.com/v8/v8.git/+/fdb12b460f148895f6af2ff0e0d870ff8889f154" target="_blank" rel="noopener noreferrer" class="">V8 roll increment</a></li>
</ul>
</li>
</ul>
<p>Electron 38 upgrades Chromium from <code>138.0.7204.35</code> to <code>140.0.7339.41</code>, Node from <code>22.16.0</code> to <code>22.18.0</code>, and V8 from <code>13.8</code> to <code>14.0</code>.</p>
<h2 class="anchor anchorTargetStickyNavbar_Vzrq" id="new-features-and-improvements">New Features and Improvements<a href="https://electronjs.org/blog/electron-38-0#new-features-and-improvements" class="hash-link" aria-label="Direct link to New Features and Improvements" title="Direct link to New Features and Improvements" translate="no">​</a></h2>
<ul>
<li class="">Added support for customizing system accent color and highlighting of active window border. <a href="https://github.com/electron/electron/pull/47285" target="_blank" rel="noopener noreferrer" class="">#47285</a> (Also in <a href="https://github.com/electron/electron/pull/47537" target="_blank" rel="noopener noreferrer" class="">37</a>)</li>
<li class="">Added <code>fileBacked</code> and <code>purgeable</code> fields to <code>process.getSystemMemoryInfo()</code> for macOS. <a href="https://github.com/electron/electron/pull/48146" target="_blank" rel="noopener noreferrer" class="">#48146</a> (Also in <a href="https://github.com/electron/electron/pull/48143" target="_blank" rel="noopener noreferrer" class="">37</a>)</li>
<li class="">Added support for <code>guid</code> <code>Tray</code> constructor option on macOS to allow tray icons to maintain position across launches. <a href="https://github.com/electron/electron/pull/48077" target="_blank" rel="noopener noreferrer" class="">#48077</a> (Also in <a href="https://github.com/electron/electron/pull/48076" target="_blank" rel="noopener noreferrer" class="">37</a>)</li>
<li class="">Added <code>webFrameMain.fromFrameToken(processId, frameToken)</code> to get a <code>WebFrameMain</code> instance from its frame token. <a href="https://github.com/electron/electron/pull/47942" target="_blank" rel="noopener noreferrer" class="">#47942</a></li>
<li class="">Added support for <code>app.getRecentDocuments()</code> on Windows and macOS. <a href="https://github.com/electron/electron/pull/47924" target="_blank" rel="noopener noreferrer" class="">#47924</a> (Also in <a href="https://github.com/electron/electron/pull/47923" target="_blank" rel="noopener noreferrer" class="">37</a>)</li>
<li class="">Internally switched to using <code>DIR_ASSETS</code> instead of <code>DIR_MODULE</code>/<code>DIR_EXE</code> to locate assets and resources, and added "assets" as a key that can be queried via <code>app.getPath</code>. <a href="https://github.com/electron/electron/pull/47950" target="_blank" rel="noopener noreferrer" class="">#47950</a> (Also in <a href="https://github.com/electron/electron/pull/47951" target="_blank" rel="noopener noreferrer" class="">37</a>)</li>
<li class="">Fixed an issue where <code>dialog.showMessageDialog</code> showed a window incorrectly centered to monitor instead of parent window when passed. <a href="https://github.com/electron/electron/pull/48215" target="_blank" rel="noopener noreferrer" class="">#48215</a></li>
<li class="">Fixed an issue where users on macOS were unable to interact with a webpage loaded via <code>loadURL</code>. <a href="https://github.com/electron/electron/pull/47575" target="_blank" rel="noopener noreferrer" class="">#47575</a></li>
</ul>
<h2 class="anchor anchorTargetStickyNavbar_Vzrq" id="breaking-changes">Breaking Changes<a href="https://electronjs.org/blog/electron-38-0#breaking-changes" class="hash-link" aria-label="Direct link to Breaking Changes" title="Direct link to Breaking Changes" translate="no">​</a></h2>
<h3 class="anchor anchorTargetStickyNavbar_Vzrq" id="removed-macos-11-support">Removed: macOS 11 support<a href="https://electronjs.org/blog/electron-38-0#removed-macos-11-support" class="hash-link" aria-label="Direct link to Removed: macOS 11 support" title="Direct link to Removed: macOS 11 support" translate="no">​</a></h3>
<p>macOS 11 (Big Sur) is no longer supported by <a href="https://chromium-review.googlesource.com/c/chromium/src/+/6594615" target="_blank" rel="noopener noreferrer" class="">Chromium</a>.</p>
<p>Older versions of Electron will continue to run on Big Sur, but macOS 12 (Monterey)
or later will be required to run Electron v38.0.0 and higher.</p>
<h3 class="anchor anchorTargetStickyNavbar_Vzrq" id="removed-electron_ozone_platform_hint-environment-variable">Removed: <code>ELECTRON_OZONE_PLATFORM_HINT</code> environment variable<a href="https://electronjs.org/blog/electron-38-0#removed-electron_ozone_platform_hint-environment-variable" class="hash-link" aria-label="Direct link to removed-electron_ozone_platform_hint-environment-variable" title="Direct link to removed-electron_ozone_platform_hint-environment-variable" translate="no">​</a></h3>
<p>The default value of the <code>--ozone-platform</code> flag <a href="https://chromium-review.googlesource.com/c/chromium/src/+/6775426" target="_blank" rel="noopener noreferrer" class="">changed to <code>auto</code></a>.</p>
<p>Electron now runs as a native Wayland app by default when launched in a Wayland session on Linux. Some features and APIs behave differently in Wayland and X11.
You can force Electron to run in X11 compatibility mode (Xwayland), like it did in older versions, by appending the flag <code>--ozone-platform=x11</code>.</p>
<h3 class="anchor anchorTargetStickyNavbar_Vzrq" id="removed-plugin-crashed-event">Removed: <code>plugin-crashed</code> event<a href="https://electronjs.org/blog/electron-38-0#removed-plugin-crashed-event" class="hash-link" aria-label="Direct link to removed-plugin-crashed-event" title="Direct link to removed-plugin-crashed-event" translate="no">​</a></h3>
<p>The <code>plugin-crashed</code> event has been removed from <code>webContents</code>.</p>
<h3 class="anchor anchorTargetStickyNavbar_Vzrq" id="deprecated-webframeroutingid-property">Deprecated: <code>webFrame.routingId</code> property<a href="https://electronjs.org/blog/electron-38-0#deprecated-webframeroutingid-property" class="hash-link" aria-label="Direct link to deprecated-webframeroutingid-property" title="Direct link to deprecated-webframeroutingid-property" translate="no">​</a></h3>
<p>The <code>routingId</code> property will be removed from <code>webFrame</code> objects.</p>
<p>You should use <code>webFrame.frameToken</code> instead.</p>
<h3 class="anchor anchorTargetStickyNavbar_Vzrq" id="deprecated-webframefindframebyroutingidroutingid">Deprecated: <code>webFrame.findFrameByRoutingId(routingId)</code><a href="https://electronjs.org/blog/electron-38-0#deprecated-webframefindframebyroutingidroutingid" class="hash-link" aria-label="Direct link to deprecated-webframefindframebyroutingidroutingid" title="Direct link to deprecated-webframefindframebyroutingidroutingid" translate="no">​</a></h3>
<p>The <code>webFrame.findFrameByRoutingId(routingId)</code> function will be removed.</p>
<p>You should use <code>webFrame.findFrameByToken(frameToken)</code> instead.</p>
<h2 class="anchor anchorTargetStickyNavbar_Vzrq" id="google-summer-of-code-concludes">Google Summer of Code Concludes<a href="https://electronjs.org/blog/electron-38-0#google-summer-of-code-concludes" class="hash-link" aria-label="Direct link to Google Summer of Code Concludes" title="Direct link to Google Summer of Code Concludes" translate="no">​</a></h2>
<p>Our two <a href="https://summerofcode.withgoogle.com/" target="_blank" rel="noopener noreferrer" class="">Google Summer of Code</a> contributors have just completed their summer projects!</p>
<ul>
<li class=""><a href="https://github.com/nilayarya" target="_blank" rel="noopener noreferrer" class="">@nilayarya</a> crafted a new <a href="https://github.com/electron/rfcs/pull/16/" target="_blank" rel="noopener noreferrer" class="">Save/Restore Window State API</a> in Electron core. The new APIs will provide a built-in, standardized way
to handle window state persistence. See Nilay's original RFC at <a href="https://github.com/electron/rfcs/pull/16" target="_blank" rel="noopener noreferrer" class="">electron/rfcs#16</a>.</li>
<li class=""><a href="https://github.com/hitarth-gg" target="_blank" rel="noopener noreferrer" class="">@hitarth-gg</a> put a lot of hard work into modernizing the long-dormant <a href="https://github.com/electron-userland/devtron" target="_blank" rel="noopener noreferrer" class="">Devtron</a> extension using Chrome Manifest V3 APIs.
This project provides tooling for developers to debug IPC communication, track event listeners, and visualize module dependencies in their Electron applications.</li>
</ul>
<p>Stay tuned for a more detailed blog post outlining their projects and the outcomes.</p>
<h2 class="anchor anchorTargetStickyNavbar_Vzrq" id="end-of-support-for-35xy">End of Support for 35.x.y<a href="https://electronjs.org/blog/electron-38-0#end-of-support-for-35xy" class="hash-link" aria-label="Direct link to End of Support for 35.x.y" title="Direct link to End of Support for 35.x.y" translate="no">​</a></h2>
<p>Electron 35.x.y has reached end-of-support as per the project's <a href="https://www.electronjs.org/docs/latest/tutorial/electron-timelines#version-support-policy" target="_blank" rel="noopener noreferrer" class="">support policy</a>. Developers and applications are encouraged to upgrade to a newer version of Electron.</p>
<table><thead><tr><th>E38 (Sep'25)</th><th>E39 (Oct'25)</th><th>E40 (Jan'26)</th></tr></thead><tbody><tr><td>38.x.y</td><td>39.x.y</td><td>40.x.y</td></tr><tr><td>37.x.y</td><td>38.x.y</td><td>39.x.y</td></tr><tr><td>36.x.y</td><td>37.x.y</td><td>38.x.y</td></tr></tbody></table>
<h2 class="anchor anchorTargetStickyNavbar_Vzrq" id="whats-next">What's Next<a href="https://electronjs.org/blog/electron-38-0#whats-next" class="hash-link" aria-label="Direct link to What's Next" title="Direct link to What's Next" translate="no">​</a></h2>
<p>In the short term, you can expect the team to continue to focus on keeping up with the development of the major components that make up Electron, including Chromium, Node, and V8.</p>
<p>You can find <a href="https://www.electronjs.org/docs/latest/tutorial/electron-timelines" target="_blank" rel="noopener noreferrer" class="">Electron's public timeline here</a>.</p>
<p>More information about future changes can be found on the <a href="https://github.com/electron/electron/blob/main/docs/breaking-changes.md" target="_blank" rel="noopener noreferrer" class="">Planned Breaking Changes</a> page.</p>]]></content>
        <author>
            <name>VerteDinde</name>
            <uri>https://github.com/VerteDinde</uri>
        </author>
        <category label="Release" term="Release"/>
    </entry>
    <entry>
        <title type="html"><![CDATA[Electron 37.0.0]]></title>
        <id>https://electronjs.org/blog/electron-37-0</id>
        <link href="https://electronjs.org/blog/electron-37-0"/>
        <updated>2025-06-24T00:00:00.000Z</updated>
        <summary type="html"><![CDATA[Electron 37.0.0 has been released! It includes upgrades to Chromium 138, V8 13.8, and Node 22.16.0.]]></summary>
        <content type="html"><![CDATA[<p>Electron 37.0.0 has been released! It includes upgrades to Chromium 138, V8 13.8, and Node 22.16.0.</p>
<hr>
<p>The Electron team is excited to announce the release of Electron 37.0.0! You can install it with npm via <code>npm install electron@latest</code> or download it from our <a href="https://releases.electronjs.org/release?channel=stable" target="_blank" rel="noopener noreferrer" class="">releases website</a>. Continue reading for details about this release.</p>
<p>If you have any feedback, please share it with us on <a href="https://bsky.app/profile/electronjs.org" target="_blank" rel="noopener noreferrer" class="">Bluesky</a> or <a href="https://social.lfx.dev/@electronjs" target="_blank" rel="noopener noreferrer" class="">Mastodon</a>, or join our community <a href="https://discord.com/invite/electronjs" target="_blank" rel="noopener noreferrer" class="">Discord</a>! Bugs and feature requests can be reported in Electron's <a href="https://github.com/electron/electron/issues" target="_blank" rel="noopener noreferrer" class="">issue tracker</a>.</p>
<h2 class="anchor anchorTargetStickyNavbar_Vzrq" id="google-summer-of-code-begins">Google Summer of Code Begins<a href="https://electronjs.org/blog/electron-37-0#google-summer-of-code-begins" class="hash-link" aria-label="Direct link to Google Summer of Code Begins" title="Direct link to Google Summer of Code Begins" translate="no">​</a></h2>
<p>Our two <a href="https://summerofcode.withgoogle.com/" target="_blank" rel="noopener noreferrer" class="">Google Summer of Code</a> contributors have started the
program's coding period!</p>
<ul>
<li class=""><a href="https://github.com/nilayarya" target="_blank" rel="noopener noreferrer" class="">@nilayarya</a> is crafting a new <a href="https://github.com/electron/rfcs/pull/16/" target="_blank" rel="noopener noreferrer" class="">Save/Restore Window State API</a> in Electron core. The new APIs will provide a built-in, standardized way
to handle window state persistence. See Nilay's in-progress RFC at <a href="https://github.com/electron/rfcs/pull/16" target="_blank" rel="noopener noreferrer" class="">electron/rfcs#16</a>.</li>
<li class=""><a href="https://github.com/hitarth-gg" target="_blank" rel="noopener noreferrer" class="">@hitarth-gg</a> is hard at work modernizing the long-dormant <a href="https://github.com/electron-userland/devtron" target="_blank" rel="noopener noreferrer" class="">Devtron</a> extension using Chrome Manifest V3 APIs.
This project will provide tooling for developers to debug IPC communication, track event listeners, and visualize module dependencies in their Electron applications.</li>
</ul>
<p>It has been an exciting couple of weeks for our GSOC participants, so stay tuned for more updates!</p>
<h2 class="anchor anchorTargetStickyNavbar_Vzrq" id="notable-changes">Notable Changes<a href="https://electronjs.org/blog/electron-37-0#notable-changes" class="hash-link" aria-label="Direct link to Notable Changes" title="Direct link to Notable Changes" translate="no">​</a></h2>
<h3 class="anchor anchorTargetStickyNavbar_Vzrq" id="smooth-corners-native-css-squircles">Smooth Corners: Native CSS Squircles<a href="https://electronjs.org/blog/electron-37-0#smooth-corners-native-css-squircles" class="hash-link" aria-label="Direct link to Smooth Corners: Native CSS Squircles" title="Direct link to Smooth Corners: Native CSS Squircles" translate="no">​</a></h3>
<p><img decoding="async" loading="lazy" alt="An image showing different corner smoothing values (0%, 30%, 60%, and 100%) applied to rectangles, with 60% labeled as matching macOS style" src="https://electronjs.org/assets/images/corner-smoothing-d3a1b1a6fac2cd9162e7594114aebb97.svg" width="1024" height="512" class="img_ev3q"></p>
<p>Electron 37 introduces the custom <code>-electron-corner-smoothing</code> CSS property, which allows apps to create smoother rounded corners to match Apple's macOS design language. This feature originally landed in Electron 36, but we felt like it deserved a brighter spotlight.</p>
<table><caption><p>Example with 100% Corner Smoothing</p></caption><thead><tr><th>Code</th><th>Result</th></tr></thead><tbody><tr><td><div class="language-css codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_QJqH"><pre tabindex="0" class="prism-code language-css codeBlock_bY9V thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#393A34"><span class="token selector class" style="color:#00009f">.box</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">  </span><span class="token property" style="color:#36acaa">width</span><span class="token punctuation" style="color:#393A34">:</span><span class="token plain"> </span><span class="token number" style="color:#36acaa">128</span><span class="token unit">px</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">  </span><span class="token property" style="color:#36acaa">height</span><span class="token punctuation" style="color:#393A34">:</span><span class="token plain"> </span><span class="token number" style="color:#36acaa">128</span><span class="token unit">px</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">  </span><span class="token property" style="color:#36acaa">border-radius</span><span class="token punctuation" style="color:#393A34">:</span><span class="token plain"> </span><span class="token number" style="color:#36acaa">24</span><span class="token unit">px</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">  </span><span class="token property" style="color:#36acaa">-electron-corner-smoothing</span><span class="token punctuation" style="color:#393A34">:</span><span class="token plain"> </span><span class="token number" style="color:#36acaa">100</span><span class="token unit">%</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token punctuation" style="color:#393A34">}</span><br></span></code></pre></div></div></td><td><img src="https://raw.githubusercontent.com/electron/rfcs/d89000c638a6d98b497ce2fbea07bce45c2760a8/images/0012/Rectangle.svg" width="128px" alt=""></td></tr></tbody></table>
<p>Unlike the standard <code>border-radius</code> property, which carves quarter-circle corners out of a rectangle, <code>-electron-corner-smoothing</code> smoothly transitions
the curve into a <a href="https://en.wikipedia.org/wiki/Squircle" target="_blank" rel="noopener noreferrer" class=""><strong>squircle</strong></a> shape with a continuous perimeter.</p>
<p>You can adjust the smoothness using values from 0% to 100%, or use the <code>system-ui</code> value to match the operating system's style (60% on macOS and 0% otherwise).
This design enhancement can be applied on borders, outlines, and shadows, giving your app a subtle layer of polish.</p>
<div class="theme-admonition theme-admonition-tip admonition_xJq3 alert alert--success"><div class="admonitionHeading_Gvgb"><span class="admonitionIcon_Rf37"><svg viewBox="0 0 12 16"><path fill-rule="evenodd" d="M6.5 0C3.48 0 1 2.19 1 5c0 .92.55 2.25 1 3 1.34 2.25 1.78 2.78 2 4v1h5v-1c.22-1.22.66-1.75 2-4 .45-.75 1-2.08 1-3 0-2.81-2.48-5-5.5-5zm3.64 7.48c-.25.44-.47.8-.67 1.11-.86 1.41-1.25 2.06-1.45 3.23-.02.05-.02.11-.02.17H5c0-.06 0-.13-.02-.17-.2-1.17-.59-1.83-1.45-3.23-.2-.31-.42-.67-.67-1.11C2.44 6.78 2 5.65 2 5c0-2.2 2.02-4 4.5-4 1.22 0 2.36.42 3.22 1.19C10.55 2.94 11 3.94 11 5c0 .66-.44 1.78-.86 2.48zM4 14h5c-.23 1.14-1.3 2-2.5 2s-2.27-.86-2.5-2z"></path></svg></span>tip</div><div class="admonitionContent_BuS1"><p>Read more about Electron's squircle implementation in <a href="https://github.com/clavin" target="_blank" rel="noopener noreferrer" class="">@clavin</a>'s <a href="https://github.com/electron/rfcs/blob/main/text/0012-corner-smoothing.md" target="_blank" rel="noopener noreferrer" class="">RFC 0012</a>.
The document goes over the motivation and technical implementation in more detail.</p><p>The initial design drew inspiration from Figma's corner smoothing implementation. Read more about their own quest for smooth corners in
<a href="https://www.figma.com/blog/desperately-seeking-squircles/" target="_blank" rel="noopener noreferrer" class="">"Desperately seeking squircles"</a>.</p></div></div>
<h2 class="anchor anchorTargetStickyNavbar_Vzrq" id="stack-changes">Stack Changes<a href="https://electronjs.org/blog/electron-37-0#stack-changes" class="hash-link" aria-label="Direct link to Stack Changes" title="Direct link to Stack Changes" translate="no">​</a></h2>
<ul>
<li class="">Chromium <code>138.0.7204.35</code>
<ul>
<li class=""><a href="https://developer.chrome.com/blog/new-in-chrome-138/" target="_blank" rel="noopener noreferrer" class="">New in 138</a></li>
<li class=""><a href="https://developer.chrome.com/blog/new-in-chrome-137/" target="_blank" rel="noopener noreferrer" class="">New in 137</a></li>
</ul>
</li>
<li class="">Node <code>22.16.0</code>
<ul>
<li class=""><a href="https://nodejs.org/en/blog/release/v22.16.0/" target="_blank" rel="noopener noreferrer" class="">Node 22.16.0 blog post</a></li>
</ul>
</li>
<li class="">V8 <code>13.8</code></li>
</ul>
<p>Electron 37 upgrades Chromium from <code>136.0.7103.48</code> to <code>138.0.7204.35</code>, and V8 from <code>13.6</code> to <code>13.8</code>.</p>
<h2 class="anchor anchorTargetStickyNavbar_Vzrq" id="new-features-and-improvements">New Features and Improvements<a href="https://electronjs.org/blog/electron-37-0#new-features-and-improvements" class="hash-link" aria-label="Direct link to New Features and Improvements" title="Direct link to New Features and Improvements" translate="no">​</a></h2>
<ul>
<li class="">Added <code>innerWidth</code> and <code>innerHeight</code> options for <code>window.open</code>. <a href="https://github.com/electron/electron/pull/47039" target="_blank" rel="noopener noreferrer" class="">#47039</a> (Also in <a href="https://github.com/electron/electron/pull/47045" target="_blank" rel="noopener noreferrer" class="">35</a>, <a href="https://github.com/electron/electron/pull/47038" target="_blank" rel="noopener noreferrer" class="">36</a>)</li>
<li class="">Added <code>before-mouse-event</code> to allow intercepting and preventing mouse events in <code>webContents</code>. <a href="https://github.com/electron/electron/pull/47364" target="_blank" rel="noopener noreferrer" class="">#47364</a> (Also in <a href="https://github.com/electron/electron/pull/47365" target="_blank" rel="noopener noreferrer" class="">36</a>)</li>
<li class="">Added <code>scriptURL</code> property to <code>ServiceWorkerMain</code>. <a href="https://github.com/electron/electron/pull/45863" target="_blank" rel="noopener noreferrer" class="">#45863</a></li>
<li class="">Added <code>sublabel</code> functionality for menus on macOS &gt;= 14.4. <a href="https://github.com/electron/electron/pull/47042" target="_blank" rel="noopener noreferrer" class="">#47042</a> (Also in <a href="https://github.com/electron/electron/pull/47041" target="_blank" rel="noopener noreferrer" class="">35</a>, <a href="https://github.com/electron/electron/pull/47040" target="_blank" rel="noopener noreferrer" class="">36</a>)</li>
<li class="">Added support for <code>HIDDevice.collections</code>. <a href="https://github.com/electron/electron/pull/47483" target="_blank" rel="noopener noreferrer" class="">#47483</a> (Also in <a href="https://github.com/electron/electron/pull/47484" target="_blank" rel="noopener noreferrer" class="">36</a>)</li>
<li class="">Added support for <code>--no-experimental-global-navigator</code> flag. <a href="https://github.com/electron/electron/pull/47418" target="_blank" rel="noopener noreferrer" class="">#47418</a> (Also in <a href="https://github.com/electron/electron/pull/47416" target="_blank" rel="noopener noreferrer" class="">35</a>, <a href="https://github.com/electron/electron/pull/47417" target="_blank" rel="noopener noreferrer" class="">36</a>)</li>
<li class="">Added support for <code>screen.dipToScreenPoint(point)</code> and <code>screen.screenToDipPoint(point)</code> on Linux X11. <a href="https://github.com/electron/electron/pull/46895" target="_blank" rel="noopener noreferrer" class="">#46895</a> (Also in <a href="https://github.com/electron/electron/pull/47124" target="_blank" rel="noopener noreferrer" class="">35</a>, <a href="https://github.com/electron/electron/pull/47125" target="_blank" rel="noopener noreferrer" class="">36</a>)</li>
<li class="">Added support for menu item role <code>palette</code> and <code>header</code> on macOS. <a href="https://github.com/electron/electron/pull/47245" target="_blank" rel="noopener noreferrer" class="">#47245</a></li>
<li class="">Added support for node option <code>--experimental-network-inspection</code>. <a href="https://github.com/electron/electron/pull/47031" target="_blank" rel="noopener noreferrer" class="">#47031</a> (Also in <a href="https://github.com/electron/electron/pull/47029" target="_blank" rel="noopener noreferrer" class="">35</a>, <a href="https://github.com/electron/electron/pull/47030" target="_blank" rel="noopener noreferrer" class="">36</a>)</li>
<li class="">Exposed <code>win.isContentProtected()</code> to allow developers to check window protection status. <a href="https://github.com/electron/electron/pull/47310" target="_blank" rel="noopener noreferrer" class="">#47310</a> (Also in <a href="https://github.com/electron/electron/pull/47311" target="_blank" rel="noopener noreferrer" class="">36</a>)</li>
</ul>
<h2 class="anchor anchorTargetStickyNavbar_Vzrq" id="breaking-changes">Breaking Changes<a href="https://electronjs.org/blog/electron-37-0#breaking-changes" class="hash-link" aria-label="Direct link to Breaking Changes" title="Direct link to Breaking Changes" translate="no">​</a></h2>
<h3 class="anchor anchorTargetStickyNavbar_Vzrq" id="utility-process-unhandled-rejection-behavior-change">Utility Process unhandled rejection behavior change<a href="https://electronjs.org/blog/electron-37-0#utility-process-unhandled-rejection-behavior-change" class="hash-link" aria-label="Direct link to Utility Process unhandled rejection behavior change" title="Direct link to Utility Process unhandled rejection behavior change" translate="no">​</a></h3>
<p>Utility Processes will now warn with an error message when an unhandled
rejection occurs instead of crashing the process.</p>
<p>To restore the previous behavior, you can use:</p>
<div class="language-js codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_QJqH"><pre tabindex="0" class="prism-code language-js codeBlock_bY9V thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#393A34"><span class="token plain">process</span><span class="token punctuation" style="color:#393A34">.</span><span class="token method function property-access" style="color:#d73a49">on</span><span class="token punctuation" style="color:#393A34">(</span><span class="token string" style="color:#e3116c">'unhandledRejection'</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"> </span><span class="token arrow operator" style="color:#393A34">=&gt;</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">  process</span><span class="token punctuation" style="color:#393A34">.</span><span class="token method function property-access" style="color:#d73a49">exit</span><span class="token punctuation" style="color:#393A34">(</span><span class="token number" style="color:#36acaa">1</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><br></span></code></pre></div></div>
<h3 class="anchor anchorTargetStickyNavbar_Vzrq" id="behavior-changed-processexit-kills-utility-process-synchronously">Behavior Changed: <code>process.exit()</code> kills utility process synchronously<a href="https://electronjs.org/blog/electron-37-0#behavior-changed-processexit-kills-utility-process-synchronously" class="hash-link" aria-label="Direct link to behavior-changed-processexit-kills-utility-process-synchronously" title="Direct link to behavior-changed-processexit-kills-utility-process-synchronously" translate="no">​</a></h3>
<p>Calling <code>process.exit()</code> in a utility process will now kill the utility process synchronously.
This brings the behavior of <code>process.exit()</code> in line with Node.js behavior.</p>
<p>Please refer to the
<a href="https://nodejs.org/docs/latest-v22.x/api/process.html#processexitcode" target="_blank" rel="noopener noreferrer" class="">Node.js docs</a> and
<a href="https://github.com/electron/electron/pull/45690" target="_blank" rel="noopener noreferrer" class="">PR #45690</a> to understand the potential
implications of that, e.g., when calling <code>console.log()</code> before <code>process.exit()</code>.</p>
<h3 class="anchor anchorTargetStickyNavbar_Vzrq" id="behavior-changed-webusb-and-webserial-blocklist-support">Behavior Changed: WebUSB and WebSerial Blocklist Support<a href="https://electronjs.org/blog/electron-37-0#behavior-changed-webusb-and-webserial-blocklist-support" class="hash-link" aria-label="Direct link to Behavior Changed: WebUSB and WebSerial Blocklist Support" title="Direct link to Behavior Changed: WebUSB and WebSerial Blocklist Support" translate="no">​</a></h3>
<p><a href="https://developer.mozilla.org/en-US/docs/Web/API/WebUSB_API" target="_blank" rel="noopener noreferrer" class="">WebUSB</a> and <a href="https://developer.mozilla.org/en-US/docs/Web/API/Web_Serial_API" target="_blank" rel="noopener noreferrer" class="">Web Serial</a> now support the <a href="https://wicg.github.io/webusb/#blocklist" target="_blank" rel="noopener noreferrer" class="">WebUSB Blocklist</a> and <a href="https://wicg.github.io/serial/#blocklist" target="_blank" rel="noopener noreferrer" class="">Web Serial Blocklist</a> used by Chromium and outlined in their respective specifications.</p>
<p>To disable these, users can pass <code>disable-usb-blocklist</code> and <code>disable-serial-blocklist</code> as command line flags.</p>
<h3 class="anchor anchorTargetStickyNavbar_Vzrq" id="removed-null-value-for-session-property-in-protocolresponse">Removed: <code>null</code> value for <code>session</code> property in <code>ProtocolResponse</code><a href="https://electronjs.org/blog/electron-37-0#removed-null-value-for-session-property-in-protocolresponse" class="hash-link" aria-label="Direct link to removed-null-value-for-session-property-in-protocolresponse" title="Direct link to removed-null-value-for-session-property-in-protocolresponse" translate="no">​</a></h3>
<p>This deprecated feature has been removed.</p>
<p>Previously, setting the <code>ProtocolResponse.session</code> property to <code>null</code>
would create a random independent session. This is no longer supported.</p>
<p>Using single-purpose sessions here is discouraged due to overhead costs;
however, old code that needs to preserve this behavior can emulate it by
creating a random session with <code>session.fromPartition(some_random_string)</code>
and then using it in <code>ProtocolResponse.session</code>.</p>
<h3 class="anchor anchorTargetStickyNavbar_Vzrq" id="behavior-changed-browserwindowisvisibleonallworkspaces-on-linux">Behavior Changed: <code>BrowserWindow.IsVisibleOnAllWorkspaces()</code> on Linux<a href="https://electronjs.org/blog/electron-37-0#behavior-changed-browserwindowisvisibleonallworkspaces-on-linux" class="hash-link" aria-label="Direct link to behavior-changed-browserwindowisvisibleonallworkspaces-on-linux" title="Direct link to behavior-changed-browserwindowisvisibleonallworkspaces-on-linux" translate="no">​</a></h3>
<p><code>BrowserWindow.IsVisibleOnAllWorkspaces()</code> will now return false on Linux if the
window is not currently visible.</p>
<h2 class="anchor anchorTargetStickyNavbar_Vzrq" id="end-of-support-for-34xy">End of Support for 34.x.y<a href="https://electronjs.org/blog/electron-37-0#end-of-support-for-34xy" class="hash-link" aria-label="Direct link to End of Support for 34.x.y" title="Direct link to End of Support for 34.x.y" translate="no">​</a></h2>
<p>Electron 34.x.y has reached end-of-support as per the project's <a href="https://www.electronjs.org/docs/latest/tutorial/electron-timelines#version-support-policy" target="_blank" rel="noopener noreferrer" class="">support policy</a>. Developers and applications are encouraged to upgrade to a newer version of Electron.</p>
<table><thead><tr><th>E37 (Jun'25)</th><th>E38 (Aug'25)</th><th>E39 (Oct'25)</th></tr></thead><tbody><tr><td>37.x.y</td><td>38.x.y</td><td>39.x.y</td></tr><tr><td>36.x.y</td><td>37.x.y</td><td>38.x.y</td></tr><tr><td>35.x.y</td><td>36.x.y</td><td>37.x.y</td></tr></tbody></table>
<h2 class="anchor anchorTargetStickyNavbar_Vzrq" id="whats-next">What's Next<a href="https://electronjs.org/blog/electron-37-0#whats-next" class="hash-link" aria-label="Direct link to What's Next" title="Direct link to What's Next" translate="no">​</a></h2>
<p>In the short term, you can expect the team to continue to focus on keeping up with the development of the major components that make up Electron, including Chromium, Node, and V8.</p>
<p>You can find <a href="https://www.electronjs.org/docs/latest/tutorial/electron-timelines" target="_blank" rel="noopener noreferrer" class="">Electron's public timeline here</a>.</p>
<p>More information about future changes can be found on the <a href="https://github.com/electron/electron/blob/main/docs/breaking-changes.md" target="_blank" rel="noopener noreferrer" class="">Planned Breaking Changes</a> page.</p>]]></content>
        <author>
            <name>georgexu99</name>
            <uri>https://github.com/georgexu99</uri>
        </author>
        <author>
            <name>VerteDinde</name>
            <uri>https://github.com/VerteDinde</uri>
        </author>
        <category label="Release" term="Release"/>
    </entry>
    <entry>
        <title type="html"><![CDATA[Electron 36.0.0]]></title>
        <id>https://electronjs.org/blog/electron-36-0</id>
        <link href="https://electronjs.org/blog/electron-36-0"/>
        <updated>2025-04-28T00:00:00.000Z</updated>
        <summary type="html"><![CDATA[Electron 36.0.0 has been released! It includes upgrades to Chromium 136, V8 13.6, and Node 22.14.0.]]></summary>
        <content type="html"><![CDATA[<p>Electron 36.0.0 has been released! It includes upgrades to Chromium 136, V8 13.6, and Node 22.14.0.</p>
<hr>
<p>The Electron team is excited to announce the release of Electron 36.0.0! You can install it with npm via <code>npm install electron@latest</code> or download it from our <a href="https://releases.electronjs.org/release?channel=stable" target="_blank" rel="noopener noreferrer" class="">releases website</a>. Continue reading for details about this release.</p>
<p>If you have any feedback, please share it with us on <a href="https://bsky.app/profile/electronjs.org" target="_blank" rel="noopener noreferrer" class="">Bluesky</a> or <a href="https://social.lfx.dev/@electronjs" target="_blank" rel="noopener noreferrer" class="">Mastodon</a>, or join our community <a href="https://discord.com/invite/electronjs" target="_blank" rel="noopener noreferrer" class="">Discord</a>! Bugs and feature requests can be reported in Electron's <a href="https://github.com/electron/electron/issues" target="_blank" rel="noopener noreferrer" class="">issue tracker</a>.</p>
<h2 class="anchor anchorTargetStickyNavbar_Vzrq" id="notable-changes">Notable Changes<a href="https://electronjs.org/blog/electron-36-0#notable-changes" class="hash-link" aria-label="Direct link to Notable Changes" title="Direct link to Notable Changes" translate="no">​</a></h2>
<h3 class="anchor anchorTargetStickyNavbar_Vzrq" id="writing-tools-support">Writing Tools Support<a href="https://electronjs.org/blog/electron-36-0#writing-tools-support" class="hash-link" aria-label="Direct link to Writing Tools Support" title="Direct link to Writing Tools Support" translate="no">​</a></h3>
<p>In Electron 36, you can enable macOS system-level features like Writing Tools (spelling and grammar), Autofill, and Services menu items in your context menus. To do so, pass a <a href="https://www.electronjs.org/docs/latest/api/web-frame-main#class-webframemain" target="_blank" rel="noopener noreferrer" class="">WebFrameMain</a> instance into the <code>frame</code> parameter for <code>menu.popup()</code>.</p>
<div class="language-js codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_QJqH"><pre tabindex="0" class="prism-code language-js codeBlock_bY9V thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#393A34"><span class="token keyword module" style="color:#00009f">import</span><span class="token plain"> </span><span class="token imports punctuation" style="color:#393A34">{</span><span class="token imports"> </span><span class="token imports maybe-class-name">BrowserWindow</span><span class="token imports punctuation" style="color:#393A34">,</span><span class="token imports"> </span><span class="token imports maybe-class-name">Menu</span><span class="token imports punctuation" style="color:#393A34">,</span><span class="token imports"> </span><span class="token imports maybe-class-name">WebFrameMain</span><span class="token imports"> </span><span class="token imports punctuation" style="color:#393A34">}</span><span class="token plain"> </span><span class="token keyword module" style="color:#00009f">from</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">'electron'</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token keyword" style="color:#00009f">const</span><span class="token plain"> currentWindow </span><span class="token operator" style="color:#393A34">=</span><span class="token plain"> </span><span class="token maybe-class-name">BrowserWindow</span><span class="token punctuation" style="color:#393A34">.</span><span class="token method function property-access" style="color:#d73a49">getFocusedWindow</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token keyword" style="color:#00009f">const</span><span class="token plain"> focusedFrame </span><span class="token operator" style="color:#393A34">=</span><span class="token plain"> currentWindow</span><span class="token punctuation" style="color:#393A34">.</span><span class="token property-access">webContents</span><span class="token punctuation" style="color:#393A34">.</span><span class="token property-access">focusedFrame</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token keyword" style="color:#00009f">const</span><span class="token plain"> menu </span><span class="token operator" style="color:#393A34">=</span><span class="token plain"> </span><span class="token maybe-class-name">Menu</span><span class="token punctuation" style="color:#393A34">.</span><span class="token method function property-access" style="color:#d73a49">buildFromTemplate</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">[</span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"> </span><span class="token literal-property property" style="color:#36acaa">label</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">'Copy'</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> </span><span class="token literal-property property" style="color:#36acaa">role</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">'copy'</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">]</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">menu</span><span class="token punctuation" style="color:#393A34">.</span><span class="token method function property-access" style="color:#d73a49">popup</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">  </span><span class="token literal-property property" style="color:#36acaa">window</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> currentWindow</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">  </span><span class="token literal-property property" style="color:#36acaa">frame</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> focusedFrame</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><br></span></code></pre></div></div>
<h2 class="anchor anchorTargetStickyNavbar_Vzrq" id="stack-changes">Stack Changes<a href="https://electronjs.org/blog/electron-36-0#stack-changes" class="hash-link" aria-label="Direct link to Stack Changes" title="Direct link to Stack Changes" translate="no">​</a></h2>
<ul>
<li class="">Chromium <code>136.0.7103.48</code>
<ul>
<li class=""><a href="https://developer.chrome.com/blog/new-in-chrome-136/" target="_blank" rel="noopener noreferrer" class="">New in 136</a></li>
<li class=""><a href="https://developer.chrome.com/blog/new-in-chrome-135/" target="_blank" rel="noopener noreferrer" class="">New in 135</a></li>
</ul>
</li>
<li class="">Node <code>22.14.0</code>
<ul>
<li class=""><a href="https://nodejs.org/en/blog/release/v22.14.0/" target="_blank" rel="noopener noreferrer" class="">Node 22.14.0 blog post</a></li>
</ul>
</li>
<li class="">V8 <code>13.6</code></li>
</ul>
<p>Electron 36 upgrades Chromium from <code>134.0.6998.23</code> to <code>136.0.7103.48</code>, and V8 from <code>13.5</code> to <code>13.6</code>.</p>
<h2 class="anchor anchorTargetStickyNavbar_Vzrq" id="new-features-and-improvements">New Features and Improvements<a href="https://electronjs.org/blog/electron-36-0#new-features-and-improvements" class="hash-link" aria-label="Direct link to New Features and Improvements" title="Direct link to New Features and Improvements" translate="no">​</a></h2>
<ul>
<li class="">Added <code>BrowserWindow.isSnapped()</code> to indicate whether a given window has been arranged via Snap on Windows. <a href="https://github.com/electron/electron/pull/46226" target="_blank" rel="noopener noreferrer" class="">#46226</a></li>
<li class="">Added <code>WebContents.focusedFrame</code> to get the focused frame.</li>
<li class="">Fixed <code>WebContents.opener</code> to specify potential <code>null</code> type. <a href="https://github.com/electron/electron/pull/45667" target="_blank" rel="noopener noreferrer" class="">#45667</a></li>
<li class="">Added <code>ffmpeg.dll</code> to delay load configuration. <a href="https://github.com/electron/electron/pull/46173" target="_blank" rel="noopener noreferrer" class="">#46173</a> (Also in <a href="https://github.com/electron/electron/pull/46174" target="_blank" rel="noopener noreferrer" class="">34</a>, <a href="https://github.com/electron/electron/pull/46172" target="_blank" rel="noopener noreferrer" class="">35</a>)</li>
<li class="">Added <code>nativeTheme.shouldUseDarkColorsForSystemIntegratedUI</code> to distinguish system and app theme. <a href="https://github.com/electron/electron/pull/46598" target="_blank" rel="noopener noreferrer" class="">#46598</a> (Also in <a href="https://github.com/electron/electron/pull/46599" target="_blank" rel="noopener noreferrer" class="">35</a>)</li>
<li class="">Added <code>excludeUrls</code> to <code>webRequest</code> filter and deprecated the use of empty arrays in <code>urls</code> property. <a href="https://github.com/electron/electron/pull/44692" target="_blank" rel="noopener noreferrer" class="">#44692</a> (Also in <a href="https://github.com/electron/electron/pull/45678" target="_blank" rel="noopener noreferrer" class="">35</a>)</li>
<li class="">Added support for Autofill, Writing Tools and Services macOS level menu items in context menus via the new <code>frame</code> option in <code>menu.popup</code>. <a href="https://github.com/electron/electron/pull/46350" target="_blank" rel="noopener noreferrer" class="">#46350</a></li>
<li class="">Added support for <code>system-context-menu</code> on Linux. <a href="https://github.com/electron/electron/pull/46399" target="_blank" rel="noopener noreferrer" class="">#46399</a></li>
<li class="">Improved ASAR integrity checks on Windows. <a href="https://github.com/electron/electron/pull/46537" target="_blank" rel="noopener noreferrer" class="">#46537</a></li>
<li class="">Improved performance of <code>desktopCapturer.getSources</code> when not requesting thumbnails on macOS. <a href="https://github.com/electron/electron/pull/46251" target="_blank" rel="noopener noreferrer" class="">#46251</a> (Also in <a href="https://github.com/electron/electron/pull/46250" target="_blank" rel="noopener noreferrer" class="">34</a>, <a href="https://github.com/electron/electron/pull/46249" target="_blank" rel="noopener noreferrer" class="">35</a>)</li>
<li class="">Removed 240 FPS limit when using shared texture OSR. <a href="https://github.com/electron/electron/pull/45669" target="_blank" rel="noopener noreferrer" class="">#45669</a> (Also in <a href="https://github.com/electron/electron/pull/45781" target="_blank" rel="noopener noreferrer" class="">35</a>)</li>
</ul>
<h2 class="anchor anchorTargetStickyNavbar_Vzrq" id="breaking-changes">Breaking Changes<a href="https://electronjs.org/blog/electron-36-0#breaking-changes" class="hash-link" aria-label="Direct link to Breaking Changes" title="Direct link to Breaking Changes" translate="no">​</a></h2>
<h3 class="anchor anchorTargetStickyNavbar_Vzrq" id="deprecated-nativeimagegetbitmap">Deprecated: <code>NativeImage.getBitmap()</code><a href="https://electronjs.org/blog/electron-36-0#deprecated-nativeimagegetbitmap" class="hash-link" aria-label="Direct link to deprecated-nativeimagegetbitmap" title="Direct link to deprecated-nativeimagegetbitmap" translate="no">​</a></h3>
<p>The <code>NativeImage.getBitmap()</code> function is now deprecated and documented as an alias for <code>NativeImage.toBitmap()</code>.
The two functions both return a newly-allocated copy of the bitmap and are functionally equivalent.</p>
<h3 class="anchor anchorTargetStickyNavbar_Vzrq" id="deprecated-extension-methods-and-events-on-session">Deprecated: Extension methods and events on <code>session</code><a href="https://electronjs.org/blog/electron-36-0#deprecated-extension-methods-and-events-on-session" class="hash-link" aria-label="Direct link to deprecated-extension-methods-and-events-on-session" title="Direct link to deprecated-extension-methods-and-events-on-session" translate="no">​</a></h3>
<p><code>session.loadExtension</code>, <code>session.removeExtension</code>, <code>session.getExtension</code>,
<code>session.getAllExtensions</code>, and the events <code>extension-loaded</code>,
<code>extension-unloaded</code>, and <code>extension-ready</code> have all moved to the new
<a href="https://www.electronjs.org/docs/latest/api/extensions-api" target="_blank" rel="noopener noreferrer" class=""><code>Extensions</code> object</a>
accessible via the <code>session.extensions</code> instance property.</p>
<h3 class="anchor anchorTargetStickyNavbar_Vzrq" id="removed-quota-type-syncable-in-sessionclearstoragedataoptions">Removed: <code>quota</code> type <code>syncable</code> in <code>session.clearStorageData(options)</code><a href="https://electronjs.org/blog/electron-36-0#removed-quota-type-syncable-in-sessionclearstoragedataoptions" class="hash-link" aria-label="Direct link to removed-quota-type-syncable-in-sessionclearstoragedataoptions" title="Direct link to removed-quota-type-syncable-in-sessionclearstoragedataoptions" translate="no">​</a></h3>
<p>When calling <code>session.clearStorageData(options)</code>, the <code>options.quota</code> type
<code>syncable</code> is no longer supported because it has been
<a href="https://chromium-review.googlesource.com/c/chromium/src/+/6309405" target="_blank" rel="noopener noreferrer" class="">removed</a>
from upstream Chromium.</p>
<h3 class="anchor anchorTargetStickyNavbar_Vzrq" id="deprecated-quota-property-in-sessionclearstoragedataoptions">Deprecated: <code>quota</code> property in <code>session.clearStorageData(options)</code><a href="https://electronjs.org/blog/electron-36-0#deprecated-quota-property-in-sessionclearstoragedataoptions" class="hash-link" aria-label="Direct link to deprecated-quota-property-in-sessionclearstoragedataoptions" title="Direct link to deprecated-quota-property-in-sessionclearstoragedataoptions" translate="no">​</a></h3>
<p>When calling <code>Session.clearStorageData(options)</code>, the <code>options.quota</code>
property is deprecated. Since the <code>syncable</code> type was removed, there
is only type left -- <code>'temporary'</code> -- so specifying it is unnecessary.</p>
<h3 class="anchor anchorTargetStickyNavbar_Vzrq" id="behavior-changed-gtk-4-is-the-default-when-running-on-gnome">Behavior Changed: GTK 4 is the default when running on GNOME<a href="https://electronjs.org/blog/electron-36-0#behavior-changed-gtk-4-is-the-default-when-running-on-gnome" class="hash-link" aria-label="Direct link to Behavior Changed: GTK 4 is the default when running on GNOME" title="Direct link to Behavior Changed: GTK 4 is the default when running on GNOME" translate="no">​</a></h3>
<p>After an <a href="https://chromium-review.googlesource.com/c/chromium/src/+/6310469" target="_blank" rel="noopener noreferrer" class="">upstream change</a>, GTK 4 is now the default when running on GNOME.</p>
<p>In rare cases, this may cause some applications or configurations to <a href="https://github.com/electron/electron/issues/46538" target="_blank" rel="noopener noreferrer" class="">error</a> with the following message:</p>
<div class="language-stderr codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_QJqH"><pre tabindex="0" class="prism-code language-stderr codeBlock_bY9V thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#393A34"><span class="token plain">Gtk-ERROR **: 11:30:38.382: GTK 2/3 symbols detected. Using GTK 2/3 and GTK 4 in the same process is not supported</span><br></span></code></pre></div></div>
<p>Affected users can work around this by specifying the <code>gtk-version</code> command-line flag:</p>
<div class="language-shell codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_QJqH"><pre tabindex="0" class="prism-code language-shell codeBlock_bY9V thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#393A34"><span class="token plain">$ electron --gtk-version=3   # or --gtk-version=2</span><br></span></code></pre></div></div>
<p>The same can be done with the <a href="https://www.electronjs.org/docs/latest/api/command-line#commandlineappendswitchswitch-value" target="_blank" rel="noopener noreferrer" class=""><code>app.commandLine.appendSwitch</code></a> function.</p>
<h3 class="anchor anchorTargetStickyNavbar_Vzrq" id="behavior-changed-appcommandline">Behavior Changed: <code>app.commandLine</code><a href="https://electronjs.org/blog/electron-36-0#behavior-changed-appcommandline" class="hash-link" aria-label="Direct link to behavior-changed-appcommandline" title="Direct link to behavior-changed-appcommandline" translate="no">​</a></h3>
<p><code>app.commandLine</code> will convert uppercases switches and arguments to lowercase.</p>
<p><code>app.commandLine</code> was only meant to handle Chromium switches (which aren't case-sensitive) and switches passed via <code>app.commandLine</code> will not be passed down to any of the child processes.</p>
<p>If you were using <code>app.commandLine</code> to parse app-specific command line arguments, you should do this via <code>process.argv</code>.</p>
<h2 class="anchor anchorTargetStickyNavbar_Vzrq" id="end-of-support-for-33xy">End of Support for 33.x.y<a href="https://electronjs.org/blog/electron-36-0#end-of-support-for-33xy" class="hash-link" aria-label="Direct link to End of Support for 33.x.y" title="Direct link to End of Support for 33.x.y" translate="no">​</a></h2>
<p>Electron 33.x.y has reached end-of-support as per the project's <a href="https://www.electronjs.org/docs/latest/tutorial/electron-timelines#version-support-policy" target="_blank" rel="noopener noreferrer" class="">support policy</a>. Developers and applications are encouraged to upgrade to a newer version of Electron.</p>
<table><thead><tr><th>E36 (Apr'25)</th><th>E37 (Jun'25)</th><th>E38 (Aug'25)</th></tr></thead><tbody><tr><td>36.x.y</td><td>37.x.y</td><td>38.x.y</td></tr><tr><td>35.x.y</td><td>36.x.y</td><td>37.x.y</td></tr><tr><td>34.x.y</td><td>35.x.y</td><td>36.x.y</td></tr></tbody></table>
<h2 class="anchor anchorTargetStickyNavbar_Vzrq" id="whats-next">What's Next<a href="https://electronjs.org/blog/electron-36-0#whats-next" class="hash-link" aria-label="Direct link to What's Next" title="Direct link to What's Next" translate="no">​</a></h2>
<p>In the short term, you can expect the team to continue to focus on keeping up with the development of the major components that make up Electron, including Chromium, Node, and V8.</p>
<p>You can find <a href="https://www.electronjs.org/docs/latest/tutorial/electron-timelines" target="_blank" rel="noopener noreferrer" class="">Electron's public timeline here</a>.</p>
<p>More information about future changes can be found on the <a href="https://github.com/electron/electron/blob/main/docs/breaking-changes.md" target="_blank" rel="noopener noreferrer" class="">Planned Breaking Changes</a> page.</p>]]></content>
        <author>
            <name>georgexu99</name>
            <uri>https://github.com/georgexu99</uri>
        </author>
        <category label="Release" term="Release"/>
    </entry>
    <entry>
        <title type="html"><![CDATA[Electron 35.0.0]]></title>
        <id>https://electronjs.org/blog/electron-35-0</id>
        <link href="https://electronjs.org/blog/electron-35-0"/>
        <updated>2025-03-04T00:00:00.000Z</updated>
        <summary type="html"><![CDATA[Electron 35.0.0 has been released! It includes upgrades to Chromium 134.0.6998.44, V8 13.5, and Node 22.14.0.]]></summary>
        <content type="html"><![CDATA[<p>Electron 35.0.0 has been released! It includes upgrades to Chromium 134.0.6998.44, V8 13.5, and Node 22.14.0.</p>
<hr>
<p>The Electron team is excited to announce the release of Electron 35.0.0! You can install it with npm via <code>npm install electron@latest</code> or download it from our <a href="https://releases.electronjs.org/release?channel=stable" target="_blank" rel="noopener noreferrer" class="">releases website</a>. Continue reading for details about this release.</p>
<p>If you have any feedback, please share it with us on <a href="https://bsky.app/profile/electronjs.org" target="_blank" rel="noopener noreferrer" class="">Bluesky</a> or <a href="https://social.lfx.dev/@electronjs" target="_blank" rel="noopener noreferrer" class="">Mastodon</a>, or join our community <a href="https://discord.com/invite/electronjs" target="_blank" rel="noopener noreferrer" class="">Discord</a>! Bugs and feature requests can be reported in Electron's <a href="https://github.com/electron/electron/issues" target="_blank" rel="noopener noreferrer" class="">issue tracker</a>.</p>
<h2 class="anchor anchorTargetStickyNavbar_Vzrq" id="notable-changes">Notable Changes<a href="https://electronjs.org/blog/electron-35-0#notable-changes" class="hash-link" aria-label="Direct link to Notable Changes" title="Direct link to Notable Changes" translate="no">​</a></h2>
<h3 class="anchor anchorTargetStickyNavbar_Vzrq" id="service-worker-preload-scripts-for-improved-extensions-support">Service Worker Preload Scripts for Improved Extensions Support<a href="https://electronjs.org/blog/electron-35-0#service-worker-preload-scripts-for-improved-extensions-support" class="hash-link" aria-label="Direct link to Service Worker Preload Scripts for Improved Extensions Support" title="Direct link to Service Worker Preload Scripts for Improved Extensions Support" translate="no">​</a></h3>
<p>Originally proposed in <a href="https://github.com/electron/rfcs/blob/main/text/0008-preload-realm.md" target="_blank" rel="noopener noreferrer" class="">RFC #8</a> by <a href="https://github.com/samuelmaddock" target="_blank" rel="noopener noreferrer" class="">@samuelmaddock</a>, Electron 35 adds the ability to attach a preload script to <a href="https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API" target="_blank" rel="noopener noreferrer" class="">Service Workers</a>. With Chrome's Manifest V3 Extensions routing a lot of work through <a href="https://developer.chrome.com/docs/extensions/develop/concepts/service-workers" target="_blank" rel="noopener noreferrer" class="">extension service workers</a>, this feature fills in a gap in Electron's support for modern Chrome extensions.</p>
<p>When registering a preload script programmatically at the Session level, you can now specifically apply it to Service Worker contexts with the <a href="https://www.electronjs.org/docs/latest/api/session#sesregisterpreloadscriptscript" target="_blank" rel="noopener noreferrer" class=""><code>ses.registerPreloadScript(script)</code></a> API.</p>
<div class="language-js codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockTitle_OeMC">Main Process</div><div class="codeBlockContent_QJqH"><pre tabindex="0" class="prism-code language-js codeBlock_bY9V thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#393A34"><span class="token comment" style="color:#999988;font-style:italic">// Add our preload realm script to the session.</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">session</span><span class="token punctuation" style="color:#393A34">.</span><span class="token property-access">defaultSession</span><span class="token punctuation" style="color:#393A34">.</span><span class="token method function property-access" style="color:#d73a49">registerPreloadScript</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">  </span><span class="token comment" style="color:#999988;font-style:italic">// Our script should only run in service worker preload realms.</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">  </span><span class="token literal-property property" style="color:#36acaa">type</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">'service-worker'</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">  </span><span class="token comment" style="color:#999988;font-style:italic">// The absolute path to the script.</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">  </span><span class="token literal-property property" style="color:#36acaa">script</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> path</span><span class="token punctuation" style="color:#393A34">.</span><span class="token method function property-access" style="color:#d73a49">join</span><span class="token punctuation" style="color:#393A34">(</span><span class="token plain">__dirname</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">'extension-sw-preload.js'</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><br></span></code></pre></div></div>
<p>Furthermore, IPC is now available between Service Workers and their attached preload scripts via the <code>ServiceWorkerMain.ipc</code> class. The preload script will still use the <code>ipcRenderer</code> module to communicate with its Service Worker. See the original RFC for more details.</p>
<p>This feature was preceded by many other changes that laid the groundwork for it:</p>
<ul>
<li class=""><a href="https://github.com/electron/electron/pull/45329" target="_blank" rel="noopener noreferrer" class="">#45329</a> redesigned the Session module's preload APIs to support registering and unregistering individual preload scripts.</li>
<li class=""><a href="https://github.com/electron/electron/pull/45330" target="_blank" rel="noopener noreferrer" class="">#45229</a> added the experimental <code>contextBridge.executeInMainWorld(executionScript)</code> script to evaluate JavaScript in the main world over the context bridge.</li>
<li class=""><a href="https://github.com/electron/electron/pull/45341" target="_blank" rel="noopener noreferrer" class="">#45341</a> added the <code>ServiceWorkerMain</code> class to interact with Service Workers in the main process.</li>
</ul>
<h2 class="anchor anchorTargetStickyNavbar_Vzrq" id="stack-changes">Stack Changes<a href="https://electronjs.org/blog/electron-35-0#stack-changes" class="hash-link" aria-label="Direct link to Stack Changes" title="Direct link to Stack Changes" translate="no">​</a></h2>
<ul>
<li class="">Chromium <code>134.0.6998.44</code>
<ul>
<li class=""><a href="https://developer.chrome.com/blog/new-in-chrome-134/" target="_blank" rel="noopener noreferrer" class="">New in 134</a></li>
<li class=""><a href="https://developer.chrome.com/blog/new-in-chrome-133/" target="_blank" rel="noopener noreferrer" class="">New in 133</a></li>
</ul>
</li>
<li class="">Node <code>22.14.0</code>
<ul>
<li class=""><a href="https://nodejs.org/en/blog/release/v22.14.0/" target="_blank" rel="noopener noreferrer" class="">Node 22.14.0 blog post</a></li>
</ul>
</li>
<li class="">V8 <code>13.5</code></li>
</ul>
<p>Electron 35 upgrades Chromium from <code>132.0.6834.83</code> to <code>134.0.6998.44</code>, Node from <code>20.18.1</code> to <code>22.14.0</code>, and V8 from <code>13.2</code> to <code>13.5</code>.</p>
<h3 class="anchor anchorTargetStickyNavbar_Vzrq" id="new-features">New Features<a href="https://electronjs.org/blog/electron-35-0#new-features" class="hash-link" aria-label="Direct link to New Features" title="Direct link to New Features" translate="no">​</a></h3>
<ul>
<li class="">Added <code>NSPrefersDisplaySafeAreaCompatibilityMode</code> = <code>false</code> to <code>Info.plist</code> to remove "Scale to fit below built-in camera." from app options. <a href="https://github.com/electron/electron/pull/45357" target="_blank" rel="noopener noreferrer" class="">#45357</a> <sup>(Also in <a href="https://github.com/electron/electron/pull/45469" target="_blank" rel="noopener noreferrer" class="">v34.1.0</a>)</sup></li>
<li class="">Added <code>ServiceWorkerMain</code> class to interact with service workers in the main process. <a href="https://github.com/electron/electron/pull/45341" target="_blank" rel="noopener noreferrer" class="">#45341</a>
<ul>
<li class="">Added <code>running-status-changed</code> event on <code>ServiceWorkers</code> to indicate when a service worker's running status has changed.</li>
<li class="">Added <code>startWorkerForScope</code> on <code>ServiceWorkers</code> to start a worker that may have been previously stopped.</li>
</ul>
</li>
<li class="">Added experimental <code>contextBridge.executeInMainWorld</code> to safely execute code across world boundaries. <a href="https://github.com/electron/electron/pull/45330" target="_blank" rel="noopener noreferrer" class="">#45330</a></li>
<li class="">Added <code>frame</code> to <code>'console-message'</code> event. <a href="https://github.com/electron/electron/pull/43617" target="_blank" rel="noopener noreferrer" class="">#43617</a></li>
<li class="">Added <code>query-session-end</code> event and improved <code>session-end</code> events on Windows. <a href="https://github.com/electron/electron/pull/44598" target="_blank" rel="noopener noreferrer" class="">#44598</a></li>
<li class="">Added <code>view.getVisible()</code>. <a href="https://github.com/electron/electron/pull/45409" target="_blank" rel="noopener noreferrer" class="">#45409</a></li>
<li class="">Added <code>webContents.navigationHistory.restore(index, entries)</code> API that allows restoration of navigation history. <a href="https://github.com/electron/electron/pull/45583" target="_blank" rel="noopener noreferrer" class="">#45583</a></li>
<li class="">Added optional animation parameter to <code>BrowserWindow.setVibrancy</code>. <a href="https://github.com/electron/electron/pull/35987" target="_blank" rel="noopener noreferrer" class="">#35987</a></li>
<li class="">Added permission support for <code>document.executeCommand("paste")</code>. <a href="https://github.com/electron/electron/pull/45471" target="_blank" rel="noopener noreferrer" class="">#45471</a> <sup>(Also in <a href="https://github.com/electron/electron/pull/45472" target="_blank" rel="noopener noreferrer" class="">v34.1.0</a>)</sup></li>
<li class="">Added support for <code>roundedCorners</code> BrowserWindow constructor option on Windows. <a href="https://github.com/electron/electron/pull/45740" target="_blank" rel="noopener noreferrer" class="">#45740</a> <sup>(Also in <a href="https://github.com/electron/electron/pull/45739" target="_blank" rel="noopener noreferrer" class="">v34.3.0</a>)</sup></li>
<li class="">Added support for service worker preload scripts. <a href="https://github.com/electron/electron/pull/45408" target="_blank" rel="noopener noreferrer" class="">#45408</a></li>
<li class="">Support Portal's <code>globalShortcuts</code>. Electron must be run with <code>--enable-features=GlobalShortcutsPortal</code> in order to have the feature working. <a href="https://github.com/electron/electron/pull/45297" target="_blank" rel="noopener noreferrer" class="">#45297</a></li>
</ul>
<h2 class="anchor anchorTargetStickyNavbar_Vzrq" id="breaking-changes">Breaking Changes<a href="https://electronjs.org/blog/electron-35-0#breaking-changes" class="hash-link" aria-label="Direct link to Breaking Changes" title="Direct link to Breaking Changes" translate="no">​</a></h2>
<h3 class="anchor anchorTargetStickyNavbar_Vzrq" id="removed-isdefault-and-status-properties-on-printerinfo">Removed: <code>isDefault</code> and <code>status</code> properties on <code>PrinterInfo</code><a href="https://electronjs.org/blog/electron-35-0#removed-isdefault-and-status-properties-on-printerinfo" class="hash-link" aria-label="Direct link to removed-isdefault-and-status-properties-on-printerinfo" title="Direct link to removed-isdefault-and-status-properties-on-printerinfo" translate="no">​</a></h3>
<p>These properties have been removed from the <code>PrinterInfo</code> object
because they have been removed from upstream Chromium.</p>
<h3 class="anchor anchorTargetStickyNavbar_Vzrq" id="deprecated-getfromversionid-on-sessionserviceworkers">Deprecated: <code>getFromVersionID</code> on <code>session.serviceWorkers</code><a href="https://electronjs.org/blog/electron-35-0#deprecated-getfromversionid-on-sessionserviceworkers" class="hash-link" aria-label="Direct link to deprecated-getfromversionid-on-sessionserviceworkers" title="Direct link to deprecated-getfromversionid-on-sessionserviceworkers" translate="no">​</a></h3>
<p>The <code>session.serviceWorkers.fromVersionID(versionId)</code> API has been deprecated
in favor of <code>session.serviceWorkers.getInfoFromVersionID(versionId)</code>. This was
changed to make it more clear which object is returned with the introduction
of the <code>session.serviceWorkers.getWorkerFromVersionID(versionId)</code> API.</p>
<div class="language-js codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_QJqH"><pre tabindex="0" class="prism-code language-js codeBlock_bY9V thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#393A34"><span class="token comment" style="color:#999988;font-style:italic">// Deprecated</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">session</span><span class="token punctuation" style="color:#393A34">.</span><span class="token property-access">serviceWorkers</span><span class="token punctuation" style="color:#393A34">.</span><span class="token method function property-access" style="color:#d73a49">fromVersionID</span><span class="token punctuation" style="color:#393A34">(</span><span class="token plain">versionId</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token comment" style="color:#999988;font-style:italic">// Replace with</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">session</span><span class="token punctuation" style="color:#393A34">.</span><span class="token property-access">serviceWorkers</span><span class="token punctuation" style="color:#393A34">.</span><span class="token method function property-access" style="color:#d73a49">getInfoFromVersionID</span><span class="token punctuation" style="color:#393A34">(</span><span class="token plain">versionId</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><br></span></code></pre></div></div>
<h3 class="anchor anchorTargetStickyNavbar_Vzrq" id="deprecated-setpreloads-getpreloads-on-session">Deprecated: <code>setPreloads</code>, <code>getPreloads</code> on <code>Session</code><a href="https://electronjs.org/blog/electron-35-0#deprecated-setpreloads-getpreloads-on-session" class="hash-link" aria-label="Direct link to deprecated-setpreloads-getpreloads-on-session" title="Direct link to deprecated-setpreloads-getpreloads-on-session" translate="no">​</a></h3>
<p><code>registerPreloadScript</code>, <code>unregisterPreloadScript</code>, and <code>getPreloadScripts</code> are introduced as a
replacement for the deprecated methods. These new APIs allow third-party libraries to register
preload scripts without replacing existing scripts. Also, the new <code>type</code> option allows for
additional preload targets beyond <code>frame</code>.</p>
<div class="language-js codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_QJqH"><pre tabindex="0" class="prism-code language-js codeBlock_bY9V thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#393A34"><span class="token comment" style="color:#999988;font-style:italic">// Deprecated</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">session</span><span class="token punctuation" style="color:#393A34">.</span><span class="token method function property-access" style="color:#d73a49">setPreloads</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">[</span><span class="token plain">path</span><span class="token punctuation" style="color:#393A34">.</span><span class="token method function property-access" style="color:#d73a49">join</span><span class="token punctuation" style="color:#393A34">(</span><span class="token plain">__dirname</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">'preload.js'</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">]</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token comment" style="color:#999988;font-style:italic">// Replace with:</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">session</span><span class="token punctuation" style="color:#393A34">.</span><span class="token method function property-access" style="color:#d73a49">registerPreloadScript</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">  </span><span class="token literal-property property" style="color:#36acaa">type</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">'frame'</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">  </span><span class="token literal-property property" style="color:#36acaa">id</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">'app-preload'</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">  </span><span class="token literal-property property" style="color:#36acaa">filePath</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> path</span><span class="token punctuation" style="color:#393A34">.</span><span class="token method function property-access" style="color:#d73a49">join</span><span class="token punctuation" style="color:#393A34">(</span><span class="token plain">__dirname</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">'preload.js'</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><br></span></code></pre></div></div>
<h3 class="anchor anchorTargetStickyNavbar_Vzrq" id="deprecated-level-message-line-and-sourceid-arguments-in-console-message-event-on-webcontents">Deprecated: <code>level</code>, <code>message</code>, <code>line</code>, and <code>sourceId</code> arguments in <code>console-message</code> event on <code>WebContents</code><a href="https://electronjs.org/blog/electron-35-0#deprecated-level-message-line-and-sourceid-arguments-in-console-message-event-on-webcontents" class="hash-link" aria-label="Direct link to deprecated-level-message-line-and-sourceid-arguments-in-console-message-event-on-webcontents" title="Direct link to deprecated-level-message-line-and-sourceid-arguments-in-console-message-event-on-webcontents" translate="no">​</a></h3>
<p>The <code>console-message</code> event on <code>WebContents</code> has been updated to provide details on the <code>Event</code>
argument.</p>
<div class="language-js codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_QJqH"><pre tabindex="0" class="prism-code language-js codeBlock_bY9V thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#393A34"><span class="token comment" style="color:#999988;font-style:italic">// Deprecated</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">webContents</span><span class="token punctuation" style="color:#393A34">.</span><span class="token method function property-access" style="color:#d73a49">on</span><span class="token punctuation" style="color:#393A34">(</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">  </span><span class="token string" style="color:#e3116c">'console-message'</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">  </span><span class="token punctuation" style="color:#393A34">(</span><span class="token parameter">event</span><span class="token parameter punctuation" style="color:#393A34">,</span><span class="token parameter"> level</span><span class="token parameter punctuation" style="color:#393A34">,</span><span class="token parameter"> message</span><span class="token parameter punctuation" style="color:#393A34">,</span><span class="token parameter"> line</span><span class="token parameter punctuation" style="color:#393A34">,</span><span class="token parameter"> sourceId</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"> </span><span class="token arrow operator" style="color:#393A34">=&gt;</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token comment" style="color:#999988;font-style:italic">// Replace with:</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">webContents</span><span class="token punctuation" style="color:#393A34">.</span><span class="token method function property-access" style="color:#d73a49">on</span><span class="token punctuation" style="color:#393A34">(</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">  </span><span class="token string" style="color:#e3116c">'console-message'</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">  </span><span class="token punctuation" style="color:#393A34">(</span><span class="token parameter punctuation" style="color:#393A34">{</span><span class="token parameter"> level</span><span class="token parameter punctuation" style="color:#393A34">,</span><span class="token parameter"> message</span><span class="token parameter punctuation" style="color:#393A34">,</span><span class="token parameter"> lineNumber</span><span class="token parameter punctuation" style="color:#393A34">,</span><span class="token parameter"> sourceId</span><span class="token parameter punctuation" style="color:#393A34">,</span><span class="token parameter"> frame </span><span class="token parameter punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"> </span><span class="token arrow operator" style="color:#393A34">=&gt;</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><br></span></code></pre></div></div>
<p>Additionally, <code>level</code> is now a string with possible values of <code>info</code>, <code>warning</code>, <code>error</code>, and <code>debug</code>.</p>
<h3 class="anchor anchorTargetStickyNavbar_Vzrq" id="behavior-changed-urls-property-of-webrequestfilter">Behavior Changed: <code>urls</code> property of <code>WebRequestFilter</code>.<a href="https://electronjs.org/blog/electron-35-0#behavior-changed-urls-property-of-webrequestfilter" class="hash-link" aria-label="Direct link to behavior-changed-urls-property-of-webrequestfilter" title="Direct link to behavior-changed-urls-property-of-webrequestfilter" translate="no">​</a></h3>
<p>Previously, an empty urls array was interpreted as including all URLs. To explicitly include all URLs, developers should now use the <code>&lt;all_urls&gt;</code> pattern, which is a <a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/Match_patterns#all_urls" target="_blank" rel="noopener noreferrer" class="">designated URL pattern</a> that matches every possible URL. This change clarifies the intent and ensures more predictable behavior.</p>
<div class="language-js codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_QJqH"><pre tabindex="0" class="prism-code language-js codeBlock_bY9V thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#393A34"><span class="token comment" style="color:#999988;font-style:italic">// Deprecated</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token keyword" style="color:#00009f">const</span><span class="token plain"> deprecatedFilter </span><span class="token operator" style="color:#393A34">=</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">  </span><span class="token literal-property property" style="color:#36acaa">urls</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">[</span><span class="token punctuation" style="color:#393A34">]</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token comment" style="color:#999988;font-style:italic">// Replace with</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token keyword" style="color:#00009f">const</span><span class="token plain"> newFilter </span><span class="token operator" style="color:#393A34">=</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">  </span><span class="token literal-property property" style="color:#36acaa">urls</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">[</span><span class="token string" style="color:#e3116c">'&lt;all_urls&gt;'</span><span class="token punctuation" style="color:#393A34">]</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">;</span><br></span></code></pre></div></div>
<h3 class="anchor anchorTargetStickyNavbar_Vzrq" id="deprecated-systempreferencesisaeroglassenabled">Deprecated: <code>systemPreferences.isAeroGlassEnabled()</code><a href="https://electronjs.org/blog/electron-35-0#deprecated-systempreferencesisaeroglassenabled" class="hash-link" aria-label="Direct link to deprecated-systempreferencesisaeroglassenabled" title="Direct link to deprecated-systempreferencesisaeroglassenabled" translate="no">​</a></h3>
<p>The <code>systemPreferences.isAeroGlassEnabled()</code> function has been deprecated without replacement.
It has been always returning <code>true</code> since Electron 23, which only supports Windows 10+, where DWM composition can no longer be disabled.</p>
<p><a href="https://learn.microsoft.com/en-us/windows/win32/dwm/composition-ovw#disabling-dwm-composition-windows7-and-earlier" target="_blank" rel="noopener noreferrer" class="">https://learn.microsoft.com/en-us/windows/win32/dwm/composition-ovw#disabling-dwm-composition-windows7-and-earlier</a></p>
<h2 class="anchor anchorTargetStickyNavbar_Vzrq" id="end-of-support-for-32xy">End of Support for 32.x.y<a href="https://electronjs.org/blog/electron-35-0#end-of-support-for-32xy" class="hash-link" aria-label="Direct link to End of Support for 32.x.y" title="Direct link to End of Support for 32.x.y" translate="no">​</a></h2>
<p>Electron 32.x.y has reached end-of-support as per the project's <a href="https://www.electronjs.org/docs/latest/tutorial/electron-timelines#version-support-policy" target="_blank" rel="noopener noreferrer" class="">support policy</a>. Developers and applications are encouraged to upgrade to a newer version of Electron.</p>
<table><thead><tr><th>E35 (Mar'25)</th><th>E36 (Apr'25)</th><th>E37 (Jun'25)</th></tr></thead><tbody><tr><td>35.x.y</td><td>36.x.y</td><td>37.x.y</td></tr><tr><td>34.x.y</td><td>35.x.y</td><td>36.x.y</td></tr><tr><td>33.x.y</td><td>34.x.y</td><td>35.x.y</td></tr></tbody></table>
<h2 class="anchor anchorTargetStickyNavbar_Vzrq" id="whats-next">What's Next<a href="https://electronjs.org/blog/electron-35-0#whats-next" class="hash-link" aria-label="Direct link to What's Next" title="Direct link to What's Next" translate="no">​</a></h2>
<p>In the short term, you can expect the team to continue to focus on keeping up with the development of the major components that make up Electron, including Chromium, Node, and V8.</p>
<p>You can find <a href="https://www.electronjs.org/docs/latest/tutorial/electron-timelines" target="_blank" rel="noopener noreferrer" class="">Electron's public timeline here</a>.</p>
<p>More information about future changes can be found on the <a href="https://github.com/electron/electron/blob/main/docs/breaking-changes.md" target="_blank" rel="noopener noreferrer" class="">Planned Breaking Changes</a> page.</p>]]></content>
        <author>
            <name>georgexu99</name>
            <uri>https://github.com/georgexu99</uri>
        </author>
        <author>
            <name>VerteDinde</name>
            <uri>https://github.com/VerteDinde</uri>
        </author>
        <category label="Release" term="Release"/>
    </entry>
    <entry>
        <title type="html"><![CDATA[Google Summer of Code 2025]]></title>
        <id>https://electronjs.org/blog/2025-summer-of-code</id>
        <link href="https://electronjs.org/blog/2025-summer-of-code"/>
        <updated>2025-03-03T00:00:00.000Z</updated>
        <summary type="html"><![CDATA[Electron has once again been accepted as a mentoring organization for Google Summer of Code (GSoC) 2025!]]></summary>
        <content type="html"><![CDATA[<p>Electron has once again been accepted as a mentoring organization for Google Summer of Code (GSoC) 2025!
Google Summer of Code is a global program focused on bringing new contributors into open source software development.</p>
<p>For more details about the program, visit Google’s <a href="https://summerofcode.withgoogle.com/" target="_blank" rel="noopener noreferrer" class="">Summer of Code homepage</a>.</p>
<h2 class="anchor anchorTargetStickyNavbar_Vzrq" id="about-us">About us<a href="https://electronjs.org/blog/2025-summer-of-code#about-us" class="hash-link" aria-label="Direct link to About us" title="Direct link to About us" translate="no">​</a></h2>
<p>Electron is a JavaScript framework for building cross-platform desktop applications using
web technologies. The core Electron framework is a compiled binary executable built with
<a href="https://chromium.org/" target="_blank" rel="noopener noreferrer" class="">Chromium</a> and <a href="https://nodejs.org/" target="_blank" rel="noopener noreferrer" class="">Node.js</a>, and is mostly written in C++.</p>
<p>Outside of the Electron core repository, we also maintain several projects to support the Electron ecosystem, including:</p>
<ul>
<li class="">Tools for end-user distribution (e.g. <a href="https://www.electronforge.io/" target="_blank" rel="noopener noreferrer" class="">Electron Forge</a>
and <a href="https://github.com/electron/update.electronjs.org" target="_blank" rel="noopener noreferrer" class="">update.electronjs.org</a>).</li>
<li class="">Learning materials for Electron developers (e.g. <a href="https://electronjs.org/" target="_blank" rel="noopener noreferrer" class="">electronjs.org</a>
and <a href="https://github.com/electron/fiddle" target="_blank" rel="noopener noreferrer" class="">Electron Fiddle</a>).</li>
<li class="">Internal tools to enhance developer productivity (e.g. <a href="https://github.com/electron/build-tools" target="_blank" rel="noopener noreferrer" class="">Electron Build Tools</a>
and <a href="https://github.com/electron/sheriff" target="_blank" rel="noopener noreferrer" class="">Sheriff</a>).</li>
</ul>
<p>As a GSoC contributor, you will have the opportunity to collaborate with some of Electron’s core contributors
on one of many projects under the <a href="https://github.com/electron" target="_blank" rel="noopener noreferrer" class="">github.com/electron</a> umbrella.</p>
<h2 class="anchor anchorTargetStickyNavbar_Vzrq" id="before-applying">Before applying<a href="https://electronjs.org/blog/2025-summer-of-code#before-applying" class="hash-link" aria-label="Direct link to Before applying" title="Direct link to Before applying" translate="no">​</a></h2>
<p>If you aren’t very familiar with Electron, we would recommend you start by reading the
<a href="https://electronjs.org/docs/latest" target="_blank" rel="noopener noreferrer" class="">documentation</a> and trying out some of the examples in <a href="https://electronjs.org/fiddle" target="_blank" rel="noopener noreferrer" class="">Electron Fiddle</a>.</p>
<p>To learn more about distributing Electron apps, try creating a sample application with <a href="https://www.electronforge.io/" target="_blank" rel="noopener noreferrer" class="">Electron Forge</a>:</p>
<div class="language-bash codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_QJqH"><pre tabindex="0" class="prism-code language-bash codeBlock_bY9V thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#393A34"><span class="token plain">npm init electron-app@latest my-app</span><br></span></code></pre></div></div>
<p>After familiarizing yourself with the code a bit, come join the conversation on the
<a href="https://discord.gg/electronjs" target="_blank" rel="noopener noreferrer" class="">Electron Discord server</a>.</p>
<div class="theme-admonition theme-admonition-info admonition_xJq3 alert alert--info"><div class="admonitionHeading_Gvgb"><span class="admonitionIcon_Rf37"><svg viewBox="0 0 14 16"><path fill-rule="evenodd" d="M7 2.3c3.14 0 5.7 2.56 5.7 5.7s-2.56 5.7-5.7 5.7A5.71 5.71 0 0 1 1.3 8c0-3.14 2.56-5.7 5.7-5.7zM7 1C3.14 1 0 4.14 0 8s3.14 7 7 7 7-3.14 7-7-3.14-7-7-7zm1 3H6v5h2V4zm0 6H6v2h2v-2z"></path></svg></span>info</div><div class="admonitionContent_BuS1"><p>If this is your first time participating in Google Summer of Code or if you’re new to open source in general,
we recommend reading Google’s <a href="https://google.github.io/gsocguides/student/" target="_blank" rel="noopener noreferrer" class="">Contributor Guide</a> before engaging with the community.</p></div></div>
<h2 class="anchor anchorTargetStickyNavbar_Vzrq" id="project-contributions">Project contributions<a href="https://electronjs.org/blog/2025-summer-of-code#project-contributions" class="hash-link" aria-label="Direct link to Project contributions" title="Direct link to Project contributions" translate="no">​</a></h2>
<p>We encourage you to take a look at any repositories that are relevant to the project ideas you are
interested in. One way of doing your research is to make contributions by reporting bugs, triaging
existing issues, or submitting pull requests. Doing so is an effective way of getting hands-on
practice with our codebases, but is not mandatory for proposal submissions. A well-crafted proposal
should be able to demonstrate your understanding of the code without needing to refer to past
contributions.</p>
<p>Here are a few tips if you are looking to contribute to Electron before submitting your
proposal:</p>
<ol>
<li class="">Please provide descriptive issue or PR descriptions when submitting contributions. Regardless of
the code itself, putting effort into the written part of a contribution shows us that you can be an
effective communicator in a collaborative environment.</li>
<li class="">PRs are always welcome for open issues. You do not need to comment on an issue asking a maintainer
if you can be assigned to it. Note that we still encourage you to discuss potential solutions on an
issue if you need to refine an idea for a solution, but comments strictly asking if you can work
on something are redundant and add noise to the issue tracker.</li>
<li class="">Low-effort project contributions (e.g. invalid issue reports, trivial
wording changes in a repo README, or minor stylistic changes to front-end code) will
negatively impact your final proposal, as they take up limited maintainer time and do not provide
any net benefit to the Electron project.</li>
<li class="">While AI coding assistants can be an effective tool for debugging and understanding new concepts,
we highly discourage contributions that are copy/pasted directly from AI-generated output. These
often turn out to be of low quality, and it's often more effort for maintainers to clean up code
generated from an LLM than for us to just reject a PR altogether.</li>
</ol>
<h2 class="anchor anchorTargetStickyNavbar_Vzrq" id="crafting-your-proposal">Crafting your proposal<a href="https://electronjs.org/blog/2025-summer-of-code#crafting-your-proposal" class="hash-link" aria-label="Direct link to Crafting your proposal" title="Direct link to Crafting your proposal" translate="no">​</a></h2>
<p>Interested in collaborating with Electron? First, check out the
<a href="https://electronhq.notion.site/Electron-Google-Summer-of-Code-2025-Ideas-List-1851459d1bd1811894dad8b48a68596d" target="_blank" rel="noopener noreferrer" class="">seven project idea drafts</a>
we have prepared. All listed ideas are open for proposals.</p>
<p>If you have a unique idea not on the list, we are open to considering it, but ensure your proposal
is detailed and thoroughly outlined. When in doubt, we recommend sticking with our listed ideas.</p>
<p>Your application should include:</p>
<ul>
<li class="">A detailed proposal outlining what you plan to achieve over the summer.</li>
<li class="">Your background as a developer. If you have a resume, please include a copy.
Otherwise, tell us about your past technical experience.<!-- -->
<ul>
<li class="">Lack of experience in certain areas won’t disqualify you, but it will help our mentors work out
a plan to best support you and make sure your summer project is successful.</li>
</ul>
</li>
</ul>
<p><a href="https://electronhq.notion.site/Electron-Google-Summer-of-Code-2025-Contributor-Guidance-1851459d1bd181ac8004ecb9e031b368" target="_blank" rel="noopener noreferrer" class="">A detailed guide of what to submit as part of your Electron application is here</a>. <strong>Submit proposals directly to the Google Summer of Code portal</strong>. Proposals emailed to the Electron team will not be considered as final submissions.</p>
<p>For more guidance on your proposal, we recommend you follow
<a href="https://google.github.io/gsocguides/student/writing-a-proposal" target="_blank" rel="noopener noreferrer" class="">the official Google Summer of Code proposal writing advice here</a>.</p>
<p>Applications open on&nbsp;<strong>March 24th, 2025</strong>&nbsp;and close on&nbsp;<strong>April 8th, 2025</strong>.</p>
<div class="theme-admonition theme-admonition-info admonition_xJq3 alert alert--info"><div class="admonitionHeading_Gvgb"><span class="admonitionIcon_Rf37"><svg viewBox="0 0 14 16"><path fill-rule="evenodd" d="M7 2.3c3.14 0 5.7 2.56 5.7 5.7s-2.56 5.7-5.7 5.7A5.71 5.71 0 0 1 1.3 8c0-3.14 2.56-5.7 5.7-5.7zM7 1C3.14 1 0 4.14 0 8s3.14 7 7 7 7-3.14 7-7-3.14-7-7-7zm1 3H6v5h2V4zm0 6H6v2h2v-2z"></path></svg></span>Past project proposals</div><div class="admonitionContent_BuS1"><p>📚 For GSoC 2024, <a href="https://github.com/piotrpdev" target="_blank" rel="noopener noreferrer" class="">@piotrpdev</a>,
worked on adding API History to the Electron core documentation. To see what Piotr worked on during
his summer with Electron, read his report in the <a href="https://summerofcode.withgoogle.com/archive/2024/organizations/electron" target="_blank" rel="noopener noreferrer" class="">2024 GSoC program archives</a>.</p><p>🔐 For GSoC 2022, <a href="https://github.com/aryanshridhar" target="_blank" rel="noopener noreferrer" class="">@aryanshridhar</a> worked on enabling Context Isolation
in Electron Fiddle. If you want to see what Aryan worked on during his summer with Electron,
you can read his report in the <a href="https://summerofcode.withgoogle.com/archive/2022/organizations/electron" target="_blank" rel="noopener noreferrer" class="">2022 GSoC program archives</a>.</p></div></div>
<h2 class="anchor anchorTargetStickyNavbar_Vzrq" id="questions">Questions?<a href="https://electronjs.org/blog/2025-summer-of-code#questions" class="hash-link" aria-label="Direct link to Questions?" title="Direct link to Questions?" translate="no">​</a></h2>
<p>If you have questions we didn’t address in this blog post or inquiries about your proposal draft,
please send us an email at <a href="mailto:summer-of-code@electronjs.org" target="_blank" rel="noopener noreferrer" class="">summer-of-code@electronjs.org</a>
or check the <a href="https://developers.google.com/open-source/gsoc/faq" target="_blank" rel="noopener noreferrer" class="">GSoC FAQ</a>. Please read
<a href="https://electronhq.notion.site/Electron-Google-Summer-of-Code-2025-Contributor-Guidance-1851459d1bd181ac8004ecb9e031b368" target="_blank" rel="noopener noreferrer" class="">our contributor guidance</a> before emailing.</p>
<h2 class="anchor anchorTargetStickyNavbar_Vzrq" id="resources">Resources<a href="https://electronjs.org/blog/2025-summer-of-code#resources" class="hash-link" aria-label="Direct link to Resources" title="Direct link to Resources" translate="no">​</a></h2>
<ul>
<li class=""><a href="https://electronhq.notion.site/Electron-Google-Summer-of-Code-2025-Ideas-List-1851459d1bd1811894dad8b48a68596d" target="_blank" rel="noopener noreferrer" class="">Electron Google Summer of Code 2025 Ideas List</a></li>
<li class=""><a href="https://electronhq.notion.site/Electron-Google-Summer-of-Code-2025-Contributor-Guidance-1851459d1bd181ac8004ecb9e031b368" target="_blank" rel="noopener noreferrer" class="">Electron Google Summer of Code 2025 Contributor Guidance</a></li>
<li class=""><a href="https://google.github.io/gsocguides/student/" target="_blank" rel="noopener noreferrer" class="">Google Summer of Code Student/Contributor Guide</a></li>
</ul>]]></content>
        <author>
            <name>erickzhao</name>
            <uri>https://github.com/erickzhao</uri>
        </author>
        <author>
            <name>VerteDinde</name>
            <uri>https://github.com/VerteDinde</uri>
        </author>
        <author>
            <name>dsanders11</name>
            <uri>https://github.com/dsanders11</uri>
        </author>
        <category label="Community" term="Community"/>
    </entry>
    <entry>
        <title type="html"><![CDATA[Electron 34.0.0]]></title>
        <id>https://electronjs.org/blog/electron-34-0</id>
        <link href="https://electronjs.org/blog/electron-34-0"/>
        <updated>2025-01-14T00:00:00.000Z</updated>
        <summary type="html"><![CDATA[Electron 34.0.0 has been released! It includes upgrades to Chromium 132.0.6834.83, V8 13.2, and Node 20.18.1.]]></summary>
        <content type="html"><![CDATA[<p>Electron 34.0.0 has been released! It includes upgrades to Chromium 132.0.6834.83, V8 13.2, and Node 20.18.1.</p>
<hr>
<p>The Electron team is excited to announce the release of Electron 34.0.0! You can install it with npm via <code>npm install electron@latest</code> or download it from our <a href="https://releases.electronjs.org/release?channel=stable" target="_blank" rel="noopener noreferrer" class="">releases website</a>. Continue reading for details about this release.</p>
<p>If you have any feedback, please share it with us on <a href="https://bsky.app/profile/electronjs.org" target="_blank" rel="noopener noreferrer" class="">Bluesky</a> or <a href="https://social.lfx.dev/@electronjs" target="_blank" rel="noopener noreferrer" class="">Mastodon</a>, or join our community <a href="https://discord.com/invite/electronjs" target="_blank" rel="noopener noreferrer" class="">Discord</a>! Bugs and feature requests can be reported in Electron's <a href="https://github.com/electron/electron/issues" target="_blank" rel="noopener noreferrer" class="">issue tracker</a>.</p>
<h2 class="anchor anchorTargetStickyNavbar_Vzrq" id="notable-changes">Notable Changes<a href="https://electronjs.org/blog/electron-34-0#notable-changes" class="hash-link" aria-label="Direct link to Notable Changes" title="Direct link to Notable Changes" translate="no">​</a></h2>
<h3 class="anchor anchorTargetStickyNavbar_Vzrq" id="http-compression-shared-dictionary-management-apis">HTTP Compression Shared Dictionary Management APIs<a href="https://electronjs.org/blog/electron-34-0#http-compression-shared-dictionary-management-apis" class="hash-link" aria-label="Direct link to HTTP Compression Shared Dictionary Management APIs" title="Direct link to HTTP Compression Shared Dictionary Management APIs" translate="no">​</a></h3>
<p>HTTP compression allows data to be compressed by a web server before being received by the browser. Modern versions of Chromium support Brotli and Zstandard, which are newer compression algorithms that perform better for text files than older schemes such as gzip.</p>
<p>Custom shared dictionaries further improve the efficiency of Brotli and Zstandard compression. See the <a href="https://developer.chrome.com/blog/shared-dictionary-compression" target="_blank" rel="noopener noreferrer" class="">Chrome for Developers blog on shared dictionaries</a> for more information.</p>
<p><a href="https://github.com/felixrieseberg" target="_blank" rel="noopener noreferrer" class="">@felixrieseberg</a> added the following APIs in <a href="https://github.com/electron/electron/pull/44950" target="_blank" rel="noopener noreferrer" class="">#44950</a> to manage shared dictionaries at the Session level:</p>
<ul>
<li class=""><code>session.getSharedDictionaryUsageInfo()</code></li>
<li class=""><code>session.getSharedDictionaryInfo(options)</code></li>
<li class=""><code>session.clearSharedDictionaryCache()</code></li>
<li class=""><code>session.clearSharedDictionaryCacheForIsolationKey(options)</code></li>
</ul>
<h3 class="anchor anchorTargetStickyNavbar_Vzrq" id="unresponsive-renderer-javascript-call-stacks">Unresponsive Renderer JavaScript Call Stacks<a href="https://electronjs.org/blog/electron-34-0#unresponsive-renderer-javascript-call-stacks" class="hash-link" aria-label="Direct link to Unresponsive Renderer JavaScript Call Stacks" title="Direct link to Unresponsive Renderer JavaScript Call Stacks" translate="no">​</a></h3>
<p>Electron's <a href="https://www.electronjs.org/docs/latest/api/web-contents#event-unresponsive" target="_blank" rel="noopener noreferrer" class=""><code>unresponsive</code></a> event occurs whenever a renderer process hangs for an excessive period of time. The new <code>WebFrameMain.collectJavaScriptCallStack()</code> API added by <a href="https://github.com/samuelmaddock" target="_blank" rel="noopener noreferrer" class="">@samuelmaddock</a> in <a href="https://github.com/electron/electron/pull/44204" target="_blank" rel="noopener noreferrer" class="">#44204</a> allows you to collect the JavaScript call stack from the associated <code>WebFrameMain</code> object (<code>webContnets.mainFrame</code>).</p>
<p>This API can be useful to determine why the frame is unresponsive in cases where there's long-running JavaScript events causing the process to hang. For more information, see the <a href="https://wicg.github.io/crash-reporting/" target="_blank" rel="noopener noreferrer" class="">proposed web standard Crash Reporting API</a>.</p>
<div class="language-js codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockTitle_OeMC">Main Process</div><div class="codeBlockContent_QJqH"><pre tabindex="0" class="prism-code language-js codeBlock_bY9V thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#393A34"><span class="token keyword" style="color:#00009f">const</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"> app </span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"> </span><span class="token operator" style="color:#393A34">=</span><span class="token plain"> </span><span class="token function" style="color:#d73a49">require</span><span class="token punctuation" style="color:#393A34">(</span><span class="token string" style="color:#e3116c">'electron'</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">app</span><span class="token punctuation" style="color:#393A34">.</span><span class="token property-access">commandLine</span><span class="token punctuation" style="color:#393A34">.</span><span class="token method function property-access" style="color:#d73a49">appendSwitch</span><span class="token punctuation" style="color:#393A34">(</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">  </span><span class="token string" style="color:#e3116c">'enable-features'</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">  </span><span class="token string" style="color:#e3116c">'DocumentPolicyIncludeJSCallStacksInCrashReports'</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">app</span><span class="token punctuation" style="color:#393A34">.</span><span class="token method function property-access" style="color:#d73a49">on</span><span class="token punctuation" style="color:#393A34">(</span><span class="token string" style="color:#e3116c">'web-contents-created'</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">(</span><span class="token parameter">_</span><span class="token parameter punctuation" style="color:#393A34">,</span><span class="token parameter"> webContents</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"> </span><span class="token arrow operator" style="color:#393A34">=&gt;</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">  webContents</span><span class="token punctuation" style="color:#393A34">.</span><span class="token method function property-access" style="color:#d73a49">on</span><span class="token punctuation" style="color:#393A34">(</span><span class="token string" style="color:#e3116c">'unresponsive'</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">async</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"> </span><span class="token arrow operator" style="color:#393A34">=&gt;</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">    </span><span class="token comment" style="color:#999988;font-style:italic">// Interrupt execution and collect call stack from unresponsive renderer</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">    </span><span class="token keyword" style="color:#00009f">const</span><span class="token plain"> callStack </span><span class="token operator" style="color:#393A34">=</span><span class="token plain"> </span><span class="token keyword control-flow" style="color:#00009f">await</span><span class="token plain"> webContents</span><span class="token punctuation" style="color:#393A34">.</span><span class="token property-access">mainFrame</span><span class="token punctuation" style="color:#393A34">.</span><span class="token method function property-access" style="color:#d73a49">collectJavaScriptCallStack</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">    </span><span class="token console class-name">console</span><span class="token punctuation" style="color:#393A34">.</span><span class="token method function property-access" style="color:#d73a49">log</span><span class="token punctuation" style="color:#393A34">(</span><span class="token string" style="color:#e3116c">'Renderer unresponsive\n'</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> callStack</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">  </span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><br></span></code></pre></div></div>
<div class="theme-admonition theme-admonition-warning admonition_xJq3 alert alert--warning"><div class="admonitionHeading_Gvgb"><span class="admonitionIcon_Rf37"><svg viewBox="0 0 16 16"><path fill-rule="evenodd" d="M8.893 1.5c-.183-.31-.52-.5-.887-.5s-.703.19-.886.5L.138 13.499a.98.98 0 0 0 0 1.001c.193.31.53.501.886.501h13.964c.367 0 .704-.19.877-.5a1.03 1.03 0 0 0 .01-1.002L8.893 1.5zm.133 11.497H6.987v-2.003h2.039v2.003zm0-3.004H6.987V5.987h2.039v4.006z"></path></svg></span>warning</div><div class="admonitionContent_BuS1"><p>This API requires the <code>'Document-Policy': 'include-js-call-stacks-in-crash-reports'</code> header to be enabled. See <a href="https://github.com/electron/electron/issues/45356" target="_blank" rel="noopener noreferrer" class="">#45356</a> for more details.</p></div></div>
<h2 class="anchor anchorTargetStickyNavbar_Vzrq" id="stack-changes">Stack Changes<a href="https://electronjs.org/blog/electron-34-0#stack-changes" class="hash-link" aria-label="Direct link to Stack Changes" title="Direct link to Stack Changes" translate="no">​</a></h2>
<ul>
<li class="">Chromium <code>132.0.6834.83</code>
<ul>
<li class=""><a href="https://developer.chrome.com/blog/new-in-chrome-131/" target="_blank" rel="noopener noreferrer" class="">New in 131</a></li>
<li class=""><a href="https://developer.chrome.com/blog/new-in-chrome-132/" target="_blank" rel="noopener noreferrer" class="">New in 132</a></li>
</ul>
</li>
<li class="">Node <code>20.18.1</code>
<ul>
<li class=""><a href="https://nodejs.org/en/blog/release/v20.18.1/" target="_blank" rel="noopener noreferrer" class="">Node 20.18.1 blog post</a></li>
</ul>
</li>
<li class="">V8 <code>13.2</code></li>
</ul>
<p>Electron 34 upgrades Chromium from <code>130.0.6723.44</code> to <code>132.0.6834.83</code>, Node from <code>20.18.0</code> to <code>20.18.1</code>, and V8 from <code>13.0</code> to <code>13.2</code>.</p>
<h2 class="anchor anchorTargetStickyNavbar_Vzrq" id="new-features">New Features<a href="https://electronjs.org/blog/electron-34-0#new-features" class="hash-link" aria-label="Direct link to New Features" title="Direct link to New Features" translate="no">​</a></h2>
<ul>
<li class="">Added APIs to manage shared dictionaries for compression efficiency using Brotli or ZStandard. The new APIs are <code>session.getSharedDictionaryUsageInfo()</code>, <code>session.getSharedDictionaryInfo(options)</code>, <code>session.clearSharedDictionaryCache()</code>, and <code>session.clearSharedDictionaryCacheForIsolationKey(options)</code>. <a href="https://github.com/electron/electron/pull/44950" target="_blank" rel="noopener noreferrer" class="">#44950</a></li>
<li class="">Added <code>WebFrameMain.collectJavaScriptCallStack()</code> for accessing the JavaScript call stack of unresponsive renderers. <a href="https://github.com/electron/electron/pull/44938" target="_blank" rel="noopener noreferrer" class="">#44938</a></li>
<li class="">Added <code>WebFrameMain.detached</code> for frames in an unloading state.<!-- -->
<ul>
<li class="">Added <code>WebFrameMain.isDestroyed()</code> to determine if a frame has been destroyed.</li>
<li class="">Fixed <code>webFrameMain.fromId(processId, frameId)</code> returning a <code>WebFrameMain</code> instance which doesn't match the given parameters when the frame is unloading. <a href="https://github.com/electron/electron/pull/43473" target="_blank" rel="noopener noreferrer" class="">#43473</a></li>
</ul>
</li>
<li class="">Added error event in utility process to support diagnostic reports on V8 fatal errors. <a href="https://github.com/electron/electron/pull/43774" target="_blank" rel="noopener noreferrer" class="">#43774</a></li>
<li class="">Feat: GPU accelerated shared texture offscreen rendering. <a href="https://github.com/electron/electron/pull/42953" target="_blank" rel="noopener noreferrer" class="">#42953</a></li>
</ul>
<h2 class="anchor anchorTargetStickyNavbar_Vzrq" id="breaking-changes">Breaking Changes<a href="https://electronjs.org/blog/electron-34-0#breaking-changes" class="hash-link" aria-label="Direct link to Breaking Changes" title="Direct link to Breaking Changes" translate="no">​</a></h2>
<h3 class="anchor anchorTargetStickyNavbar_Vzrq" id="behavior-changed-menu-bar-will-be-hidden-during-fullscreen-on-windows">Behavior Changed: menu bar will be hidden during fullscreen on Windows<a href="https://electronjs.org/blog/electron-34-0#behavior-changed-menu-bar-will-be-hidden-during-fullscreen-on-windows" class="hash-link" aria-label="Direct link to Behavior Changed: menu bar will be hidden during fullscreen on Windows" title="Direct link to Behavior Changed: menu bar will be hidden during fullscreen on Windows" translate="no">​</a></h3>
<p>This brings the behavior to parity with Linux. Prior behavior: Menu bar is still visible during fullscreen on Windows. New behavior: Menu bar is hidden during fullscreen on Windows.</p>
<p><strong>Correction</strong>: This was previously listed as a breaking change in Electron 33, but was first released in Electron 34.</p>
<h2 class="anchor anchorTargetStickyNavbar_Vzrq" id="end-of-support-for-31xy">End of Support for 31.x.y<a href="https://electronjs.org/blog/electron-34-0#end-of-support-for-31xy" class="hash-link" aria-label="Direct link to End of Support for 31.x.y" title="Direct link to End of Support for 31.x.y" translate="no">​</a></h2>
<p>Electron 31.x.y has reached end-of-support as per the project's <a href="https://www.electronjs.org/docs/latest/tutorial/electron-timelines#version-support-policy" target="_blank" rel="noopener noreferrer" class="">support policy</a>. Developers and applications are encouraged to upgrade to a newer version of Electron.</p>
<table><thead><tr><th>E34 (Jan'25)</th><th>E35 (Apr'25)</th><th>E36 (Jun'25)</th></tr></thead><tbody><tr><td>34.x.y</td><td>35.x.y</td><td>36.x.y</td></tr><tr><td>33.x.y</td><td>34.x.y</td><td>35.x.y</td></tr><tr><td>32.x.y</td><td>33.x.y</td><td>34.x.y</td></tr></tbody></table>
<h2 class="anchor anchorTargetStickyNavbar_Vzrq" id="whats-next">What's Next<a href="https://electronjs.org/blog/electron-34-0#whats-next" class="hash-link" aria-label="Direct link to What's Next" title="Direct link to What's Next" translate="no">​</a></h2>
<p>In the short term, you can expect the team to continue to focus on keeping up with the development of the major components that make up Electron, including Chromium, Node, and V8.</p>
<p>You can find <a href="https://www.electronjs.org/docs/latest/tutorial/electron-timelines" target="_blank" rel="noopener noreferrer" class="">Electron's public timeline here</a>.</p>
<p>More information about future changes can be found on the <a href="https://github.com/electron/electron/blob/main/docs/breaking-changes.md" target="_blank" rel="noopener noreferrer" class="">Planned Breaking Changes</a> page.</p>]]></content>
        <author>
            <name>VerteDinde</name>
            <uri>https://github.com/VerteDinde</uri>
        </author>
        <category label="Release" term="Release"/>
    </entry>
    <entry>
        <title type="html"><![CDATA[Moving our Ecosystem to Node 22]]></title>
        <id>https://electronjs.org/blog/ecosystem-node-22</id>
        <link href="https://electronjs.org/blog/ecosystem-node-22"/>
        <updated>2025-01-07T00:00:00.000Z</updated>
        <summary type="html"><![CDATA[In early 2025, Electron’s npm ecosystem repos (under the @electron/ and @electron-forge/ namespaces) will move to Node.js 22 as the minimum supported version.]]></summary>
        <content type="html"><![CDATA[<p>In early 2025, Electron’s npm ecosystem repos (under the <code>@electron/</code> and <code>@electron-forge/</code> namespaces) will move to Node.js 22 as the minimum supported version.</p>
<hr>
<h3 class="anchor anchorTargetStickyNavbar_Vzrq" id="what-does-this-mean">What does this mean?<a href="https://electronjs.org/blog/ecosystem-node-22#what-does-this-mean" class="hash-link" aria-label="Direct link to What does this mean?" title="Direct link to What does this mean?" translate="no">​</a></h3>
<p>In the past, packages in Electron’s npm ecosystem (Forge, Packager, etc) have supported Node versions for as long as possible, even after a version has reached its End-Of-Life (EOL) date. This is done to make sure we don’t fragment the ecosystem—we understand that many projects depend on older versions of Node, and we don’t want to risk stranding those projects unless there was a pressing reason to upgrade.</p>
<p>Over time, using Node.js 14 as our minimum version has become increasingly difficult for a few reasons:</p>
<ul>
<li class="">Lack of official Node.js 14 macOS ARM64 builds requires us to maintain CI infrastructure workarounds to provide full test coverage.</li>
<li class=""><code>engines</code> requirements for upstream package dependencies have moved forward, making it increasingly difficult to resolve supply chain security issues with dependency bumps.</li>
</ul>
<p>Additionally, newer versions of Node.js have included many improvements that we would like to leverage, such as runtime-native common utilities (e.g. <a href="https://nodejs.org/api/fs.html#fsglobpattern-options-callback" target="_blank" rel="noopener noreferrer" class=""><code>fs.glob</code></a> and <a href="https://nodejs.org/api/util.html#utilparseargsconfig" target="_blank" rel="noopener noreferrer" class=""><code>util.parseArgs</code></a>) and entire new batteries-included modules (e.g. <a href="https://nodejs.org/api/test.html" target="_blank" rel="noopener noreferrer" class=""><code>node:test</code></a>, <a href="https://nodejs.org/api/sqlite.html" target="_blank" rel="noopener noreferrer" class=""><code>node:sqlite</code></a>).</p>
<h3 class="anchor anchorTargetStickyNavbar_Vzrq" id="why-upgrade-now">Why upgrade now?<a href="https://electronjs.org/blog/ecosystem-node-22#why-upgrade-now" class="hash-link" aria-label="Direct link to Why upgrade now?" title="Direct link to Why upgrade now?" translate="no">​</a></h3>
<p>In July 2024, Electron’s Ecosystem Working Group decided to upgrade all packages to the earliest Node version where <code>require()</code>of synchronous ESM graphs will be supported (see <a href="https://github.com/nodejs/node/pull/51977" target="_blank" rel="noopener noreferrer" class="">nodejs/node#51977</a> and <a href="https://github.com/nodejs/node/pull/53500" target="_blank" rel="noopener noreferrer" class="">nodejs/node#53500</a>) at a future point after that version reaches its LTS date.</p>
<p>We’ve decided to set that update time to January/February 2025. After this upgrade occurs, Node 22 will be the minimum supported version in existing ecosystem packages.</p>
<h3 class="anchor anchorTargetStickyNavbar_Vzrq" id="what-action-do-i-need-to-take">What action do I need to take?<a href="https://electronjs.org/blog/ecosystem-node-22#what-action-do-i-need-to-take" class="hash-link" aria-label="Direct link to What action do I need to take?" title="Direct link to What action do I need to take?" translate="no">​</a></h3>
<p>We’ll strive to maintain compatibility as much as possible. However, to ensure the best support, we encourage you to upgrade your apps to Node 22 or higher.</p>
<p>Note that the Node version running in your project is unrelated to the Node version embedded into your current version of Electron.</p>
<h3 class="anchor anchorTargetStickyNavbar_Vzrq" id="whats-next">What's next<a href="https://electronjs.org/blog/ecosystem-node-22#whats-next" class="hash-link" aria-label="Direct link to What's next" title="Direct link to What's next" translate="no">​</a></h3>
<p>Please feel free to write to us at&nbsp;<a href="mailto:info@electronjs.org" target="_blank" rel="noopener noreferrer" class="">info@electronjs.org</a>&nbsp;if you have any questions or concerns. You can also find community support in our official&nbsp;<a href="https://discord.gg/electronjs" target="_blank" rel="noopener noreferrer" class="">Electron Discord</a>.</p>]]></content>
        <author>
            <name>VerteDinde</name>
            <uri>https://github.com/VerteDinde</uri>
        </author>
        <category label="Community" term="Community"/>
        <category label="Ecosystem" term="Ecosystem"/>
    </entry>
    <entry>
        <title type="html"><![CDATA[December Quiet Month (Dec'24)]]></title>
        <id>https://electronjs.org/blog/dec-quiet-period-24</id>
        <link href="https://electronjs.org/blog/dec-quiet-period-24"/>
        <updated>2024-11-22T00:00:00.000Z</updated>
        <summary type="html"><![CDATA[The Electron project will pause for the month of December 2024, then return to full speed in January 2025.]]></summary>
        <content type="html"><![CDATA[<p>The Electron project will pause for the month of December 2024, then return to full speed in January 2025.</p>
<div style="width:100%;height:0;padding-bottom:54%;position:relative"><iframe src="https://giphy.com/embed/3otPoSDQczp1s9kVAQ" width="100%" height="100%" style="position:absolute" frameborder="0" class="giphy-embed" allowfullscreen=""></iframe></div>
<p><a href="https://giphy.com/gifs/filmeditor-disney-pixar-3otPoSDQczp1s9kVAQ">via GIPHY</a></p>
<hr>
<h2 class="anchor anchorTargetStickyNavbar_Vzrq" id="what-will-be-the-same-in-december">What will be the same in December<a href="https://electronjs.org/blog/dec-quiet-period-24#what-will-be-the-same-in-december" class="hash-link" aria-label="Direct link to What will be the same in December" title="Direct link to What will be the same in December" translate="no">​</a></h2>
<ol>
<li class="">Zero-day and other major security-related releases will be published as necessary. Security
incidents should be reported via <a href="https://github.com/electron/electron/tree/main/SECURITY.md" target="_blank" rel="noopener noreferrer" class="">SECURITY.md</a>.</li>
<li class=""><a href="https://github.com/electron/electron/blob/main/CODE_OF_CONDUCT.md" target="_blank" rel="noopener noreferrer" class="">Code of Conduct</a> reports
and moderation will continue.</li>
</ol>
<h2 class="anchor anchorTargetStickyNavbar_Vzrq" id="what-will-be-different-in-december">What will be different in December<a href="https://electronjs.org/blog/dec-quiet-period-24#what-will-be-different-in-december" class="hash-link" aria-label="Direct link to What will be different in December" title="Direct link to What will be different in December" translate="no">​</a></h2>
<ol>
<li class="">2024's last stable branch releases for the year, which include Electron 31, 32, and 33, will occur the week of December 1st. There will be no additional planned releases in December.</li>
<li class="">No Nightly and Alpha releases for the last two weeks of December.</li>
<li class="">With few exceptions, no pull request reviews or merges.</li>
<li class="">No issue tracker updates on any repositories.</li>
<li class="">No Discord debugging help from maintainers.</li>
<li class="">No social media content updates.</li>
</ol>
<p>See you all in 2025!</p>]]></content>
        <author>
            <name>mlaurencin</name>
            <uri>https://github.com/mlaurencin</uri>
        </author>
        <category label="Project News" term="Project News"/>
    </entry>
    <entry>
        <title type="html"><![CDATA[Migrating from BrowserView to WebContentsView]]></title>
        <id>https://electronjs.org/blog/migrate-to-webcontentsview</id>
        <link href="https://electronjs.org/blog/migrate-to-webcontentsview"/>
        <updated>2024-11-11T00:00:00.000Z</updated>
        <summary type="html"><![CDATA[BrowserView has been deprecated since Electron 30 and is replaced by WebContentView. Thankfully, migrating is fairly painless.]]></summary>
        <content type="html"><![CDATA[<p><code>BrowserView</code> has been deprecated since <a href="http://www.electronjs.org/blog/electron-30-0" target="_blank" rel="noopener noreferrer" class="">Electron 30</a> and is replaced by <code>WebContentView</code>. Thankfully, migrating is fairly painless.</p>
<hr>
<p>Electron is moving from <a href="https://www.electronjs.org/docs/latest/api/browser-view" target="_blank" rel="noopener noreferrer" class=""><code>BrowserView</code></a> to <a href="https://www.electronjs.org/docs/latest/api/web-contents-view" target="_blank" rel="noopener noreferrer" class=""><code>WebContentsView</code></a> to align with Chromium’s UI framework, the <a href="https://www.chromium.org/chromium-os/developer-library/guides/views/intro/" target="_blank" rel="noopener noreferrer" class="">Views API</a>. <code>WebContentsView</code> offers a reusable view directly tied to Chromium’s rendering pipeline, simplifying future upgrades and opening up the possibility for developers to integrate non-web UI elements to their Electron apps. By adopting <code>WebContentsView</code>, applications are not only prepared for upcoming updates but also benefit from reduced code complexity and fewer potential bugs in the long run.</p>
<p>Developers familiar with BrowserWindows and BrowserViews should note that <code>BrowserWindow</code> and <code>WebContentsView</code> are subclasses inheriting from the <a href="https://www.electronjs.org/docs/latest/api/base-window" target="_blank" rel="noopener noreferrer" class=""><code>BaseWindow</code></a> and <a href="https://www.electronjs.org/docs/latest/api/view" target="_blank" rel="noopener noreferrer" class=""><code>View</code></a> base classes, respectively. To fully understand the available instance variables and methods, be sure to consult the documentation for these base classes.</p>
<h2 class="anchor anchorTargetStickyNavbar_Vzrq" id="migration-steps">Migration steps<a href="https://electronjs.org/blog/migrate-to-webcontentsview#migration-steps" class="hash-link" aria-label="Direct link to Migration steps" title="Direct link to Migration steps" translate="no">​</a></h2>
<h3 class="anchor anchorTargetStickyNavbar_Vzrq" id="1-upgrade-electron-to-3000-or-higher">1. Upgrade Electron to 30.0.0 or higher<a href="https://electronjs.org/blog/migrate-to-webcontentsview#1-upgrade-electron-to-3000-or-higher" class="hash-link" aria-label="Direct link to 1. Upgrade Electron to 30.0.0 or higher" title="Direct link to 1. Upgrade Electron to 30.0.0 or higher" translate="no">​</a></h3>
<div class="theme-admonition theme-admonition-warning admonition_xJq3 alert alert--warning"><div class="admonitionHeading_Gvgb"><span class="admonitionIcon_Rf37"><svg viewBox="0 0 16 16"><path fill-rule="evenodd" d="M8.893 1.5c-.183-.31-.52-.5-.887-.5s-.703.19-.886.5L.138 13.499a.98.98 0 0 0 0 1.001c.193.31.53.501.886.501h13.964c.367 0 .704-.19.877-.5a1.03 1.03 0 0 0 .01-1.002L8.893 1.5zm.133 11.497H6.987v-2.003h2.039v2.003zm0-3.004H6.987V5.987h2.039v4.006z"></path></svg></span>warning</div><div class="admonitionContent_BuS1"><p>Electron releases may contain breaking changes that affect your application. It’s a good idea to test and land the Electron upgrade on your app <em>first</em> before proceeding with the rest of this migration. A list of breaking changes for each Electron major version can be found <a href="https://www.electronjs.org/docs/latest/breaking-changes" target="_blank" rel="noopener noreferrer" class="">here</a> as well as in the release notes for each major version on the Electron Blog.</p></div></div>
<h3 class="anchor anchorTargetStickyNavbar_Vzrq" id="2-familiarize-yourself-with-where-your-application-uses-browserviews">2. Familiarize yourself with where your application uses BrowserViews<a href="https://electronjs.org/blog/migrate-to-webcontentsview#2-familiarize-yourself-with-where-your-application-uses-browserviews" class="hash-link" aria-label="Direct link to 2. Familiarize yourself with where your application uses BrowserViews" title="Direct link to 2. Familiarize yourself with where your application uses BrowserViews" translate="no">​</a></h3>
<p>One way to do this is to search your codebase for <code>new BrowserView(</code>. This should give you a sense for how your application is using BrowserViews and how many call sites need to be migrated.</p>
<div class="theme-admonition theme-admonition-tip admonition_xJq3 alert alert--success"><div class="admonitionHeading_Gvgb"><span class="admonitionIcon_Rf37"><svg viewBox="0 0 12 16"><path fill-rule="evenodd" d="M6.5 0C3.48 0 1 2.19 1 5c0 .92.55 2.25 1 3 1.34 2.25 1.78 2.78 2 4v1h5v-1c.22-1.22.66-1.75 2-4 .45-.75 1-2.08 1-3 0-2.81-2.48-5-5.5-5zm3.64 7.48c-.25.44-.47.8-.67 1.11-.86 1.41-1.25 2.06-1.45 3.23-.02.05-.02.11-.02.17H5c0-.06 0-.13-.02-.17-.2-1.17-.59-1.83-1.45-3.23-.2-.31-.42-.67-.67-1.11C2.44 6.78 2 5.65 2 5c0-2.2 2.02-4 4.5-4 1.22 0 2.36.42 3.22 1.19C10.55 2.94 11 3.94 11 5c0 .66-.44 1.78-.86 2.48zM4 14h5c-.23 1.14-1.3 2-2.5 2s-2.27-.86-2.5-2z"></path></svg></span>tip</div><div class="admonitionContent_BuS1"><p>For the most part, each instance where your app instantiates new BrowserViews can be migrated in isolation from the others.</p></div></div>
<h3 class="anchor anchorTargetStickyNavbar_Vzrq" id="3-migrate-each-usage-of-browserview">3. Migrate each usage of <code>BrowserView</code><a href="https://electronjs.org/blog/migrate-to-webcontentsview#3-migrate-each-usage-of-browserview" class="hash-link" aria-label="Direct link to 3-migrate-each-usage-of-browserview" title="Direct link to 3-migrate-each-usage-of-browserview" translate="no">​</a></h3>
<ol>
<li class="">
<p>Migrate the instantiation. This should be fairly straightforward because <a href="https://www.electronjs.org/docs/latest/api/web-contents-view#new-webcontentsviewoptions" target="_blank" rel="noopener noreferrer" class="">WebContentsView</a> and <a href="https://www.electronjs.org/docs/latest/api/browser-view#new-browserviewoptions-experimental-deprecated" target="_blank" rel="noopener noreferrer" class="">BrowserView’s</a> constructors have essentially the same shape. Both accept <a href="https://www.electronjs.org/docs/latest/api/structures/web-preferences" target="_blank" rel="noopener noreferrer" class="">WebPreferences</a>&nbsp;via the <code>webPreferences</code> param.</p>
<div class="language-diff codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_QJqH"><pre tabindex="0" class="prism-code language-diff codeBlock_bY9V thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#393A34"><span class="token deleted-sign deleted prefix deleted" style="color:#d73a49">-</span><span class="token deleted-sign deleted line" style="color:#d73a49"> this.tabBar = new BrowserView({</span><br></span><span class="token-line" style="color:#393A34"><span class="token deleted-sign deleted line" style="color:#d73a49"></span><span class="token inserted-sign inserted prefix inserted" style="color:#36acaa">+</span><span class="token inserted-sign inserted line" style="color:#36acaa"> this.tabBar = new WebContentsView({</span><br></span></code></pre></div></div>
<div class="theme-admonition theme-admonition-info admonition_xJq3 alert alert--info"><div class="admonitionHeading_Gvgb"><span class="admonitionIcon_Rf37"><svg viewBox="0 0 14 16"><path fill-rule="evenodd" d="M7 2.3c3.14 0 5.7 2.56 5.7 5.7s-2.56 5.7-5.7 5.7A5.71 5.71 0 0 1 1.3 8c0-3.14 2.56-5.7 5.7-5.7zM7 1C3.14 1 0 4.14 0 8s3.14 7 7 7 7-3.14 7-7-3.14-7-7-7zm1 3H6v5h2V4zm0 6H6v2h2v-2z"></path></svg></span>info</div><div class="admonitionContent_BuS1"><p>By default, <code>WebContentsView</code> instantiates with a white background, while <code>BrowserView</code> instantiates with a transparent background.
To get a transparent background in <code>WebContentsView</code>, set its background color to an RGBA hex value with an alpha (opaqueness) channel set to <code>00</code>:</p><div class="language-diff codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_QJqH"><pre tabindex="0" class="prism-code language-diff codeBlock_bY9V thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#393A34"><span class="token inserted-sign inserted prefix inserted" style="color:#36acaa">+</span><span class="token inserted-sign inserted line" style="color:#36acaa"> this.webContentsView.setBackgroundColor("#00000000");</span><br></span></code></pre></div></div></div></div>
</li>
<li class="">
<p>Migrate where the <code>BrowserView</code> gets added to its parent window.</p>
<div class="language-diff codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_QJqH"><pre tabindex="0" class="prism-code language-diff codeBlock_bY9V thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#393A34"><span class="token deleted-sign deleted prefix deleted" style="color:#d73a49">-</span><span class="token deleted-sign deleted line" style="color:#d73a49"> this.browserWindow.addBrowserView(this.tabBar)</span><br></span><span class="token-line" style="color:#393A34"><span class="token deleted-sign deleted line" style="color:#d73a49"></span><span class="token inserted-sign inserted prefix inserted" style="color:#36acaa">+</span><span class="token inserted-sign inserted line" style="color:#36acaa"> this.browserWindow.contentView.addChildView(this.tabBar);</span><br></span></code></pre></div></div>
</li>
<li class="">
<p>Migrate <code>BrowserView</code> instance method calls on the parent window.</p>
<table><thead><tr><th>Old Method</th><th>New Method</th><th>Notes</th></tr></thead><tbody><tr><td><code>win.setBrowserView</code></td><td><code>win.contentView.removeChildView</code> + <code>win.contentView.addChildView</code></td><td></td></tr><tr><td><code>win.getBrowserView</code></td><td><code>win.contentView.children</code></td><td></td></tr><tr><td><code>win.removeBrowserView</code></td><td><code>win.contentView.removeChildView</code></td><td></td></tr><tr><td><code>win.setTopBrowserView</code></td><td><code>win.contentView.addChildView</code></td><td>Calling <code>addChildView</code> on an existing view reorders it to the top.</td></tr><tr><td><code>win.getBrowserViews</code></td><td><code>win.contentView.children</code></td><td></td></tr></tbody></table>
</li>
<li class="">
<p>Migrate the <code>setAutoResize</code> instance method to a resize listener.</p>
<div class="language-diff codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_QJqH"><pre tabindex="0" class="prism-code language-diff codeBlock_bY9V thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#393A34"><span class="token deleted-sign deleted prefix deleted" style="color:#d73a49">-</span><span class="token deleted-sign deleted line" style="color:#d73a49"> this.browserView.setAutoResize({</span><br></span><span class="token-line" style="color:#393A34"><span class="token deleted-sign deleted line" style="color:#d73a49"></span><span class="token deleted-sign deleted prefix deleted" style="color:#d73a49">-</span><span class="token deleted-sign deleted line" style="color:#d73a49">   vertical: true,</span><br></span><span class="token-line" style="color:#393A34"><span class="token deleted-sign deleted line" style="color:#d73a49"></span><span class="token deleted-sign deleted prefix deleted" style="color:#d73a49">-</span><span class="token deleted-sign deleted line" style="color:#d73a49"> })</span><br></span><span class="token-line" style="color:#393A34"><span class="token deleted-sign deleted line" style="color:#d73a49"></span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token inserted-sign inserted prefix inserted" style="color:#36acaa">+</span><span class="token inserted-sign inserted line" style="color:#36acaa"> this.browserWindow.on('resize', () =&gt; {</span><br></span><span class="token-line" style="color:#393A34"><span class="token inserted-sign inserted line" style="color:#36acaa"></span><span class="token inserted-sign inserted prefix inserted" style="color:#36acaa">+</span><span class="token inserted-sign inserted line" style="color:#36acaa">   if (!this.browserWindow || !this.webContentsView) {</span><br></span><span class="token-line" style="color:#393A34"><span class="token inserted-sign inserted line" style="color:#36acaa"></span><span class="token inserted-sign inserted prefix inserted" style="color:#36acaa">+</span><span class="token inserted-sign inserted line" style="color:#36acaa">     return;</span><br></span><span class="token-line" style="color:#393A34"><span class="token inserted-sign inserted line" style="color:#36acaa"></span><span class="token inserted-sign inserted prefix inserted" style="color:#36acaa">+</span><span class="token inserted-sign inserted line" style="color:#36acaa">   }</span><br></span><span class="token-line" style="color:#393A34"><span class="token inserted-sign inserted line" style="color:#36acaa"></span><span class="token inserted-sign inserted prefix inserted" style="color:#36acaa">+</span><span class="token inserted-sign inserted line" style="color:#36acaa">   const bounds = this.browserWindow.getBounds();</span><br></span><span class="token-line" style="color:#393A34"><span class="token inserted-sign inserted line" style="color:#36acaa"></span><span class="token inserted-sign inserted prefix inserted" style="color:#36acaa">+</span><span class="token inserted-sign inserted line" style="color:#36acaa">   this.webContentsView.setBounds({</span><br></span><span class="token-line" style="color:#393A34"><span class="token inserted-sign inserted line" style="color:#36acaa"></span><span class="token inserted-sign inserted prefix inserted" style="color:#36acaa">+</span><span class="token inserted-sign inserted line" style="color:#36acaa">     x: 0,</span><br></span><span class="token-line" style="color:#393A34"><span class="token inserted-sign inserted line" style="color:#36acaa"></span><span class="token inserted-sign inserted prefix inserted" style="color:#36acaa">+</span><span class="token inserted-sign inserted line" style="color:#36acaa">     y: 0,</span><br></span><span class="token-line" style="color:#393A34"><span class="token inserted-sign inserted line" style="color:#36acaa"></span><span class="token inserted-sign inserted prefix inserted" style="color:#36acaa">+</span><span class="token inserted-sign inserted line" style="color:#36acaa">     width: bounds.width,</span><br></span><span class="token-line" style="color:#393A34"><span class="token inserted-sign inserted line" style="color:#36acaa"></span><span class="token inserted-sign inserted prefix inserted" style="color:#36acaa">+</span><span class="token inserted-sign inserted line" style="color:#36acaa">     height: bounds.height,</span><br></span><span class="token-line" style="color:#393A34"><span class="token inserted-sign inserted line" style="color:#36acaa"></span><span class="token inserted-sign inserted prefix inserted" style="color:#36acaa">+</span><span class="token inserted-sign inserted line" style="color:#36acaa">    });</span><br></span><span class="token-line" style="color:#393A34"><span class="token inserted-sign inserted line" style="color:#36acaa"></span><span class="token inserted-sign inserted prefix inserted" style="color:#36acaa">+</span><span class="token inserted-sign inserted line" style="color:#36acaa">  });</span><br></span></code></pre></div></div>
<div class="theme-admonition theme-admonition-tip admonition_xJq3 alert alert--success"><div class="admonitionHeading_Gvgb"><span class="admonitionIcon_Rf37"><svg viewBox="0 0 12 16"><path fill-rule="evenodd" d="M6.5 0C3.48 0 1 2.19 1 5c0 .92.55 2.25 1 3 1.34 2.25 1.78 2.78 2 4v1h5v-1c.22-1.22.66-1.75 2-4 .45-.75 1-2.08 1-3 0-2.81-2.48-5-5.5-5zm3.64 7.48c-.25.44-.47.8-.67 1.11-.86 1.41-1.25 2.06-1.45 3.23-.02.05-.02.11-.02.17H5c0-.06 0-.13-.02-.17-.2-1.17-.59-1.83-1.45-3.23-.2-.31-.42-.67-.67-1.11C2.44 6.78 2 5.65 2 5c0-2.2 2.02-4 4.5-4 1.22 0 2.36.42 3.22 1.19C10.55 2.94 11 3.94 11 5c0 .66-.44 1.78-.86 2.48zM4 14h5c-.23 1.14-1.3 2-2.5 2s-2.27-.86-2.5-2z"></path></svg></span>tip</div><div class="admonitionContent_BuS1"><p>All existing usage of <code>browserView.webContents</code> and instance methods <code>browserView.setBounds</code>, <code>browserView.getBounds</code> , and <code>browserView.setBackgroundColor</code> do not need to be migrated and should work with a <code>WebContentsView</code> instance out of the box!</p></div></div>
</li>
</ol>
<h3 class="anchor anchorTargetStickyNavbar_Vzrq" id="4-test-and-commit-your-changes">4. Test and commit your changes<a href="https://electronjs.org/blog/migrate-to-webcontentsview#4-test-and-commit-your-changes" class="hash-link" aria-label="Direct link to 4. Test and commit your changes" title="Direct link to 4. Test and commit your changes" translate="no">​</a></h3>
<p>Running into issues? Check the <a href="https://github.com/electron/electron/labels/component%2FWebContentsView" target="_blank" rel="noopener noreferrer" class="">WebContentsView</a> tag on Electron's issue tracker to see if the issue you're encountering has been reported. If you don't see your issue there, feel free to add a new bug report. Including testcase gists will help us better triage your issue!</p>
<p>Congrats, you’ve migrated onto WebContentsViews! 🎉</p>]]></content>
        <author>
            <name>yangannyx</name>
            <uri>https://github.com/yangannyx</uri>
        </author>
        <category label="Community" term="Community"/>
    </entry>
    <entry>
        <title type="html"><![CDATA[Electron 33.0.0]]></title>
        <id>https://electronjs.org/blog/electron-33-0</id>
        <link href="https://electronjs.org/blog/electron-33-0"/>
        <updated>2024-10-14T00:00:00.000Z</updated>
        <summary type="html"><![CDATA[Electron 33.0.0 has been released! It includes upgrades to Chromium 130.0.6723.44, V8 13.0, and Node 20.18.0.]]></summary>
        <content type="html"><![CDATA[<p>Electron 33.0.0 has been released! It includes upgrades to Chromium 130.0.6723.44, V8 13.0, and Node 20.18.0.</p>
<hr>
<p>The Electron team is excited to announce the release of Electron 33.0.0! You can install it with npm via <code>npm install electron@latest</code> or download it from our <a href="https://releases.electronjs.org/release?channel=stable" target="_blank" rel="noopener noreferrer" class="">releases website</a>. Continue reading for details about this release.</p>
<p>If you have any feedback, please share it with us on <a href="https://twitter.com/electronjs" target="_blank" rel="noopener noreferrer" class="">Twitter</a> or <a href="https://social.lfx.dev/@electronjs" target="_blank" rel="noopener noreferrer" class="">Mastodon</a>, or join our community <a href="https://discord.com/invite/electronjs" target="_blank" rel="noopener noreferrer" class="">Discord</a>! Bugs and feature requests can be reported in Electron's <a href="https://github.com/electron/electron/issues" target="_blank" rel="noopener noreferrer" class="">issue tracker</a>.</p>
<h2 class="anchor anchorTargetStickyNavbar_Vzrq" id="notable-changes">Notable Changes<a href="https://electronjs.org/blog/electron-33-0#notable-changes" class="hash-link" aria-label="Direct link to Notable Changes" title="Direct link to Notable Changes" translate="no">​</a></h2>
<ul>
<li class="">Added a handler, <code>app.setClientCertRequestPasswordHandler(handler)</code>, to help unlock cryptographic devices when a PIN is needed. <a href="https://github.com/electron/electron/pull/41205" target="_blank" rel="noopener noreferrer" class="">#41205</a></li>
<li class="">Extended <code>navigationHistory</code> API with 2 new functions for better history management. <a href="https://github.com/electron/electron/pull/42014" target="_blank" rel="noopener noreferrer" class="">#42014</a></li>
<li class="">Improved native theme transparency checking. <a href="https://github.com/electron/electron/pull/42862" target="_blank" rel="noopener noreferrer" class="">#42862</a></li>
</ul>
<h2 class="anchor anchorTargetStickyNavbar_Vzrq" id="stack-changes">Stack Changes<a href="https://electronjs.org/blog/electron-33-0#stack-changes" class="hash-link" aria-label="Direct link to Stack Changes" title="Direct link to Stack Changes" translate="no">​</a></h2>
<ul>
<li class="">Chromium <code>130.0.6723.44</code>
<ul>
<li class=""><a href="https://developer.chrome.com/blog/new-in-chrome-130/" target="_blank" rel="noopener noreferrer" class="">New in 130</a></li>
<li class=""><a href="https://developer.chrome.com/blog/new-in-chrome-129/" target="_blank" rel="noopener noreferrer" class="">New in 129</a></li>
</ul>
</li>
<li class="">Node <code>20.18.0</code>
<ul>
<li class=""><a href="https://nodejs.org/en/blog/release/v20.18.0/" target="_blank" rel="noopener noreferrer" class="">Node 20.18.0 blog post</a></li>
<li class=""><a href="https://nodejs.org/en/blog/release/v20.17.0/" target="_blank" rel="noopener noreferrer" class="">Node 20.17.0 blog post</a></li>
</ul>
</li>
<li class="">V8 <code>13.0</code></li>
</ul>
<p>Electron 33 upgrades Chromium from <code>128.0.6613.36</code> to <code>130.0.6723.44</code>, Node from <code>20.16.0</code> to <code>20.18.0</code>, and V8 from <code>12.8</code> to <code>13.0</code>.</p>
<h2 class="anchor anchorTargetStickyNavbar_Vzrq" id="new-features">New Features<a href="https://electronjs.org/blog/electron-33-0#new-features" class="hash-link" aria-label="Direct link to New Features" title="Direct link to New Features" translate="no">​</a></h2>
<ul>
<li class="">Added a handler, <code>app.setClientCertRequestPasswordHandler(handler)</code>, to help unlock cryptographic devices when a PIN is needed. <a href="https://github.com/electron/electron/pull/41205" target="_blank" rel="noopener noreferrer" class="">#41205</a></li>
<li class="">Added error event in utility process to support diagnostic reports on V8 fatal errors. <a href="https://github.com/electron/electron/pull/43997" target="_blank" rel="noopener noreferrer" class="">#43997</a></li>
<li class="">Added <code>View.setBorderRadius(radius)</code> for customizing the border radius of views—with compatibility for <code>WebContentsView</code>. <a href="https://github.com/electron/electron/pull/42320" target="_blank" rel="noopener noreferrer" class="">#42320</a></li>
<li class="">Extended <code>navigationHistory</code> API with 2 new functions for better history management. <a href="https://github.com/electron/electron/pull/42014" target="_blank" rel="noopener noreferrer" class="">#42014</a></li>
</ul>
<h2 class="anchor anchorTargetStickyNavbar_Vzrq" id="breaking-changes">Breaking Changes<a href="https://electronjs.org/blog/electron-33-0#breaking-changes" class="hash-link" aria-label="Direct link to Breaking Changes" title="Direct link to Breaking Changes" translate="no">​</a></h2>
<h3 class="anchor anchorTargetStickyNavbar_Vzrq" id="removed-macos-1015-support">Removed: macOS 10.15 support<a href="https://electronjs.org/blog/electron-33-0#removed-macos-1015-support" class="hash-link" aria-label="Direct link to Removed: macOS 10.15 support" title="Direct link to Removed: macOS 10.15 support" translate="no">​</a></h3>
<p>macOS 10.15 (Catalina) is no longer supported by <a href="https://chromium-review.googlesource.com/c/chromium/src/+/5734361" target="_blank" rel="noopener noreferrer" class="">Chromium</a>.</p>
<p>Older versions of Electron will continue to run on Catalina, but macOS 11 (Big Sur)
or later will be required to run Electron v33.0.0 and higher.</p>
<h3 class="anchor anchorTargetStickyNavbar_Vzrq" id="behavior-changed-native-modules-now-require-c20">Behavior Changed: Native modules now require C++20<a href="https://electronjs.org/blog/electron-33-0#behavior-changed-native-modules-now-require-c20" class="hash-link" aria-label="Direct link to Behavior Changed: Native modules now require C++20" title="Direct link to Behavior Changed: Native modules now require C++20" translate="no">​</a></h3>
<p>Due to changes made upstream, both <a href="https://chromium-review.googlesource.com/c/v8/v8/+/5587859" target="_blank" rel="noopener noreferrer" class="">V8</a> and <a href="https://github.com/nodejs/node/pull/45427" target="_blank" rel="noopener noreferrer" class="">Node.js</a> now require C++20 as a minimum version. Developers using native node modules should build their modules with <code>--std=c++20</code> rather than <code>--std=c++17</code>. Images using gcc9 or lower may need to update to gcc10 in order to compile. See <a href="https://github.com/electron/electron/pull/43555" target="_blank" rel="noopener noreferrer" class="">#43555</a> for more details.</p>
<h3 class="anchor anchorTargetStickyNavbar_Vzrq" id="behavior-changed-custom-protocol-url-handling-on-windows">Behavior Changed: custom protocol URL handling on Windows<a href="https://electronjs.org/blog/electron-33-0#behavior-changed-custom-protocol-url-handling-on-windows" class="hash-link" aria-label="Direct link to Behavior Changed: custom protocol URL handling on Windows" title="Direct link to Behavior Changed: custom protocol URL handling on Windows" translate="no">​</a></h3>
<p>Due to changes made in Chromium to support <a href="http://bit.ly/url-non-special" target="_blank" rel="noopener noreferrer" class="">Non-Special Scheme URLs</a>, custom protocol URLs that use Windows file paths will no longer work correctly with the deprecated <code>protocol.registerFileProtocol</code> and the <code>baseURLForDataURL</code> property on <code>BrowserWindow.loadURL</code>, <code>WebContents.loadURL</code>, and <code>&lt;webview&gt;.loadURL</code>. <code>protocol.handle</code> will also not work with these types of URLs but this is not a change since it has always worked that way.</p>
<div class="language-js codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_QJqH"><pre tabindex="0" class="prism-code language-js codeBlock_bY9V thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#393A34"><span class="token comment" style="color:#999988;font-style:italic">// No longer works</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">protocol</span><span class="token punctuation" style="color:#393A34">.</span><span class="token method function property-access" style="color:#d73a49">registerFileProtocol</span><span class="token punctuation" style="color:#393A34">(</span><span class="token string" style="color:#e3116c">'other'</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"> </span><span class="token arrow operator" style="color:#393A34">=&gt;</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">  </span><span class="token function" style="color:#d73a49">callback</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"> </span><span class="token literal-property property" style="color:#36acaa">filePath</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">'/path/to/my/file'</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token keyword" style="color:#00009f">const</span><span class="token plain"> mainWindow </span><span class="token operator" style="color:#393A34">=</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">new</span><span class="token plain"> </span><span class="token class-name">BrowserWindow</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">mainWindow</span><span class="token punctuation" style="color:#393A34">.</span><span class="token method function property-access" style="color:#d73a49">loadURL</span><span class="token punctuation" style="color:#393A34">(</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">  </span><span class="token string" style="color:#e3116c">'data:text/html,&lt;script src="loaded-from-dataurl.js"&gt;&lt;/script&gt;'</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">  </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"> </span><span class="token literal-property property" style="color:#36acaa">baseURLForDataURL</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">'other://C:\\myapp'</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">mainWindow</span><span class="token punctuation" style="color:#393A34">.</span><span class="token method function property-access" style="color:#d73a49">loadURL</span><span class="token punctuation" style="color:#393A34">(</span><span class="token string" style="color:#e3116c">'other://C:\\myapp\\index.html'</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token comment" style="color:#999988;font-style:italic">// Replace with</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token keyword" style="color:#00009f">const</span><span class="token plain"> path </span><span class="token operator" style="color:#393A34">=</span><span class="token plain"> </span><span class="token function" style="color:#d73a49">require</span><span class="token punctuation" style="color:#393A34">(</span><span class="token string" style="color:#e3116c">'node:path'</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token keyword" style="color:#00009f">const</span><span class="token plain"> nodeUrl </span><span class="token operator" style="color:#393A34">=</span><span class="token plain"> </span><span class="token function" style="color:#d73a49">require</span><span class="token punctuation" style="color:#393A34">(</span><span class="token string" style="color:#e3116c">'node:url'</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">protocol</span><span class="token punctuation" style="color:#393A34">.</span><span class="token method function property-access" style="color:#d73a49">handle</span><span class="token punctuation" style="color:#393A34">(</span><span class="token plain">other</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">(</span><span class="token parameter">req</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"> </span><span class="token arrow operator" style="color:#393A34">=&gt;</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">  </span><span class="token keyword" style="color:#00009f">const</span><span class="token plain"> srcPath </span><span class="token operator" style="color:#393A34">=</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">'C:\\myapp\\'</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">  </span><span class="token keyword" style="color:#00009f">const</span><span class="token plain"> reqURL </span><span class="token operator" style="color:#393A34">=</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">new</span><span class="token plain"> </span><span class="token class-name">URL</span><span class="token punctuation" style="color:#393A34">(</span><span class="token plain">req</span><span class="token punctuation" style="color:#393A34">.</span><span class="token property-access">url</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">  </span><span class="token keyword control-flow" style="color:#00009f">return</span><span class="token plain"> net</span><span class="token punctuation" style="color:#393A34">.</span><span class="token method function property-access" style="color:#d73a49">fetch</span><span class="token punctuation" style="color:#393A34">(</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">    nodeUrl</span><span class="token punctuation" style="color:#393A34">.</span><span class="token method function property-access" style="color:#d73a49">pathToFileURL</span><span class="token punctuation" style="color:#393A34">(</span><span class="token plain">path</span><span class="token punctuation" style="color:#393A34">.</span><span class="token method function property-access" style="color:#d73a49">join</span><span class="token punctuation" style="color:#393A34">(</span><span class="token plain">srcPath</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> reqURL</span><span class="token punctuation" style="color:#393A34">.</span><span class="token property-access">pathname</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">.</span><span class="token method function property-access" style="color:#d73a49">toString</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">  </span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">mainWindow</span><span class="token punctuation" style="color:#393A34">.</span><span class="token method function property-access" style="color:#d73a49">loadURL</span><span class="token punctuation" style="color:#393A34">(</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">  </span><span class="token string" style="color:#e3116c">'data:text/html,&lt;script src="loaded-from-dataurl.js"&gt;&lt;/script&gt;'</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">  </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"> </span><span class="token literal-property property" style="color:#36acaa">baseURLForDataURL</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">'other://'</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">mainWindow</span><span class="token punctuation" style="color:#393A34">.</span><span class="token method function property-access" style="color:#d73a49">loadURL</span><span class="token punctuation" style="color:#393A34">(</span><span class="token string" style="color:#e3116c">'other://index.html'</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><br></span></code></pre></div></div>
<h3 class="anchor anchorTargetStickyNavbar_Vzrq" id="behavior-changed-webcontents-property-on-login-on-app">Behavior Changed: <code>webContents</code> property on <code>login</code> on <code>app</code><a href="https://electronjs.org/blog/electron-33-0#behavior-changed-webcontents-property-on-login-on-app" class="hash-link" aria-label="Direct link to behavior-changed-webcontents-property-on-login-on-app" title="Direct link to behavior-changed-webcontents-property-on-login-on-app" translate="no">​</a></h3>
<p>The <code>webContents</code> property in the <code>login</code> event from <code>app</code> will be <code>null</code>
when the event is triggered for requests from the <a href="https://www.electronjs.org/docs/latest/api/utility-process" target="_blank" rel="noopener noreferrer" class="">utility process</a>
created with <code>respondToAuthRequestsFromMainProcess</code> option.</p>
<h3 class="anchor anchorTargetStickyNavbar_Vzrq" id="deprecated-textured-option-in-browserwindowconstructoroptiontype">Deprecated: <code>textured</code> option in <code>BrowserWindowConstructorOption.type</code><a href="https://electronjs.org/blog/electron-33-0#deprecated-textured-option-in-browserwindowconstructoroptiontype" class="hash-link" aria-label="Direct link to deprecated-textured-option-in-browserwindowconstructoroptiontype" title="Direct link to deprecated-textured-option-in-browserwindowconstructoroptiontype" translate="no">​</a></h3>
<p>The <code>textured</code> option of <code>type</code> in <code>BrowserWindowConstructorOptions</code> has been deprecated with no replacement. This option relied on the <a href="https://developer.apple.com/documentation/appkit/nswindowstylemask/nswindowstylemasktexturedbackground" target="_blank" rel="noopener noreferrer" class=""><code>NSWindowStyleMaskTexturedBackground</code></a> style mask on macOS, which has been deprecated with no alternative.</p>
<h3 class="anchor anchorTargetStickyNavbar_Vzrq" id="deprecated-systempreferencesaccessibilitydisplayshouldreducetransparency">Deprecated: <code>systemPreferences.accessibilityDisplayShouldReduceTransparency</code><a href="https://electronjs.org/blog/electron-33-0#deprecated-systempreferencesaccessibilitydisplayshouldreducetransparency" class="hash-link" aria-label="Direct link to deprecated-systempreferencesaccessibilitydisplayshouldreducetransparency" title="Direct link to deprecated-systempreferencesaccessibilitydisplayshouldreducetransparency" translate="no">​</a></h3>
<p>The <code>systemPreferences.accessibilityDisplayShouldReduceTransparency</code> property is now deprecated in favor of the new <code>nativeTheme.prefersReducedTransparency</code>, which provides identical information and works cross-platform.</p>
<div class="language-js codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_QJqH"><pre tabindex="0" class="prism-code language-js codeBlock_bY9V thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#393A34"><span class="token comment" style="color:#999988;font-style:italic">// Deprecated</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token keyword" style="color:#00009f">const</span><span class="token plain"> shouldReduceTransparency </span><span class="token operator" style="color:#393A34">=</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">  systemPreferences</span><span class="token punctuation" style="color:#393A34">.</span><span class="token property-access">accessibilityDisplayShouldReduceTransparency</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token comment" style="color:#999988;font-style:italic">// Replace with:</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token keyword" style="color:#00009f">const</span><span class="token plain"> prefersReducedTransparency </span><span class="token operator" style="color:#393A34">=</span><span class="token plain"> nativeTheme</span><span class="token punctuation" style="color:#393A34">.</span><span class="token property-access">prefersReducedTransparency</span><span class="token punctuation" style="color:#393A34">;</span><br></span></code></pre></div></div>
<h2 class="anchor anchorTargetStickyNavbar_Vzrq" id="end-of-support-for-30xy">End of Support for 30.x.y<a href="https://electronjs.org/blog/electron-33-0#end-of-support-for-30xy" class="hash-link" aria-label="Direct link to End of Support for 30.x.y" title="Direct link to End of Support for 30.x.y" translate="no">​</a></h2>
<p>Electron 30.x.y has reached end-of-support as per the project's <a href="https://www.electronjs.org/docs/latest/tutorial/electron-timelines#version-support-policy" target="_blank" rel="noopener noreferrer" class="">support policy</a>. Developers and applications are encouraged to upgrade to a newer version of Electron.</p>
<table><thead><tr><th>E33 (Oct'24)</th><th>E34 (Jan'25)</th><th>E35 (Apr'25)</th></tr></thead><tbody><tr><td>33.x.y</td><td>34.x.y</td><td>35.x.y</td></tr><tr><td>32.x.y</td><td>33.x.y</td><td>34.x.y</td></tr><tr><td>31.x.y</td><td>32.x.y</td><td>33.x.y</td></tr></tbody></table>
<h2 class="anchor anchorTargetStickyNavbar_Vzrq" id="whats-next">What's Next<a href="https://electronjs.org/blog/electron-33-0#whats-next" class="hash-link" aria-label="Direct link to What's Next" title="Direct link to What's Next" translate="no">​</a></h2>
<p>In the short term, you can expect the team to continue to focus on keeping up with the development of the major components that make up Electron, including Chromium, Node, and V8.</p>
<p>You can find <a href="https://www.electronjs.org/docs/latest/tutorial/electron-timelines" target="_blank" rel="noopener noreferrer" class="">Electron's public timeline here</a>.</p>
<p>More information about future changes can be found on the <a href="https://github.com/electron/electron/blob/main/docs/breaking-changes.md" target="_blank" rel="noopener noreferrer" class="">Planned Breaking Changes</a> page.</p>]]></content>
        <author>
            <name>ckerr</name>
            <uri>https://github.com/ckerr</uri>
        </author>
        <category label="Release" term="Release"/>
    </entry>
    <entry>
        <title type="html"><![CDATA[Introducing API History (GSoC 2024)]]></title>
        <id>https://electronjs.org/blog/introducing-api-history</id>
        <link href="https://electronjs.org/blog/introducing-api-history"/>
        <updated>2024-08-21T00:00:00.000Z</updated>
        <summary type="html"><![CDATA[Historical changes to Electron APIs will now be detailed in the docs.]]></summary>
        <content type="html"><![CDATA[<p>Historical changes to Electron APIs will now be detailed in the docs.</p>
<hr>
<p>Hi 👋, I'm Peter, the 2024 <a href="https://summerofcode.withgoogle.com/" target="_blank" rel="noopener noreferrer" class="">Google Summer of Code (GSoC)</a>
contributor to Electron.</p>
<p>Over the course of the GSoC program, I implemented an API history feature for the
Electron documentation and its functions, classes, etc. in a similar fashion to the
<a href="https://nodejs.org/en/docs" target="_blank" rel="noopener noreferrer" class="">Node.js documentation</a>: by allowing the
use of a simple but powerful YAML schema in the API documentation Markdown files
and displaying it nicely on the Electron documentation website.</p>
<h2 class="anchor anchorTargetStickyNavbar_Vzrq" id="details">Details<a href="https://electronjs.org/blog/introducing-api-history#details" class="hash-link" aria-label="Direct link to Details" title="Direct link to Details" translate="no">​</a></h2>
<h3 class="anchor anchorTargetStickyNavbar_Vzrq" id="api-history-documentation-system--yaml-schema">API history documentation system / YAML schema<a href="https://electronjs.org/blog/introducing-api-history#api-history-documentation-system--yaml-schema" class="hash-link" aria-label="Direct link to API history documentation system / YAML schema" title="Direct link to API history documentation system / YAML schema" translate="no">​</a></h3>
<p>In the Markdown API documentation, the history for a function/class/etc. is now placed directly after the
header for that item in the form of a YAML code block encapsulated by
an HTML comment.</p>
<div class="language-yaml codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_QJqH"><pre tabindex="0" class="prism-code language-yaml codeBlock_bY9V thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#393A34"><span class="token comment" style="color:#999988;font-style:italic">#### `win.setTrafficLightPosition(position)` _macOS_</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">&lt;</span><span class="token tag" style="color:#00009f">!--</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">```YAML history</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token key atrule" style="color:#00a4db">added</span><span class="token punctuation" style="color:#393A34">:</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">  </span><span class="token punctuation" style="color:#393A34">-</span><span class="token plain"> </span><span class="token key atrule" style="color:#00a4db">pr-url</span><span class="token punctuation" style="color:#393A34">:</span><span class="token plain"> https</span><span class="token punctuation" style="color:#393A34">:</span><span class="token plain">//github.com/electron/electron/pull/22533</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token key atrule" style="color:#00a4db">changes</span><span class="token punctuation" style="color:#393A34">:</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">  </span><span class="token punctuation" style="color:#393A34">-</span><span class="token plain"> </span><span class="token key atrule" style="color:#00a4db">pr-url</span><span class="token punctuation" style="color:#393A34">:</span><span class="token plain"> https</span><span class="token punctuation" style="color:#393A34">:</span><span class="token plain">//github.com/electron/electron/pull/26789</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">    </span><span class="token key atrule" style="color:#00a4db">description</span><span class="token punctuation" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">"Made `trafficLightPosition` option work for `customButtonOnHover` window."</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token key atrule" style="color:#00a4db">deprecated</span><span class="token punctuation" style="color:#393A34">:</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">  </span><span class="token punctuation" style="color:#393A34">-</span><span class="token plain"> </span><span class="token key atrule" style="color:#00a4db">pr-url</span><span class="token punctuation" style="color:#393A34">:</span><span class="token plain"> https</span><span class="token punctuation" style="color:#393A34">:</span><span class="token plain">//github.com/electron/electron/pull/37094</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">    </span><span class="token key atrule" style="color:#00a4db">breaking-changes-header</span><span class="token punctuation" style="color:#393A34">:</span><span class="token plain"> deprecated</span><span class="token punctuation" style="color:#393A34">-</span><span class="token plain">browserwindowsettrafficlightpositionposition</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">```</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token punctuation" style="color:#393A34">-</span><span class="token punctuation" style="color:#393A34">-</span><span class="token punctuation" style="color:#393A34">&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">* `position` </span><span class="token punctuation" style="color:#393A34">[</span><span class="token plain">Point</span><span class="token punctuation" style="color:#393A34">]</span><span class="token plain">(structures/point.md)</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">Set a custom position for the traffic light buttons. Can only be used with `titleBarStyle` set to `hidden`.</span><br></span></code></pre></div></div>
<p>I believe using YAML like the Node.js docs do was the best approach because it
is easy to read. The API history isn't extremely complicated and should ideally
be as easy to write and read as possible.</p>
<p>The final design shown above is actually significantly different to the one I proposed:</p>
<div class="language-yaml codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_QJqH"><pre tabindex="0" class="prism-code language-yaml codeBlock_bY9V thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#393A34"><span class="token plain">&lt;</span><span class="token tag" style="color:#00009f">!--</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">```YAML history</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token key atrule" style="color:#00a4db">added</span><span class="token punctuation" style="color:#393A34">:</span><span class="token plain"> v10.0.0</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token key atrule" style="color:#00a4db">deprecated</span><span class="token punctuation" style="color:#393A34">:</span><span class="token plain"> v25.0.0</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token key atrule" style="color:#00a4db">removed</span><span class="token punctuation" style="color:#393A34">:</span><span class="token plain"> v28.0.0</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token key atrule" style="color:#00a4db">changes</span><span class="token punctuation" style="color:#393A34">:</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">  </span><span class="token punctuation" style="color:#393A34">-</span><span class="token plain"> </span><span class="token key atrule" style="color:#00a4db">version</span><span class="token punctuation" style="color:#393A34">:</span><span class="token plain"> v13.0.0</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">    </span><span class="token key atrule" style="color:#00a4db">pr-url</span><span class="token punctuation" style="color:#393A34">:</span><span class="token plain"> https</span><span class="token punctuation" style="color:#393A34">:</span><span class="token plain">//github.com/electron/electron/pull/26789</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">    </span><span class="token key atrule" style="color:#00a4db">description</span><span class="token punctuation" style="color:#393A34">:</span><span class="token plain"> Made `trafficLightPosition` option work for `customButtonOnHover` window.</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">```</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token punctuation" style="color:#393A34">-</span><span class="token punctuation" style="color:#393A34">-</span><span class="token punctuation" style="color:#393A34">&gt;</span><br></span></code></pre></div></div>
<p>One large change is the removal of version numbers:</p>
<blockquote>
<p>"[...] There’s one somewhat significant change we’d like to call out about
the proposal, which came up during discussion when we were reviewing proposals.
[...]</p>
<p>[we] decided that the approach with the [fewest] drawbacks would be to only
use PR URLs (the root PRs to main) instead of hardcoded version strings as in
the proposal.</p>
<p>This can serve as a single source of truth which can then be used
to derive exact version numbers, and no further documentation changes on main
are necessary if the change is backported to other branches."</p>
<p>— David Sanders <a href="https://github.com/dsanders11" target="_blank" rel="noopener noreferrer" class="">(@dsanders11)</a> via Slack</p>
</blockquote>
<p>We also didn't include removals in the API History, since when an API is removed
from Electron, it is also removed from the documentation.</p>
<h3 class="anchor anchorTargetStickyNavbar_Vzrq" id="javascript-implementation">JavaScript implementation<a href="https://electronjs.org/blog/introducing-api-history#javascript-implementation" class="hash-link" aria-label="Direct link to JavaScript implementation" title="Direct link to JavaScript implementation" translate="no">​</a></h3>
<p>I originally planned to create a new <code>@electron/docs-api-history-tools</code>
npm package that would contain scripts for extracting, validating/linting and converting
the API history in the documentation files.</p>
<p>About a week before the coding period began, and after some discussion with my
mentors, I realized that was probably unnecessary:</p>
<blockquote>
<p>"Hi everyone, I was thinking about the project after our huddle: Considering
that extraction logic will have to be handled differently in <code>e/website</code> and
<code>e/lint-roller</code> because of their dependencies, maybe there is no need for a
separate package for API history stuff?"</p>
<table><thead><tr><th style="text-align:center">Proposed</th><th style="text-align:center">Revised</th></tr></thead><tbody><tr><td style="text-align:center"><img decoding="async" loading="lazy" src="https://electronjs.org/static/assets/img/blog/api-history-js-proposed.png" alt="proposed" class="img_ev3q"></td><td style="text-align:center"><img decoding="async" loading="lazy" src="https://electronjs.org/static/assets/img/blog/api-history-js-revised.png" alt="revised" class="img_ev3q"></td></tr></tbody></table>
<p>— Piotr Płaczek (me) via Slack</p>
</blockquote>
<p>We ultimately decided to not go ahead with my original idea:</p>
<blockquote>
<p>"@Piotr Płaczek that seems fine to me! I think we can always refactor out to a
separate module in a later iteration if we find that we need to share a lot of
code between the two implementations anyways <!-- -->🙂<!-- -->"</p>
<p>— Erick Zhao (<a href="https://github.com/erickzhao" target="_blank" rel="noopener noreferrer" class="">@erickzhao</a>) via Slack</p>
</blockquote>
<p>Instead, we divided those various tools across the Electron repos that were most
relevant to them:</p>
<ul>
<li class=""><code>yaml-api-history-schema.json</code>
<ul>
<li class="">-&gt; <code>electron/electron</code> (<a href="https://github.com/electron/electron/blob/main/docs/api-history.schema.json" target="_blank" rel="noopener noreferrer" class=""><code>api-history.schema.json</code></a>)</li>
</ul>
</li>
<li class=""><code>lint-yaml-api-history.ts</code>
<ul>
<li class="">-&gt; <code>electron/lint-roller</code> (<a href="https://github.com/electron/lint-roller/blob/3d87b7ba8f99868a28648297f31a1587945045ab/bin/lint-markdown-api-history.ts#L4" target="_blank" rel="noopener noreferrer" class=""><code>lint-markdown-api-history.ts</code></a>)</li>
</ul>
</li>
<li class=""><code>extract-yaml-api-history.ts</code>
<ul>
<li class="">-&gt; <code>electron/website</code> (<a href="https://github.com/electron/website/blob/f7e9446dd7d04b3369e9454f7c95f638fa061f1e/scripts/tasks/preprocess-api-history.ts#L4" target="_blank" rel="noopener noreferrer" class=""><code>preprocess-api-history.ts</code></a>)</li>
</ul>
</li>
<li class=""><code>yaml-api-history-to-markdown.ts</code>
<ul>
<li class="">-&gt; <code>electron/website</code> (<a href="https://github.com/electron/website/blob/f7e9446dd7d04b3369e9454f7c95f638fa061f1e/src/transformers/api-history.ts" target="_blank" rel="noopener noreferrer" class=""><code>transformers/api-history.ts</code></a>)</li>
<li class="">-&gt; <code>electron/website</code> (<a href="https://github.com/electron/website/blob/f7e9446dd7d04b3369e9454f7c95f638fa061f1e/src/components/ApiHistoryTable.tsx" target="_blank" rel="noopener noreferrer" class=""><code>ApiHistoryTable.tsx</code></a>)</li>
</ul>
</li>
</ul>
<h3 class="anchor anchorTargetStickyNavbar_Vzrq" id="ui-and-styling-for-electron-documentation-website">UI and styling for Electron documentation website<a href="https://electronjs.org/blog/introducing-api-history#ui-and-styling-for-electron-documentation-website" class="hash-link" aria-label="Direct link to UI and styling for Electron documentation website" title="Direct link to UI and styling for Electron documentation website" translate="no">​</a></h3>
<p>I originally proposed a simple table to display the API History data:</p>
<table><thead><tr><th style="text-align:center">Design Prototype (Closed)</th><th style="text-align:center">Design Prototype (Open)</th></tr></thead><tbody><tr><td style="text-align:center"><img decoding="async" loading="lazy" src="https://electronjs.org/static/assets/img/blog/api-history-prototype-closed.png" alt="demo1" class="img_ev3q"></td><td style="text-align:center"><img decoding="async" loading="lazy" src="https://electronjs.org/static/assets/img/blog/api-history-prototype-open.png" alt="demo2" class="img_ev3q"></td></tr></tbody></table>
<p>This is what the final implemented design looks like:</p>
<p><img decoding="async" loading="lazy" src="https://electronjs.org/static/assets/img/blog/api-history-open-implemented.png" alt="demo3" class="img_ev3q"></p>
<p>Pretty much the same as the prototype. The most significant addition is the use
of <a href="https://semver.org/" target="_blank" rel="noopener noreferrer" class="">SemVer</a> ranges, which were chosen to better communicate
which versions a feature is present in (thanks Samuel Attard
<a href="https://github.com/MarshallOfSound" target="_blank" rel="noopener noreferrer" class="">(@MarshallOfSound)</a> for the suggestion!).</p>
<p>This is important because changes are frequently backported across supported
Electron release lines e.g. a fix may make it into Electron v32.0.0, v31.1.0 and v30.2.0.
This means it is not present in v31.0.0 which a user might mistakenly deduce based
on the fact it is present in a v30.x.x release.</p>
<h3 class="anchor anchorTargetStickyNavbar_Vzrq" id="usagestyle-guide">Usage/style guide<a href="https://electronjs.org/blog/introducing-api-history#usagestyle-guide" class="hash-link" aria-label="Direct link to Usage/style guide" title="Direct link to Usage/style guide" translate="no">​</a></h3>
<p>I added a usage/style guide dedicated to writing API history documentation for
new features. I described proper usages of the YAML schema in detail, provided
typical/useful examples, etc. You can find it
<a href="https://github.com/electron/electron/blob/main/docs/development/style-guide.md#api-history" target="_blank" rel="noopener noreferrer" class="">here</a>.</p>
<h3 class="anchor anchorTargetStickyNavbar_Vzrq" id="migration-guide">Migration guide<a href="https://electronjs.org/blog/introducing-api-history#migration-guide" class="hash-link" aria-label="Direct link to Migration guide" title="Direct link to Migration guide" translate="no">​</a></h3>
<p>Since existing APIs have to be migrated to the new documentation system, I created
a migration guide. It features the typical steps of what a developer has
to do when migrating old APIs: looking through breaking changes, browsing through
the past releases, maybe looking through old commits, etc.
Then instructing the developer to follow the usage/style guide to add API history
documentation for each previously existing class/function/etc.</p>
<p>Sadly, I couldn't think of a way to automate this effectively. This would probably
be a great task for an AI/ML engineer; however, I don't possess those skills and
was too afraid of accidentally introducing <a href="https://en.wikipedia.org/wiki/Hallucination_(artificial_intelligence)" target="_blank" rel="noopener noreferrer" class="">hallucinations</a>
into the API history. Even if automated, the information would still probably have
to be verified by a human in the end 😕. This task will probably have to be done
manually, on a file-by-file basis,
<a href="https://github.com/nodejs/node/issues/6578" target="_blank" rel="noopener noreferrer" class="">just like it was done for the Node.js documentation</a>.</p>
<h2 class="anchor anchorTargetStickyNavbar_Vzrq" id="deliverables">Deliverables<a href="https://electronjs.org/blog/introducing-api-history#deliverables" class="hash-link" aria-label="Direct link to Deliverables" title="Direct link to Deliverables" translate="no">​</a></h2>
<ul>
<li class="">
<p><code>api-history.schema.json</code></p>
<ul class="contains-task-list containsTaskList_mC6p">
<li class="">A comprehensive YAML schema for documenting API history which includes support
for:<!-- -->
<ul class="contains-task-list containsTaskList_mC6p">
<li class="task-list-item"><input type="checkbox" disabled="" checked=""> <!-- -->Additions</li>
<li class="task-list-item"><input type="checkbox" disabled="" checked=""> <!-- -->Deprecations</li>
<li class="task-list-item"><input type="checkbox" disabled="" checked=""> <!-- -->Changes</li>
<li class="task-list-item"><input type="checkbox" disabled="" checked=""> <!-- -->Links to relevant pull requests</li>
<li class="task-list-item"><input type="checkbox" disabled="" checked=""> <!-- -->Backports</li>
</ul>
</li>
<li class="task-list-item"><input type="checkbox" disabled="" checked=""> <!-- -->Proposed in: <a href="https://github.com/electron/rfcs/pull/6" target="_blank" rel="noopener noreferrer" class="">electron/rfc#6</a></li>
<li class="task-list-item"><input type="checkbox" disabled="" checked=""> <!-- -->Implemented/Used in: <a href="https://github.com/electron/electron/pull/42982" target="_blank" rel="noopener noreferrer" class="">electron/electron#42982</a></li>
<li class="task-list-item"><input type="checkbox" disabled="" checked=""> <!-- -->Used in: <a href="https://github.com/electron/website/pull/594" target="_blank" rel="noopener noreferrer" class="">electron/website#594</a></li>
</ul>
</li>
<li class="">
<p><code>lint-markdown-api-history.ts</code></p>
<ul class="contains-task-list containsTaskList_mC6p">
<li class="">Script for linting YAML API history written according to a custom YAML
(technically JSON) schema.<!-- -->
<ul class="contains-task-list containsTaskList_mC6p">
<li class="task-list-item"><input type="checkbox" disabled="" checked=""> <!-- -->Useful error messages</li>
<li class="task-list-item"><input type="checkbox" disabled="" checked=""> <!-- -->Comprehensive documentation / code comments</li>
<li class="task-list-item"><input type="checkbox" disabled="" checked=""> <!-- -->Extensive <del>Jest</del> Vitest tests</li>
<li class="task-list-item"><input type="checkbox" disabled="" checked=""> <!-- -->Good performance</li>
</ul>
</li>
<li class="task-list-item"><input type="checkbox" disabled="" checked=""> <!-- -->Implemented in: <a href="https://github.com/electron/lint-roller/pull/73" target="_blank" rel="noopener noreferrer" class="">electron/lint-roller#73</a></li>
<li class="task-list-item"><input type="checkbox" disabled="" checked=""> <!-- -->Used in: <a href="https://github.com/electron/electron/pull/42982" target="_blank" rel="noopener noreferrer" class="">electron/electron#42982</a></li>
</ul>
</li>
<li class="">
<p><code>preprocess-api-history.ts</code></p>
<ul class="contains-task-list containsTaskList_mC6p">
<li class="">Performs simple validation just in case incorrect API History manages to make
it into the repo. Also strips the HTML comment tags that wrap API History blocks
since <a href="https://docusaurus.io/" target="_blank" rel="noopener noreferrer" class="">Docusaurus</a> cannot parse them.</li>
<li class="task-list-item"><input type="checkbox" disabled="" checked=""> <!-- -->Implemented/Used in: <a href="https://github.com/electron/website/pull/594" target="_blank" rel="noopener noreferrer" class="">electron/website#594</a></li>
</ul>
</li>
<li class="">
<p><code>transformers/api-history.ts</code></p>
<ul class="contains-task-list containsTaskList_mC6p">
<li class="">Script for converting YAML API history blocks in the Markdown documentation files
to <del>Markdown/HTML</del> <a href="https://react.dev/" target="_blank" rel="noopener noreferrer" class="">React</a> tables (<code>ApiHistoryTable.tsx</code>).</li>
<li class="task-list-item"><input type="checkbox" disabled="" checked=""> <!-- -->Implemented/Used in: <a href="https://github.com/electron/website/pull/594" target="_blank" rel="noopener noreferrer" class="">electron/website#594</a></li>
</ul>
</li>
<li class="">
<p><code>ApiHistoryTable.tsx</code></p>
<ul class="contains-task-list containsTaskList_mC6p">
<li class="">React table component used to display parsed API History data on the
documentation website.<!-- -->
<ul class="contains-task-list containsTaskList_mC6p">
<li class="task-list-item"><input type="checkbox" disabled="" checked=""> <!-- -->Uses styling that follows the rest of the website's design.</li>
<li class="task-list-item"><input type="checkbox" disabled="" checked=""> <!-- -->Responsive, accessible, and generally well written HTML, CSS, and JS.</li>
</ul>
</li>
<li class="task-list-item"><input type="checkbox" disabled="" checked=""> <!-- -->Implemented/Used in: <a href="https://github.com/electron/website/pull/594" target="_blank" rel="noopener noreferrer" class="">electron/website#594</a></li>
</ul>
</li>
<li class="">
<p><code>styleguide.md</code></p>
<ul class="contains-task-list containsTaskList_mC6p">
<li class="">Usage/style guide section for new API history documentation system.<!-- -->
<ul class="contains-task-list containsTaskList_mC6p">
<li class="task-list-item"><input type="checkbox" disabled="" checked=""> <!-- -->Easy to understand</li>
<li class="task-list-item"><input type="checkbox" disabled="" checked=""> <!-- -->Well written</li>
<li class="task-list-item"><input type="checkbox" disabled="" checked=""> <!-- -->Includes examples</li>
</ul>
</li>
<li class="task-list-item"><input type="checkbox" disabled="" checked=""> <!-- -->Implemented/Used in: <a href="https://github.com/electron/electron/pull/42982" target="_blank" rel="noopener noreferrer" class="">electron/electron#42982</a></li>
</ul>
</li>
<li class="">
<p><code>api-history-migration-guide.md</code></p>
<ul class="contains-task-list containsTaskList_mC6p">
<li class="">Migration guide for new API history documentation system.<!-- -->
<ul class="contains-task-list containsTaskList_mC6p">
<li class="task-list-item"><input type="checkbox" disabled="" checked=""> <!-- -->Easy to understand</li>
<li class="task-list-item"><input type="checkbox" disabled="" checked=""> <!-- -->Well written</li>
<li class="task-list-item"><input type="checkbox" disabled="" checked=""> <!-- -->Includes examples</li>
</ul>
</li>
<li class="task-list-item"><input type="checkbox" disabled="" checked=""> <!-- -->Implemented/Used in: <a href="https://github.com/electron/electron/pull/42982" target="_blank" rel="noopener noreferrer" class="">electron/electron#42982</a></li>
</ul>
</li>
</ul>
<h2 class="anchor anchorTargetStickyNavbar_Vzrq" id="conclusion">Conclusion<a href="https://electronjs.org/blog/introducing-api-history#conclusion" class="hash-link" aria-label="Direct link to Conclusion" title="Direct link to Conclusion" translate="no">​</a></h2>
<p>I had a lot of fun working on this feature and was able to earn valuable experience
from code reviews and discussing its various implementation details with the team.</p>
<p>I believe the addition of API history to the documentation will make the lives of
developers using Electron a lot easier, especially ones attempting to migrate their
existing app from a several year old Electron version.</p>
<p>I also want to sincerely thank my mentors:</p>
<ul>
<li class="">David Sanders <a href="https://github.com/dsanders11" target="_blank" rel="noopener noreferrer" class="">(@dsanders11)</a></li>
<li class="">Keeley Hammond <a href="https://github.com/VerteDinde" target="_blank" rel="noopener noreferrer" class="">(@VerteDinde)</a></li>
<li class="">Erick Zhao <a href="https://github.com/erickzhao" target="_blank" rel="noopener noreferrer" class="">(@erickzhao)</a></li>
</ul>
<p>...and the rest of the Electron team for answering my questions
and taking the time to give me feedback on my pull requests.
It is very much appreciated.</p>]]></content>
        <author>
            <name>piotrpdev</name>
            <uri>https://github.com/piotrpdev</uri>
        </author>
        <category label="Community" term="Community"/>
    </entry>
    <entry>
        <title type="html"><![CDATA[Electron 32.0.0]]></title>
        <id>https://electronjs.org/blog/electron-32-0</id>
        <link href="https://electronjs.org/blog/electron-32-0"/>
        <updated>2024-08-20T00:00:00.000Z</updated>
        <summary type="html"><![CDATA[Electron 32.0.0 has been released! It includes upgrades to Chromium 128.0.6613.36, V8 12.8, and Node 20.16.0.]]></summary>
        <content type="html"><![CDATA[<p>Electron 32.0.0 has been released! It includes upgrades to Chromium <code>128.0.6613.36</code>, V8 <code>12.8</code>, and Node <code>20.16.0</code>.</p>
<hr>
<p>The Electron team is excited to announce the release of Electron 32.0.0! You can install it with npm via <code>npm install electron@latest</code> or download it from our <a href="https://releases.electronjs.org/release?channel=stable" target="_blank" rel="noopener noreferrer" class="">releases website</a>. Continue reading for details about this release.</p>
<p>If you have any feedback, please share it with us on <a href="https://twitter.com/electronjs" target="_blank" rel="noopener noreferrer" class="">Twitter</a> or <a href="https://social.lfx.dev/@electronjs" target="_blank" rel="noopener noreferrer" class="">Mastodon</a>, or join our community <a href="https://discord.com/invite/electronjs" target="_blank" rel="noopener noreferrer" class="">Discord</a>! Bugs and feature requests can be reported in Electron's <a href="https://github.com/electron/electron/issues" target="_blank" rel="noopener noreferrer" class="">issue tracker</a>.</p>
<h2 class="anchor anchorTargetStickyNavbar_Vzrq" id="notable-changes">Notable Changes<a href="https://electronjs.org/blog/electron-32-0#notable-changes" class="hash-link" aria-label="Direct link to Notable Changes" title="Direct link to Notable Changes" translate="no">​</a></h2>
<ul>
<li class="">Added new API version history in our documentation, a feature created by @piotrpdev as part of Google Summer of Code. You can learn more about it in <a class="" href="https://electronjs.org/blog/introducing-api-history">this blog post</a>. <a href="https://github.com/electron/electron/pull/42982" target="_blank" rel="noopener noreferrer" class="">#42982</a></li>
<li class="">Removed nonstandard File.path extension from the Web File API. <a href="https://github.com/electron/electron/pull/42053" target="_blank" rel="noopener noreferrer" class="">#42053</a></li>
<li class="">Aligned failure pathway in Web <a href="https://developer.mozilla.org/en-US/docs/Web/API/File_System_API" target="_blank" rel="noopener noreferrer" class="">File System API</a> with upstream when attempting to open a file or directory in a blocked path. <a href="https://github.com/electron/electron/pull/42993" target="_blank" rel="noopener noreferrer" class="">#42993</a></li>
<li class="">Added the following existing navigation-related APIs to <code>webcontents.navigationHistory</code>: <code>canGoBack</code>, <code>goBack</code>, <code>canGoForward</code>, <code>goForward</code>, <code>canGoToOffset</code>, <code>goToOffset</code>, <code>clear</code>. The previous navigation APIs are now deprecated. <a href="https://github.com/electron/electron/pull/41752" target="_blank" rel="noopener noreferrer" class="">#41752</a></li>
</ul>
<h2 class="anchor anchorTargetStickyNavbar_Vzrq" id="stack-changes">Stack Changes<a href="https://electronjs.org/blog/electron-32-0#stack-changes" class="hash-link" aria-label="Direct link to Stack Changes" title="Direct link to Stack Changes" translate="no">​</a></h2>
<ul>
<li class="">Chromium<code>128.0.6613.36</code>
<ul>
<li class=""><a href="https://developer.chrome.com/blog/new-in-chrome-128/" target="_blank" rel="noopener noreferrer" class="">New in 128</a></li>
<li class=""><a href="https://developer.chrome.com/blog/new-in-chrome-127/" target="_blank" rel="noopener noreferrer" class="">New in 127</a></li>
</ul>
</li>
<li class="">Node <code>20.16.0</code>
<ul>
<li class=""><a href="https://nodejs.org/en/blog/release/v20.16.0/" target="_blank" rel="noopener noreferrer" class="">Node 20.16.0 blog post</a></li>
</ul>
</li>
<li class="">V8 <code>12.8</code></li>
</ul>
<p>Electron 32 upgrades Chromium from <code>126.0.6478.36</code> to <code>128.0.6613.36</code>, Node from <code>20.14.0</code> to <code>20.16.0</code>, and V8 from <code>12.6</code> to <code>12.8</code>.</p>
<h2 class="anchor anchorTargetStickyNavbar_Vzrq" id="new-features">New Features<a href="https://electronjs.org/blog/electron-32-0#new-features" class="hash-link" aria-label="Direct link to New Features" title="Direct link to New Features" translate="no">​</a></h2>
<ul>
<li class="">Added support for responding to auth requests initiated from the utility process via the <code>app</code> module's <a href="https://www.electronjs.org/docs/latest/api/app" target="_blank" rel="noopener noreferrer" class=""><code>'login'</code></a> event. <a href="https://github.com/electron/electron/pull/43317" target="_blank" rel="noopener noreferrer" class="">#43317</a></li>
<li class="">Added the <code>cumulativeCPUUsage</code> property to the <code>CPUUsage</code> structure, which returns the total seconds of CPU time used since process startup. <a href="https://github.com/electron/electron/pull/41819" target="_blank" rel="noopener noreferrer" class="">#41819</a></li>
<li class="">Added the following existing navigation related APIs to <code>webContents.navigationHistory</code>: <code>canGoBack</code>, <code>goBack</code>, <code>canGoForward</code>, <code>goForward</code>, <code>canGoToOffset</code>, <code>goToOffset</code>, <code>clear</code>. <a href="https://github.com/electron/electron/pull/41752" target="_blank" rel="noopener noreferrer" class="">#41752</a></li>
<li class="">Extended <code>WebContentsView</code> to accept pre-existing <code>webContents</code> objects. <a href="https://github.com/electron/electron/pull/42086" target="_blank" rel="noopener noreferrer" class="">#42086</a></li>
<li class="">Added a new property <code>prefersReducedTransparency</code> to <code>nativeTheme</code>, which indicates whether the user has chosen to reduce OS-level transparency via system accessibility settings. <a href="https://github.com/electron/electron/pull/43137" target="_blank" rel="noopener noreferrer" class="">#43137</a></li>
<li class="">Aligned failure pathway in File System Access API with upstream when attempting to open a file or directory in a blocked path. <a href="https://github.com/electron/electron/pull/42993" target="_blank" rel="noopener noreferrer" class="">#42993</a></li>
<li class="">Enabled the Windows Control Overlay API on Linux. <a href="https://github.com/electron/electron/pull/42681" target="_blank" rel="noopener noreferrer" class="">#42681</a></li>
<li class="">Enabled <code>zstd</code> compression in network requests. <a href="https://github.com/electron/electron/pull/43300" target="_blank" rel="noopener noreferrer" class="">#43300</a></li>
</ul>
<h2 class="anchor anchorTargetStickyNavbar_Vzrq" id="breaking-changes">Breaking Changes<a href="https://electronjs.org/blog/electron-32-0#breaking-changes" class="hash-link" aria-label="Direct link to Breaking Changes" title="Direct link to Breaking Changes" translate="no">​</a></h2>
<h3 class="anchor anchorTargetStickyNavbar_Vzrq" id="removed-filepath">Removed: <code>File.path</code><a href="https://electronjs.org/blog/electron-32-0#removed-filepath" class="hash-link" aria-label="Direct link to removed-filepath" title="Direct link to removed-filepath" translate="no">​</a></h3>
<p>The nonstandard <code>path</code> property of the Web <a href="https://developer.mozilla.org/en-US/docs/Web/API/File" target="_blank" rel="noopener noreferrer" class=""><code>File</code></a> object was added in an early version of Electron as a convenience method for working with native files when doing everything in the renderer was more common. However, it represents a deviation from the standard and poses a minor security risk as well, so beginning in Electron 32.0 it has been removed in favor of the <a href="https://github.com/electron/electron/tree/main/docs/api/web-utils.md#webutilsgetpathforfilefile" target="_blank" rel="noopener noreferrer" class=""><code>webUtils.getPathForFile</code></a> method.</p>
<div class="language-js codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_QJqH"><pre tabindex="0" class="prism-code language-js codeBlock_bY9V thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#393A34"><span class="token comment" style="color:#999988;font-style:italic">// Before (renderer)</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token keyword" style="color:#00009f">const</span><span class="token plain"> file </span><span class="token operator" style="color:#393A34">=</span><span class="token plain"> </span><span class="token dom variable" style="color:#36acaa">document</span><span class="token punctuation" style="color:#393A34">.</span><span class="token method function property-access" style="color:#d73a49">querySelector</span><span class="token punctuation" style="color:#393A34">(</span><span class="token string" style="color:#e3116c">'input[type=file]'</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token function" style="color:#d73a49">alert</span><span class="token punctuation" style="color:#393A34">(</span><span class="token template-string template-punctuation string" style="color:#e3116c">`</span><span class="token template-string string" style="color:#e3116c">Uploaded file path was: </span><span class="token template-string interpolation interpolation-punctuation punctuation" style="color:#393A34">${</span><span class="token template-string interpolation">file</span><span class="token template-string interpolation punctuation" style="color:#393A34">.</span><span class="token template-string interpolation property-access">path</span><span class="token template-string interpolation interpolation-punctuation punctuation" style="color:#393A34">}</span><span class="token template-string template-punctuation string" style="color:#e3116c">`</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><br></span></code></pre></div></div>
<div class="language-js codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_QJqH"><pre tabindex="0" class="prism-code language-js codeBlock_bY9V thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#393A34"><span class="token comment" style="color:#999988;font-style:italic">// After (renderer)</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token keyword" style="color:#00009f">const</span><span class="token plain"> file </span><span class="token operator" style="color:#393A34">=</span><span class="token plain"> </span><span class="token dom variable" style="color:#36acaa">document</span><span class="token punctuation" style="color:#393A34">.</span><span class="token method function property-access" style="color:#d73a49">querySelector</span><span class="token punctuation" style="color:#393A34">(</span><span class="token string" style="color:#e3116c">'input[type=file]'</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">electron</span><span class="token punctuation" style="color:#393A34">.</span><span class="token method function property-access" style="color:#d73a49">showFilePath</span><span class="token punctuation" style="color:#393A34">(</span><span class="token plain">file</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token comment" style="color:#999988;font-style:italic">// After (preload)</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token keyword" style="color:#00009f">const</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"> contextBridge</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> webUtils </span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"> </span><span class="token operator" style="color:#393A34">=</span><span class="token plain"> </span><span class="token function" style="color:#d73a49">require</span><span class="token punctuation" style="color:#393A34">(</span><span class="token string" style="color:#e3116c">'electron'</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">contextBridge</span><span class="token punctuation" style="color:#393A34">.</span><span class="token method function property-access" style="color:#d73a49">exposeInMainWorld</span><span class="token punctuation" style="color:#393A34">(</span><span class="token string" style="color:#e3116c">'electron'</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">  </span><span class="token function" style="color:#d73a49">showFilePath</span><span class="token punctuation" style="color:#393A34">(</span><span class="token parameter">file</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">    </span><span class="token comment" style="color:#999988;font-style:italic">// It's best not to expose the full file path to the web content if</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">    </span><span class="token comment" style="color:#999988;font-style:italic">// possible.</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">    </span><span class="token keyword" style="color:#00009f">const</span><span class="token plain"> path </span><span class="token operator" style="color:#393A34">=</span><span class="token plain"> webUtils</span><span class="token punctuation" style="color:#393A34">.</span><span class="token method function property-access" style="color:#d73a49">getPathForFile</span><span class="token punctuation" style="color:#393A34">(</span><span class="token plain">file</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">    </span><span class="token function" style="color:#d73a49">alert</span><span class="token punctuation" style="color:#393A34">(</span><span class="token template-string template-punctuation string" style="color:#e3116c">`</span><span class="token template-string string" style="color:#e3116c">Uploaded file path was: </span><span class="token template-string interpolation interpolation-punctuation punctuation" style="color:#393A34">${</span><span class="token template-string interpolation">path</span><span class="token template-string interpolation interpolation-punctuation punctuation" style="color:#393A34">}</span><span class="token template-string template-punctuation string" style="color:#e3116c">`</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">  </span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><br></span></code></pre></div></div>
<h3 class="anchor anchorTargetStickyNavbar_Vzrq" id="deprecated-clearhistory-cangoback-goback-cangoforward-goforward-gotoindex-cangotooffset-gotooffset-on-webcontents">Deprecated: <code>clearHistory</code>, <code>canGoBack</code>, <code>goBack</code>, <code>canGoForward</code>, <code>goForward</code>, <code>goToIndex</code>, <code>canGoToOffset</code>, <code>goToOffset</code> on <code>WebContents</code><a href="https://electronjs.org/blog/electron-32-0#deprecated-clearhistory-cangoback-goback-cangoforward-goforward-gotoindex-cangotooffset-gotooffset-on-webcontents" class="hash-link" aria-label="Direct link to deprecated-clearhistory-cangoback-goback-cangoforward-goforward-gotoindex-cangotooffset-gotooffset-on-webcontents" title="Direct link to deprecated-clearhistory-cangoback-goback-cangoforward-goforward-gotoindex-cangotooffset-gotooffset-on-webcontents" translate="no">​</a></h3>
<p>Navigation-related APIs on <code>WebContents</code> instances are now deprecated. These APIs have been moved to the <code>navigationHistory</code> property of <code>WebContents</code> to provide a more structured and intuitive interface for managing navigation history.</p>
<div class="language-js codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_QJqH"><pre tabindex="0" class="prism-code language-js codeBlock_bY9V thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#393A34"><span class="token comment" style="color:#999988;font-style:italic">// Deprecated</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">win</span><span class="token punctuation" style="color:#393A34">.</span><span class="token property-access">webContents</span><span class="token punctuation" style="color:#393A34">.</span><span class="token method function property-access" style="color:#d73a49">clearHistory</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">win</span><span class="token punctuation" style="color:#393A34">.</span><span class="token property-access">webContents</span><span class="token punctuation" style="color:#393A34">.</span><span class="token method function property-access" style="color:#d73a49">canGoBack</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">win</span><span class="token punctuation" style="color:#393A34">.</span><span class="token property-access">webContents</span><span class="token punctuation" style="color:#393A34">.</span><span class="token method function property-access" style="color:#d73a49">goBack</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">win</span><span class="token punctuation" style="color:#393A34">.</span><span class="token property-access">webContents</span><span class="token punctuation" style="color:#393A34">.</span><span class="token method function property-access" style="color:#d73a49">canGoForward</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">win</span><span class="token punctuation" style="color:#393A34">.</span><span class="token property-access">webContents</span><span class="token punctuation" style="color:#393A34">.</span><span class="token method function property-access" style="color:#d73a49">goForward</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">win</span><span class="token punctuation" style="color:#393A34">.</span><span class="token property-access">webContents</span><span class="token punctuation" style="color:#393A34">.</span><span class="token method function property-access" style="color:#d73a49">goToIndex</span><span class="token punctuation" style="color:#393A34">(</span><span class="token plain">index</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">win</span><span class="token punctuation" style="color:#393A34">.</span><span class="token property-access">webContents</span><span class="token punctuation" style="color:#393A34">.</span><span class="token method function property-access" style="color:#d73a49">canGoToOffset</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">win</span><span class="token punctuation" style="color:#393A34">.</span><span class="token property-access">webContents</span><span class="token punctuation" style="color:#393A34">.</span><span class="token method function property-access" style="color:#d73a49">goToOffset</span><span class="token punctuation" style="color:#393A34">(</span><span class="token plain">index</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token comment" style="color:#999988;font-style:italic">// Replace with</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">win</span><span class="token punctuation" style="color:#393A34">.</span><span class="token property-access">webContents</span><span class="token punctuation" style="color:#393A34">.</span><span class="token property-access">navigationHistory</span><span class="token punctuation" style="color:#393A34">.</span><span class="token method function property-access" style="color:#d73a49">clear</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">win</span><span class="token punctuation" style="color:#393A34">.</span><span class="token property-access">webContents</span><span class="token punctuation" style="color:#393A34">.</span><span class="token property-access">navigationHistory</span><span class="token punctuation" style="color:#393A34">.</span><span class="token method function property-access" style="color:#d73a49">canGoBack</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">win</span><span class="token punctuation" style="color:#393A34">.</span><span class="token property-access">webContents</span><span class="token punctuation" style="color:#393A34">.</span><span class="token property-access">navigationHistory</span><span class="token punctuation" style="color:#393A34">.</span><span class="token method function property-access" style="color:#d73a49">goBack</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">win</span><span class="token punctuation" style="color:#393A34">.</span><span class="token property-access">webContents</span><span class="token punctuation" style="color:#393A34">.</span><span class="token property-access">navigationHistory</span><span class="token punctuation" style="color:#393A34">.</span><span class="token method function property-access" style="color:#d73a49">canGoForward</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">win</span><span class="token punctuation" style="color:#393A34">.</span><span class="token property-access">webContents</span><span class="token punctuation" style="color:#393A34">.</span><span class="token property-access">navigationHistory</span><span class="token punctuation" style="color:#393A34">.</span><span class="token method function property-access" style="color:#d73a49">goForward</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">win</span><span class="token punctuation" style="color:#393A34">.</span><span class="token property-access">webContents</span><span class="token punctuation" style="color:#393A34">.</span><span class="token property-access">navigationHistory</span><span class="token punctuation" style="color:#393A34">.</span><span class="token method function property-access" style="color:#d73a49">canGoToOffset</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">win</span><span class="token punctuation" style="color:#393A34">.</span><span class="token property-access">webContents</span><span class="token punctuation" style="color:#393A34">.</span><span class="token property-access">navigationHistory</span><span class="token punctuation" style="color:#393A34">.</span><span class="token method function property-access" style="color:#d73a49">goToOffset</span><span class="token punctuation" style="color:#393A34">(</span><span class="token plain">index</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><br></span></code></pre></div></div>
<h3 class="anchor anchorTargetStickyNavbar_Vzrq" id="behavior-changed-directory-databases-in-userdata-will-be-deleted">Behavior changed: Directory <code>databases</code> in <code>userData</code> will be deleted<a href="https://electronjs.org/blog/electron-32-0#behavior-changed-directory-databases-in-userdata-will-be-deleted" class="hash-link" aria-label="Direct link to behavior-changed-directory-databases-in-userdata-will-be-deleted" title="Direct link to behavior-changed-directory-databases-in-userdata-will-be-deleted" translate="no">​</a></h3>
<p>If you have a directory called <code>databases</code> in the directory returned by <code>app.getPath('userData')</code>, it will be deleted when Electron 32 is first run. The <code>databases</code> directory was used by WebSQL, which was removed in Electron 31. Chromium now performs a cleanup that deletes this directory. See <a href="https://github.com/electron/electron/issues/45396" target="_blank" rel="noopener noreferrer" class="">issue #45396</a>.</p>
<h2 class="anchor anchorTargetStickyNavbar_Vzrq" id="end-of-support-for-29xy">End of Support for 29.x.y<a href="https://electronjs.org/blog/electron-32-0#end-of-support-for-29xy" class="hash-link" aria-label="Direct link to End of Support for 29.x.y" title="Direct link to End of Support for 29.x.y" translate="no">​</a></h2>
<p>Electron 29.x.y has reached end-of-support as per the project's <a href="https://www.electronjs.org/docs/latest/tutorial/electron-timelines#version-support-policy" target="_blank" rel="noopener noreferrer" class="">support policy</a>. Developers and applications are encouraged to upgrade to a newer version of Electron.</p>
<table><thead><tr><th>E32 (Aug'24)</th><th>E33 (Oct'24)</th><th>E34 (Jan'25)</th></tr></thead><tbody><tr><td>32.x.y</td><td>33.x.y</td><td>34.x.y</td></tr><tr><td>31.x.y</td><td>32.x.y</td><td>33.x.y</td></tr><tr><td>30.x.y</td><td>31.x.y</td><td>32.x.y</td></tr></tbody></table>
<h2 class="anchor anchorTargetStickyNavbar_Vzrq" id="whats-next">What's Next<a href="https://electronjs.org/blog/electron-32-0#whats-next" class="hash-link" aria-label="Direct link to What's Next" title="Direct link to What's Next" translate="no">​</a></h2>
<p>In the short term, you can expect the team to continue to focus on keeping up with the development of the major components that make up Electron, including Chromium, Node, and V8.</p>
<p>You can find <a href="https://www.electronjs.org/docs/latest/tutorial/electron-timelines" target="_blank" rel="noopener noreferrer" class="">Electron's public timeline here</a>.</p>
<p>More information about future changes can be found on the <a href="https://github.com/electron/electron/blob/main/docs/breaking-changes.md" target="_blank" rel="noopener noreferrer" class="">Planned Breaking Changes</a> page.</p>]]></content>
        <author>
            <name>VerteDinde</name>
            <uri>https://github.com/VerteDinde</uri>
        </author>
        <category label="Release" term="Release"/>
    </entry>
    <entry>
        <title type="html"><![CDATA[Electron 31.0.0]]></title>
        <id>https://electronjs.org/blog/electron-31-0</id>
        <link href="https://electronjs.org/blog/electron-31-0"/>
        <updated>2024-06-11T00:00:00.000Z</updated>
        <summary type="html"><![CDATA[Electron 31.0.0 has been released! It includes upgrades to Chromium 126.0.6478.36, V8 12.6, and Node 20.14.0.]]></summary>
        <content type="html"><![CDATA[<p>Electron 31.0.0 has been released! It includes upgrades to Chromium <code>126.0.6478.36</code>, V8 <code>12.6</code>, and Node <code>20.14.0</code>.</p>
<hr>
<p>The Electron team is excited to announce the release of Electron 31.0.0! You can install it with npm via <code>npm install electron@latest</code> or download it from our <a href="https://releases.electronjs.org/release?channel=stable" target="_blank" rel="noopener noreferrer" class="">releases website</a>. Continue reading for details about this release.</p>
<p>If you have any feedback, please share it with us on <a href="https://twitter.com/electronjs" target="_blank" rel="noopener noreferrer" class="">Twitter</a> or <a href="https://social.lfx.dev/@electronjs" target="_blank" rel="noopener noreferrer" class="">Mastodon</a>, or join our community <a href="https://discord.com/invite/electronjs" target="_blank" rel="noopener noreferrer" class="">Discord</a>! Bugs and feature requests can be reported in Electron's <a href="https://github.com/electron/electron/issues" target="_blank" rel="noopener noreferrer" class="">issue tracker</a>.</p>
<h2 class="anchor anchorTargetStickyNavbar_Vzrq" id="notable-changes">Notable Changes<a href="https://electronjs.org/blog/electron-31-0#notable-changes" class="hash-link" aria-label="Direct link to Notable Changes" title="Direct link to Notable Changes" translate="no">​</a></h2>
<ul>
<li class="">Extended <code>WebContentsView</code> to accept pre-existing <code>webContents</code> object. <a href="https://github.com/electron/electron/pull/42319" target="_blank" rel="noopener noreferrer" class="">#42319</a></li>
<li class="">Added support for <code>NODE_EXTRA_CA_CERTS</code>. <a href="https://github.com/electron/electron/pull/41689" target="_blank" rel="noopener noreferrer" class="">#41689</a></li>
<li class="">Updated window.flashFrame(bool) to flash continuously on macOS. <a href="https://github.com/electron/electron/pull/41391" target="_blank" rel="noopener noreferrer" class="">#41391</a></li>
<li class="">Removed <code>WebSQL</code> support <a href="https://github.com/electron/electron/pull/41868" target="_blank" rel="noopener noreferrer" class="">#41868</a></li>
<li class=""><code>nativeImage.toDataURL</code> will preserve PNG colorspace <a href="https://github.com/electron/electron/pull/41610" target="_blank" rel="noopener noreferrer" class="">#41610</a></li>
<li class="">Extended <code>webContents.setWindowOpenHandler</code> to support manual creation of BrowserWindow. <a href="https://github.com/electron/electron/pull/41432" target="_blank" rel="noopener noreferrer" class="">#41432</a></li>
</ul>
<h2 class="anchor anchorTargetStickyNavbar_Vzrq" id="stack-changes">Stack Changes<a href="https://electronjs.org/blog/electron-31-0#stack-changes" class="hash-link" aria-label="Direct link to Stack Changes" title="Direct link to Stack Changes" translate="no">​</a></h2>
<ul>
<li class="">Chromium<code>126.0.6478.36</code>
<ul>
<li class=""><a href="https://developer.chrome.com/blog/new-in-chrome-126/" target="_blank" rel="noopener noreferrer" class="">New in 126</a></li>
<li class=""><a href="https://developer.chrome.com/blog/new-in-chrome-125/" target="_blank" rel="noopener noreferrer" class="">New in 125</a></li>
</ul>
</li>
<li class="">Node <code>20.14.0</code>
<ul>
<li class=""><a href="https://nodejs.org/en/blog/release/v20.14.0/" target="_blank" rel="noopener noreferrer" class="">Node 20.14.0 blog post</a></li>
</ul>
</li>
<li class="">V8 <code>12.6</code></li>
</ul>
<p>Electron 31 upgrades Chromium from <code>124.0.6367.49</code> to <code>126.0.6478.36</code>, Node from <code>20.11.1</code> to <code>20.14.0</code>, and V8 from <code>12.4</code> to <code>12.6</code>.</p>
<h2 class="anchor anchorTargetStickyNavbar_Vzrq" id="new-features">New Features<a href="https://electronjs.org/blog/electron-31-0#new-features" class="hash-link" aria-label="Direct link to New Features" title="Direct link to New Features" translate="no">​</a></h2>
<ul>
<li class="">Added <code>clearData</code> method to <code>Session</code>. <a href="https://github.com/electron/electron/pull/40983" target="_blank" rel="noopener noreferrer" class="">#40983</a>
<ul>
<li class="">Added options parameter to <code>Session.clearData</code> API. <a href="https://github.com/electron/electron/pull/41355" target="_blank" rel="noopener noreferrer" class="">#41355</a></li>
</ul>
</li>
<li class="">Added support for Bluetooth ports being requested by service class ID in <code>navigator.serial</code>. <a href="https://github.com/electron/electron/pull/41638" target="_blank" rel="noopener noreferrer" class="">#41638</a></li>
<li class="">Added support for Node's <a href="https://nodejs.org/api/cli.html#node_extra_ca_certsfile" target="_blank" rel="noopener noreferrer" class=""><code>NODE_EXTRA_CA_CERTS</code></a> environment variable. <a href="https://github.com/electron/electron/pull/41689" target="_blank" rel="noopener noreferrer" class="">#41689</a></li>
<li class="">Extended <code>webContents.setWindowOpenHandler</code> to support manual creation of BrowserWindow. <a href="https://github.com/electron/electron/pull/41432" target="_blank" rel="noopener noreferrer" class="">#41432</a></li>
<li class="">Implemented support for the web standard <a href="https://developer.mozilla.org/en-US/docs/Web/API/File_System_API" target="_blank" rel="noopener noreferrer" class="">File System API</a>. <a href="https://github.com/electron/electron/pull/41419" target="_blank" rel="noopener noreferrer" class="">#41419</a></li>
<li class="">Extended <code>WebContentsView</code> to accept pre-existing <code>WebContents</code> instances. <a href="https://github.com/electron/electron/pull/42319" target="_blank" rel="noopener noreferrer" class="">#42319</a></li>
<li class="">Added a new instance property <code>navigationHistory</code> on webContents API with <code>navigationHistory.getEntryAtIndex</code> method, enabling applications to retrieve the URL and title of any navigation entry within the browsing history. <a href="https://github.com/electron/electron/pull/41577" target="_blank" rel="noopener noreferrer" class="">#41577</a> <sup>(Also in <a href="https://github.com/electron/electron/pull/41661" target="_blank" rel="noopener noreferrer" class="">29</a>, <a href="https://github.com/electron/electron/pull/41662" target="_blank" rel="noopener noreferrer" class="">30</a>)</sup></li>
</ul>
<h2 class="anchor anchorTargetStickyNavbar_Vzrq" id="breaking-changes">Breaking Changes<a href="https://electronjs.org/blog/electron-31-0#breaking-changes" class="hash-link" aria-label="Direct link to Breaking Changes" title="Direct link to Breaking Changes" translate="no">​</a></h2>
<h3 class="anchor anchorTargetStickyNavbar_Vzrq" id="removed-websql-support">Removed: <code>WebSQL</code> support<a href="https://electronjs.org/blog/electron-31-0#removed-websql-support" class="hash-link" aria-label="Direct link to removed-websql-support" title="Direct link to removed-websql-support" translate="no">​</a></h3>
<p>Chromium has removed support for WebSQL upstream, transitioning it to Android only. See
<a href="https://groups.google.com/a/chromium.org/g/blink-dev/c/fWYb6evVA-w/m/pziWcvboAgAJ" target="_blank" rel="noopener noreferrer" class="">Chromium's intent to remove discussion</a>
for more information.</p>
<h3 class="anchor anchorTargetStickyNavbar_Vzrq" id="behavior-changed-nativeimagetodataurl-will-preseve-png-colorspace">Behavior Changed: <code>nativeImage.toDataURL</code> will preseve PNG colorspace<a href="https://electronjs.org/blog/electron-31-0#behavior-changed-nativeimagetodataurl-will-preseve-png-colorspace" class="hash-link" aria-label="Direct link to behavior-changed-nativeimagetodataurl-will-preseve-png-colorspace" title="Direct link to behavior-changed-nativeimagetodataurl-will-preseve-png-colorspace" translate="no">​</a></h3>
<p>PNG decoder implementation has been changed to preserve colorspace data. The
encoded data returned from this function now matches it.</p>
<p>See <a href="https://issues.chromium.org/issues/332584706" target="_blank" rel="noopener noreferrer" class="">crbug.com/332584706</a> for more information.</p>
<h3 class="anchor anchorTargetStickyNavbar_Vzrq" id="behavior-changed-winflashframebool-will-flash-dock-icon-continuously-on-macos">Behavior Changed: <code>win.flashFrame(bool)</code> will flash dock icon continuously on macOS<a href="https://electronjs.org/blog/electron-31-0#behavior-changed-winflashframebool-will-flash-dock-icon-continuously-on-macos" class="hash-link" aria-label="Direct link to behavior-changed-winflashframebool-will-flash-dock-icon-continuously-on-macos" title="Direct link to behavior-changed-winflashframebool-will-flash-dock-icon-continuously-on-macos" translate="no">​</a></h3>
<p>This brings the behavior to parity with Windows and Linux. Prior behavior: The first <code>flashFrame(true)</code> bounces the dock icon only once (using the <a href="https://developer.apple.com/documentation/appkit/nsapplication/requestuserattentiontype/informationalrequest" target="_blank" rel="noopener noreferrer" class="">NSInformationalRequest</a> level) and <code>flashFrame(false)</code> does nothing. New behavior: Flash continuously until <code>flashFrame(false)</code> is called. This uses the <a href="https://developer.apple.com/documentation/appkit/nsapplication/requestuserattentiontype/criticalrequest" target="_blank" rel="noopener noreferrer" class="">NSCriticalRequest</a> level instead. To explicitly use <code>NSInformationalRequest</code> to cause a single dock icon bounce, it is still possible to use <a href="https://www.electronjs.org/docs/latest/api/dock#dockbouncetype-macos" target="_blank" rel="noopener noreferrer" class=""><code>dock.bounce('informational')</code></a>.</p>
<h2 class="anchor anchorTargetStickyNavbar_Vzrq" id="end-of-support-for-28xy">End of Support for 28.x.y<a href="https://electronjs.org/blog/electron-31-0#end-of-support-for-28xy" class="hash-link" aria-label="Direct link to End of Support for 28.x.y" title="Direct link to End of Support for 28.x.y" translate="no">​</a></h2>
<p>Electron 28.x.y has reached end-of-support as per the project's <a href="https://www.electronjs.org/docs/latest/tutorial/electron-timelines#version-support-policy" target="_blank" rel="noopener noreferrer" class="">support policy</a>. Developers and applications are encouraged to upgrade to a newer version of Electron.</p>
<table><thead><tr><th>E31 (Jun'24)</th><th>E32 (Aug'24)</th><th>E33 (Oct'24)</th></tr></thead><tbody><tr><td>31.x.y</td><td>32.x.y</td><td>33.x.y</td></tr><tr><td>30.x.y</td><td>31.x.y</td><td>32.x.y</td></tr><tr><td>28.x.y</td><td>29.x.y</td><td>31.x.y</td></tr></tbody></table>
<h2 class="anchor anchorTargetStickyNavbar_Vzrq" id="whats-next">What's Next<a href="https://electronjs.org/blog/electron-31-0#whats-next" class="hash-link" aria-label="Direct link to What's Next" title="Direct link to What's Next" translate="no">​</a></h2>
<p>In the short term, you can expect the team to continue to focus on keeping up with the development of the major components that make up Electron, including Chromium, Node, and V8.</p>
<p>You can find <a href="https://www.electronjs.org/docs/latest/tutorial/electron-timelines" target="_blank" rel="noopener noreferrer" class="">Electron's public timeline here</a>.</p>
<p>More information about future changes can be found on the <a href="https://github.com/electron/electron/blob/main/docs/breaking-changes.md" target="_blank" rel="noopener noreferrer" class="">Planned Breaking Changes</a> page.</p>]]></content>
        <author>
            <name>VerteDinde</name>
            <uri>https://github.com/VerteDinde</uri>
        </author>
        <category label="Release" term="Release"/>
    </entry>
    <entry>
        <title type="html"><![CDATA[Electron 30.0.0]]></title>
        <id>https://electronjs.org/blog/electron-30-0</id>
        <link href="https://electronjs.org/blog/electron-30-0"/>
        <updated>2024-04-16T00:00:00.000Z</updated>
        <summary type="html"><![CDATA[Electron 30.0.0 has been released! It includes upgrades to Chromium 124.0.6367.49, V8 12.4, and Node.js 20.11.1.]]></summary>
        <content type="html"><![CDATA[<p>Electron 30.0.0 has been released! It includes upgrades to Chromium <code>124.0.6367.49</code>, V8 <code>12.4</code>, and Node.js <code>20.11.1</code>.</p>
<hr>
<p>The Electron team is excited to announce the release of Electron 30.0.0! You can install it with npm via <code>npm install electron@latest</code> or download it from our <a href="https://releases.electronjs.org/release?channel=stable" target="_blank" rel="noopener noreferrer" class="">releases website</a>. Continue reading for details about this release.</p>
<p>If you have any feedback, please share it with us on <a href="https://twitter.com/electronjs" target="_blank" rel="noopener noreferrer" class="">Twitter</a> or <a href="https://social.lfx.dev/@electronjs" target="_blank" rel="noopener noreferrer" class="">Mastodon</a>, or join our community <a href="https://discord.com/invite/electronjs" target="_blank" rel="noopener noreferrer" class="">Discord</a>! Bugs and feature requests can be reported in Electron's <a href="https://github.com/electron/electron/issues" target="_blank" rel="noopener noreferrer" class="">issue tracker</a>.</p>
<h2 class="anchor anchorTargetStickyNavbar_Vzrq" id="notable-changes">Notable Changes<a href="https://electronjs.org/blog/electron-30-0#notable-changes" class="hash-link" aria-label="Direct link to Notable Changes" title="Direct link to Notable Changes" translate="no">​</a></h2>
<ul>
<li class="">ASAR Integrity fuse now supported on Windows (<a href="https://github.com/electron/electron/pull/40504" target="_blank" rel="noopener noreferrer" class="">#40504</a>)<!-- -->
<ul>
<li class="">Existing apps with ASAR Integrity enabled may not work on Windows if not configured correctly. Apps using Electron packaging tools should upgrade to <code>@electron/packager@18.3.1</code> or <code>@electron/forge@7.4.0</code>.</li>
<li class="">Take a look at our <a href="https://www.electronjs.org/docs/latest/tutorial/asar-integrity" target="_blank" rel="noopener noreferrer" class="">ASAR Integrity tutorial</a> for more information.</li>
</ul>
</li>
<li class="">Added <a href="https://www.electronjs.org/docs/latest/api/web-contents-view" target="_blank" rel="noopener noreferrer" class=""><code>WebContentsView</code></a> and <a href="https://www.electronjs.org/docs/latest/api/base-window" target="_blank" rel="noopener noreferrer" class=""><code>BaseWindow</code></a> main process modules, deprecating &amp; replacing <code>BrowserView</code> (<a href="https://github.com/electron/electron/pull/35658" target="_blank" rel="noopener noreferrer" class="">#35658</a>). Learn more about how to migrate from <code>BrowserView</code> to <code>WebContentsView</code> in <a class="" href="https://electronjs.org/blog/migrate-to-webcontentsview">this blog post</a>.<!-- -->
<ul>
<li class=""><code>BrowserView</code> is now a shim over <code>WebContentsView</code> and the old implementation has been removed.</li>
<li class="">See <a href="https://www.electronjs.org/docs/latest/tutorial/web-embeds" target="_blank" rel="noopener noreferrer" class="">our Web Embeds documentation</a> for a comparison of the new <code>WebContentsView</code> API to other similar APIs.</li>
</ul>
</li>
<li class="">Implemented support for the <a href="https://developer.mozilla.org/en-US/docs/Web/API/File_System_API" target="_blank" rel="noopener noreferrer" class="">File System API</a> (<a href="https://github.com/electron/electron/commit/cf1087badd437906f280373decb923733a8523e6" target="_blank" rel="noopener noreferrer" class="">#41827</a>)</li>
</ul>
<h2 class="anchor anchorTargetStickyNavbar_Vzrq" id="stack-changes">Stack Changes<a href="https://electronjs.org/blog/electron-30-0#stack-changes" class="hash-link" aria-label="Direct link to Stack Changes" title="Direct link to Stack Changes" translate="no">​</a></h2>
<ul>
<li class="">Chromium <code>124.0.6367.49</code>
<ul>
<li class="">New in <a href="https://developer.chrome.com/blog/new-in-chrome-124/" target="_blank" rel="noopener noreferrer" class="">Chrome 124</a> and in <a href="https://developer.chrome.com/blog/new-in-devtools-124/" target="_blank" rel="noopener noreferrer" class="">DevTools 124</a></li>
<li class="">New in <a href="https://developer.chrome.com/blog/new-in-chrome-123/" target="_blank" rel="noopener noreferrer" class="">Chrome 123</a> and in <a href="https://developer.chrome.com/blog/new-in-devtools-123/" target="_blank" rel="noopener noreferrer" class="">DevTools 123</a></li>
</ul>
</li>
<li class="">Node <code>20.11.1</code>
<ul>
<li class=""><a href="https://nodejs.org/en/blog/release/v20.11.1/" target="_blank" rel="noopener noreferrer" class="">Node 20.11.1 notes</a></li>
</ul>
</li>
<li class="">V8 <code>12.4</code></li>
</ul>
<p>Electron 30 upgrades Chromium from <code>122.0.6261.39</code> to <code>124.0.6367.49</code>, Node from <code>20.9.0</code> to <code>20.11.1</code>, and V8 from <code>12.2</code> to <code>12.4</code>.</p>
<h2 class="anchor anchorTargetStickyNavbar_Vzrq" id="new-features">New Features<a href="https://electronjs.org/blog/electron-30-0#new-features" class="hash-link" aria-label="Direct link to New Features" title="Direct link to New Features" translate="no">​</a></h2>
<ul>
<li class="">Added a <code>transparent</code> webpreference to webviews. (<a href="https://github.com/electron/electron/pull/40301" target="_blank" rel="noopener noreferrer" class="">#40301</a>)</li>
<li class="">Added a new instance property <code>navigationHistory</code> on webContents API with <code>navigationHistory.getEntryAtIndex</code> method, enabling applications to retrieve the URL and title of any navigation entry within the browsing history. (<a href="https://github.com/electron/electron/pull/41662" target="_blank" rel="noopener noreferrer" class="">#41662</a>)</li>
<li class="">Added new <code>BrowserWindow.isOccluded()</code> method to allow apps to check occlusion status. (<a href="https://github.com/electron/electron/pull/38982" target="_blank" rel="noopener noreferrer" class="">#38982</a>)</li>
<li class="">Added proxy configuring support for requests made with the <code>net</code> module from the utility process. (<a href="https://github.com/electron/electron/pull/41417" target="_blank" rel="noopener noreferrer" class="">#41417</a>)</li>
<li class="">Added support for Bluetooth ports being requested by service class ID in <code>navigator.serial</code>. (<a href="https://github.com/electron/electron/pull/41734" target="_blank" rel="noopener noreferrer" class="">#41734</a>)</li>
<li class="">Added support for the Node.js <a href="https://nodejs.org/api/cli.html#node_extra_ca_certsfile" target="_blank" rel="noopener noreferrer" class=""><code>NODE_EXTRA_CA_CERTS</code></a> CLI flag. (<a href="https://github.com/electron/electron/pull/41822" target="_blank" rel="noopener noreferrer" class="">#41822</a>)</li>
</ul>
<h2 class="anchor anchorTargetStickyNavbar_Vzrq" id="breaking-changes">Breaking Changes<a href="https://electronjs.org/blog/electron-30-0#breaking-changes" class="hash-link" aria-label="Direct link to Breaking Changes" title="Direct link to Breaking Changes" translate="no">​</a></h2>
<h3 class="anchor anchorTargetStickyNavbar_Vzrq" id="behavior-changed-cross-origin-iframes-now-use-permission-policy-to-access-features">Behavior Changed: cross-origin iframes now use Permission Policy to access features<a href="https://electronjs.org/blog/electron-30-0#behavior-changed-cross-origin-iframes-now-use-permission-policy-to-access-features" class="hash-link" aria-label="Direct link to Behavior Changed: cross-origin iframes now use Permission Policy to access features" title="Direct link to Behavior Changed: cross-origin iframes now use Permission Policy to access features" translate="no">​</a></h3>
<p>Cross-origin iframes must now specify features available to a given <code>iframe</code> via the <code>allow</code>
attribute in order to access them.</p>
<p>See <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe#allow" target="_blank" rel="noopener noreferrer" class="">documentation</a> for
more information.</p>
<h3 class="anchor anchorTargetStickyNavbar_Vzrq" id="removed-the---disable-color-correct-rendering-command-line-switch">Removed: The <code>--disable-color-correct-rendering</code> command line switch<a href="https://electronjs.org/blog/electron-30-0#removed-the---disable-color-correct-rendering-command-line-switch" class="hash-link" aria-label="Direct link to removed-the---disable-color-correct-rendering-command-line-switch" title="Direct link to removed-the---disable-color-correct-rendering-command-line-switch" translate="no">​</a></h3>
<p>This switch was never formally documented but its removal is being noted here regardless. Chromium itself now has better support for color spaces so this flag should not be needed.</p>
<h3 class="anchor anchorTargetStickyNavbar_Vzrq" id="behavior-changed-browserviewsetautoresize-behavior-on-macos">Behavior Changed: <code>BrowserView.setAutoResize</code> behavior on macOS<a href="https://electronjs.org/blog/electron-30-0#behavior-changed-browserviewsetautoresize-behavior-on-macos" class="hash-link" aria-label="Direct link to behavior-changed-browserviewsetautoresize-behavior-on-macos" title="Direct link to behavior-changed-browserviewsetautoresize-behavior-on-macos" translate="no">​</a></h3>
<p>In Electron 30, BrowserView is now a wrapper around the new <a href="https://www.electronjs.org/docs/latest/api/web-contents-view" target="_blank" rel="noopener noreferrer" class="">WebContentsView</a> API.</p>
<p>Previously, the <code>setAutoResize</code> function of the <code>BrowserView</code> API was backed by <a href="https://developer.apple.com/documentation/appkit/nsview/1483281-autoresizingmask?language=objc" target="_blank" rel="noopener noreferrer" class="">autoresizing</a> on macOS, and by a custom algorithm on Windows and Linux.
For simple use cases such as making a BrowserView fill the entire window, the behavior of these two approaches was identical.
However, in more advanced cases, BrowserViews would be autoresized differently on macOS than they would be on other platforms, as the custom resizing algorithm for Windows and Linux did not perfectly match the behavior of macOS's autoresizing API.
The autoresizing behavior is now standardized across all platforms.</p>
<p>If your app uses <code>BrowserView.setAutoResize</code> to do anything more complex than making a BrowserView fill the entire window, it's likely you already had custom logic in place to handle this difference in behavior on macOS.
If so, that logic will no longer be needed in Electron 30 as autoresizing behavior is consistent.</p>
<h3 class="anchor anchorTargetStickyNavbar_Vzrq" id="removed-paramsinputformtype-property-on-context-menu-on-webcontents">Removed: <code>params.inputFormType</code> property on <code>context-menu</code> on <code>WebContents</code><a href="https://electronjs.org/blog/electron-30-0#removed-paramsinputformtype-property-on-context-menu-on-webcontents" class="hash-link" aria-label="Direct link to removed-paramsinputformtype-property-on-context-menu-on-webcontents" title="Direct link to removed-paramsinputformtype-property-on-context-menu-on-webcontents" translate="no">​</a></h3>
<p>The <code>inputFormType</code> property of the params object in the <code>context-menu</code>
event from <code>WebContents</code> has been removed. Use the new <code>formControlType</code>
property instead.</p>
<h3 class="anchor anchorTargetStickyNavbar_Vzrq" id="removed-processgetiocounters">Removed: <code>process.getIOCounters()</code><a href="https://electronjs.org/blog/electron-30-0#removed-processgetiocounters" class="hash-link" aria-label="Direct link to removed-processgetiocounters" title="Direct link to removed-processgetiocounters" translate="no">​</a></h3>
<p>Chromium has removed access to this information.</p>
<h2 class="anchor anchorTargetStickyNavbar_Vzrq" id="end-of-support-for-27xy">End of Support for 27.x.y<a href="https://electronjs.org/blog/electron-30-0#end-of-support-for-27xy" class="hash-link" aria-label="Direct link to End of Support for 27.x.y" title="Direct link to End of Support for 27.x.y" translate="no">​</a></h2>
<p>Electron 27.x.y has reached end-of-support as per the project's <a href="https://www.electronjs.org/docs/latest/tutorial/electron-timelines#version-support-policy" target="_blank" rel="noopener noreferrer" class="">support policy</a>. Developers and applications are encouraged to upgrade to a newer version of Electron.</p>
<table><thead><tr><th>E30 (Apr'24)</th><th>E31 (Jun'24)</th><th>E32 (Aug'24)</th></tr></thead><tbody><tr><td>30.x.y</td><td>31.x.y</td><td>32.x.y</td></tr><tr><td>29.x.y</td><td>30.x.y</td><td>31.x.y</td></tr><tr><td>28.x.y</td><td>29.x.y</td><td>30.x.y</td></tr></tbody></table>
<h2 class="anchor anchorTargetStickyNavbar_Vzrq" id="whats-next">What's Next<a href="https://electronjs.org/blog/electron-30-0#whats-next" class="hash-link" aria-label="Direct link to What's Next" title="Direct link to What's Next" translate="no">​</a></h2>
<p>In the short term, you can expect the team to continue to focus on keeping up with the development of the major components that make up Electron, including Chromium, Node, and V8.</p>
<p>You can find <a href="https://www.electronjs.org/docs/latest/tutorial/electron-timelines" target="_blank" rel="noopener noreferrer" class="">Electron's public timeline here</a>.</p>
<p>More information about future changes can be found on the <a href="https://github.com/electron/electron/blob/main/docs/breaking-changes.md" target="_blank" rel="noopener noreferrer" class="">Planned Breaking Changes</a> page.</p>]]></content>
        <author>
            <name>clavin</name>
            <uri>https://github.com/clavin</uri>
        </author>
        <author>
            <name>VerteDinde</name>
            <uri>https://github.com/VerteDinde</uri>
        </author>
        <category label="Release" term="Release"/>
    </entry>
</feed>