Saltar al contenido principal

Tech Talk: Improving Window Resize Behavior

· 16 lectura mínima

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!


Recently, I worked on improving Electron and Chromium's window resize behavior.

The bug

We were seeing an issue on Windows where old frames would become visible while resizing a window:

Animated GIF showing the issue where old frames would be shown while resizing windows

What made this bug particularly interesting?

  1. It was challenging.
  2. It was deep in a large codebase.
  3. As you'll see later, there were two different bugs under the hood.

Fixing the bug

With a bug like this, the first challenge is figuring out where to start looking.

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.

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.

Mes tranquilo de diciembre (Dic '25)

· 3 lectura mínima

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.

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.

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. ❤️

Electron 39.0.0

· 4 lectura mínima

¡Electron 39.0.0 ha sido liberado! It includes upgrades to Chromium 142.0.7444.52, V8 14.2, and Node 22.20.0.


El equipo de Electron esta emocionado de anunciar el lanzamiento de Electron 39.0.0! You can install it with npm via npm install electron@latest or download it from our releases website. Continue reading for details about this release.

If you have any feedback, please share it with us on Bluesky or Mastodon, or join our community Discord! Bugs and feature requests can be reported in Electron's issue tracker.

Notable Changes

ASAR Integrity graduates to stable

A long-standing "experimental" feature -- ASAR integrity -- is now stable in Electron 39. When you enable this feature, it validates your packaged app.asar 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.

See the ASAR integrity documentation 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.

In related news, Electron Packager v19 now enables ASAR by default. #1841

Electron 38.0.0

· 5 lectura mínima

¡Electron 38.0.0 ha sido liberado! It includes upgrades to Chromium 140.0.7339.41, V8 14.0, and Node 22.16.0.


El equipo de Electron esta emocionado de anunciar el lanzamiento de Electron 38.0.0! You can install it with npm via npm install electron@latest or download it from our releases website. Continue reading for details about this release.

If you have any feedback, please share it with us on Bluesky or Mastodon, or join our community Discord! Bugs and feature requests can be reported in Electron's issue tracker.

Electron 37.0.0

· 7 lectura mínima

¡Electron 37.0.0 ha sido liberado! It includes upgrades to Chromium 138, V8 13.8, and Node 22.16.0.


El equipo de Electron esta emocionado de anunciar el lanzamiento de Electron 37.0.0! You can install it with npm via npm install electron@latest or download it from our releases website. Continue reading for details about this release.

If you have any feedback, please share it with us on Bluesky or Mastodon, or join our community Discord! Bugs and feature requests can be reported in Electron's issue tracker.

Google Summer of Code Begins

Our two Google Summer of Code contributors have started the program's coding period!

  • @nilayarya is crafting a new Save/Restore Window State API 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 electron/rfcs#16.
  • @hitarth-gg is hard at work modernizing the long-dormant Devtron 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.

It has been an exciting couple of weeks for our GSOC participants, so stay tuned for more updates!

Notable Changes

Smooth Corners: Native CSS Squircles

An image showing different corner smoothing values (0%, 30%, 60%, and 100%) applied to rectangles, with 60% labeled as matching macOS style

Electron 37 introduces the custom -electron-corner-smoothing 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.

Example with 100% Corner Smoothing

CódigoResultado
.box {
width: 128px;
height: 128px;
border-radius: 24px;
-electron-corner-smoothing: 100%;
}

Unlike the standard border-radius property, which carves quarter-circle corners out of a rectangle, -electron-corner-smoothing smoothly transitions the curve into a squircle shape with a continuous perimeter.

You can adjust the smoothness using values from 0% to 100%, or use the system-ui 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.

tip

Read more about Electron's squircle implementation in @clavin's RFC 0012. The document goes over the motivation and technical implementation in more detail.

The initial design drew inspiration from Figma's corner smoothing implementation. Read more about their own quest for smooth corners in "Desperately seeking squircles".

Electron 36.0.0

· 5 lectura mínima

¡Electron 36.0.0 ha sido liberado! It includes upgrades to Chromium 136, V8 13.6, and Node 22.14.0.


El equipo de Electron esta emocionado de anunciar el lanzamiento de Electron 36.0.0! You can install it with npm via npm install electron@latest or download it from our releases website. Continue reading for details about this release.

If you have any feedback, please share it with us on Bluesky or Mastodon, or join our community Discord! Bugs and feature requests can be reported in Electron's issue tracker.

Notable Changes

Writing Tools Support

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 WebFrameMain instance into the frame parameter for menu.popup().

import { BrowserWindow, Menu, WebFrameMain } from 'electron';

const currentWindow = BrowserWindow.getFocusedWindow();
const focusedFrame = currentWindow.webContents.focusedFrame;
const menu = Menu.buildFromTemplate([{ label: 'Copy', role: 'copy' }]);

menu.popup({
window: currentWindow,
frame: focusedFrame,
});

Electron 35.0.0

· 6 lectura mínima

¡Electron 35.0.0 ha sido liberado! It includes upgrades to Chromium 134.0.6998.44, V8 13.5, and Node 22.14.0.


El equipo de Electron esta emocionado de anunciar el lanzamiento de Electron 35.0.0! You can install it with npm via npm install electron@latest or download it from our releases website. Continue reading for details about this release.

If you have any feedback, please share it with us on Bluesky or Mastodon, or join our community Discord! Bugs and feature requests can be reported in Electron's issue tracker.

Notable Changes

Service Worker Preload Scripts for Improved Extensions Support

Originally proposed in RFC #8 by @samuelmaddock, Electron 35 adds the ability to attach a preload script to Service Workers. With Chrome's Manifest V3 Extensions routing a lot of work through extension service workers, this feature fills in a gap in Electron's support for modern Chrome extensions.

When registering a preload script programmatically at the Session level, you can now specifically apply it to Service Worker contexts with the ses.registerPreloadScript(script) API.

Main Process
// Add our preload realm script to the session.
session.defaultSession.registerPreloadScript({
// Our script should only run in service worker preload realms.
type: 'service-worker',
// The absolute path to the script.
script: path.join(__dirname, 'extension-sw-preload.js'),
});

Furthermore, IPC is now available between Service Workers and their attached preload scripts via the ServiceWorkerMain.ipc class. The preload script will still use the ipcRenderer module to communicate with its Service Worker. See the original RFC for more details.

This feature was preceded by many other changes that laid the groundwork for it:

  • #45329 redesigned the Session module's preload APIs to support registering and unregistering individual preload scripts.
  • #45229 added the experimental contextBridge.executeInMainWorld(executionScript) script to evaluate JavaScript in the main world over the context bridge.
  • #45341 added the ServiceWorkerMain class to interact with Service Workers in the main process.

Verano del Código de Google 2025

· 6 lectura mínima

¡Electron ha sido aceptado una vez más como una organización mentora para Google Summer of Code (GSoC) 2025! Google Summer of Code es un programa global centrado en traer nuevos colaboradores al desarrollo de software de código abierto.

Para obtener más detalles del programa, consulta la página de inicio de Summer of Code.

Sobre nosotros

Electron es un framework JavaScript para construir aplicaciones multiplataforma de escritorio usando tecnologías web. El framework central de Electron es un ejecutable binario compilado construido con Chromium y Node.js, y está escrito principalmente en C++.

Fuera del repositorio de Electron también mantenemos varios proyectos para apoyar el ecosistema Electron incluyendo:

Como colaborador de Summer of Code, estarías colaborando con algunos de los principales colaboradores de Electron en uno de los muchos proyectos bajo el paraguas github.com/electron.

Antes de aplicar

Si no estás muy familiarizado con Electron, te recomendamos que comiences leyendo la documentación y probando ejemplos en Electron Fiddle.

Para obtener más información sobre la distribución de aplicaciones de Electron intente crear una aplicación de ejemplo con Electron Forge:

npm init electron-app@latest my-app

Después de familiarizarte un poco con el código, ven a unirte a la conversación en el Servidor de Discord de Electron.

info

Si esta es tu primera participación en Google Summer of Code o si eres nuevo en código abierto en general recomendamos leer la [Guía de colaboradores](https://google. ithub.io/gsocguides/student/) como un primer paso antes de comprometerse con la comunidad.

Colaboraciones del proyecto

Le animamos a que eche un vistazo a cualquier repositorio que sea relevante para las ideas de proyectos que le interesen. Una forma de hacer su investigación es hacer contribuciones reportando errores, clasificando problemas existentes, o enviando pull requests. Hacerlo es una forma efectiva de adquirir experiencia práctica con nuestras bases de código, pero no es obligatorio para enviar propuestas. Una propuesta bien elaborada debe ser capaz de demostrar su conocimiento del código sin necesidad de referirse a contribuciones anteriores.

Estos son algunas recomendaciones si está buscando contribuir con Electron antes de enviar su propuesta:

  1. Sírvanse proporcionar un problema descriptivo o descripciones de relaciones públicas al enviar contribuciones. Independientemente del código en sí, dedicar esfuerzo a la parte escrita de una contribución nos demuestra que puedes ser un comunicador eficaz en un entorno colaborativo.
  2. Los PR son siempre bienvenidos para las cuestiones abiertas. No es necesario que comentes un problema preguntándole a un mantenedor si se te puede asignar la tarea. Tenga en cuenta que aún le animamos a discutir posibles soluciones sobre un problema si necesita refinar una idea para una solución, pero comentarios estrictamente preguntando si puedes trabajar en algo son redundantes y añadir ruido al gestor de incidencias.
  3. Contribuciones de proyectos de bajo esfuerzo (p. ej. informes de incidencias no válidos, términos triviales cambios en un README, o cambios estilísticos menores en el código front-end) impactará negativamente su propuesta final, ya que ocupan tiempo limitado de mantenedor y no proporcionan ningún beneficio neto al proyecto Electron.
  4. Mientras que los asistentes de codificación de IA pueden ser una herramienta eficaz para depurar y entender nuevos conceptos, desanimamos enormemente las contribuciones que se copian/pegan directamente de la salida generada por la IA. Estas a menudo resultan de baja calidad. y a menudo es más esfuerzo para los mantenedores limpiar el código generado a partir de un LLM que rechazar completamente una PR.

Artesanos de su propuesta

¿Estás interesado en colaborar con Electron? Primero, revisa los siete borradores de ideas del proyecto que hemos preparado. Todas las ideas de la lista están actualmente abiertas a propuestas.

Si tienes una idea única que no está en la lista, estamos abiertos a considerarla, pero asegúrate de que tu propuesta esté detallada y detallada. En caso de duda, le recomendamos que se aferre a nuestras ideas listadas.

Su solicitud debe incluir:

  • Una propuesta detallada en la que se esboza lo que se pretende conseguir durante el verano.
  • Su experiencia como desarrollador. Si tiene un currículum, por favor incluya una copia. De lo contrario, cuéntanos tu experiencia técnica pasada.
    • La falta de experiencia en ciertas áreas no te descalificará, pero ayudará a nuestros mentores a elaborar un plan para ayudarte mejor y asegurarte de que tu proyecto de verano sea un éxito.

Aquí está una guía detallada de qué enviar como parte de tu aplicación Electron. Presenta propuestas directamente al portal de Google Summer of Code. Las propuestas enviadas al equipo Electron no serán consideradas como propuestas finales.

Si desea más orientación sobre su propuesta o no está seguro de qué incluir, también recomendamos que sigas [la propuesta oficial de Google Summer of Code escribiendo consejos aquí](https://google. ithub.io/gsocguides/student/writing-a-proposal).

Aplicaciones abiertas el 24 de marzo de 2025 y cierran el 8 de abril de 2025.

Últimas propuestas de proyectos

📚 Para GSoC 2024, @piotrpdev, trabajó en añadir historial de API a la documentación del núcleo de Electron. Para ver en qué trabajó Piotr durante su verano con Electron, lea su informe en 2024 GSoC program archives.

🔐 Para GSoC 2022, @aryanshridhar trabajó en habilitar el aislamiento de contexto en Electron Fiddle. Si quieres ver en qué trabajó Aryan durante su verano con Electron, puedes leer su informe en [2022 GSoC program archives](https://summerofcode. ithgoogle.com/archive/2022/organizations/electron).

¿Preguntas?

Si tienes preguntas que no enviamos en las publicaciones del blog o consultas para tu borrador de propuestas, por favor envíanos un correo electrónico a Summer-of-code@electronjs. rg o revisa GSoC FAQ. Por favor, lee nuestra guía de colaborador antes de enviar un correo electrónico.

Recursos

Electron 34.0.0

· 4 lectura mínima

¡Electron 34.0.0 ha sido liberado! It includes upgrades to Chromium 132.0.6834.83, V8 13.2, and Node 20.18.1.


El equipo de Electron esta emocionado de anunciar el lanzamiento de Electron 34.0.0! You can install it with npm via npm install electron@latest or download it from our releases website. Continue reading for details about this release.

If you have any feedback, please share it with us on Bluesky or Mastodon, or join our community Discord! Bugs and feature requests can be reported in Electron's issue tracker.

Notable Changes

HTTP Compression Shared Dictionary Management APIs

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.

Custom shared dictionaries further improve the efficiency of Brotli and Zstandard compression. See the Chrome for Developers blog on shared dictionaries for more information.

@felixrieseberg added the following APIs in #44950 to manage shared dictionaries at the Session level:

  • session.getSharedDictionaryUsageInfo()
  • session.getSharedDictionaryInfo(options)
  • session.clearSharedDictionaryCache()
  • session.clearSharedDictionaryCacheForIsolationKey(options)

Unresponsive Renderer JavaScript Call Stacks

Electron's unresponsive event occurs whenever a renderer process hangs for an excessive period of time. The new WebFrameMain.collectJavaScriptCallStack() API added by @samuelmaddock in #44204 allows you to collect the JavaScript call stack from the associated WebFrameMain object (webContnets.mainFrame).

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 proposed web standard Crash Reporting API.

Main Process
const { app } = require('electron');

app.commandLine.appendSwitch(
'enable-features',
'DocumentPolicyIncludeJSCallStacksInCrashReports',
);

app.on('web-contents-created', (_, webContents) => {
webContents.on('unresponsive', async () => {
// Interrupt execution and collect call stack from unresponsive renderer
const callStack = await webContents.mainFrame.collectJavaScriptCallStack();
console.log('Renderer unresponsive\n', callStack);
});
});
advertencia

This API requires the 'Document-Policy': 'include-js-call-stacks-in-crash-reports' header to be enabled. See #45356 for more details.

Moving our Ecosystem to Node 22

· 2 lectura mínima

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.


What does this mean?

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.

Over time, using Node.js 14 as our minimum version has become increasingly difficult for a few reasons:

  • Lack of official Node.js 14 macOS ARM64 builds requires us to maintain CI infrastructure workarounds to provide full test coverage.
  • engines requirements for upstream package dependencies have moved forward, making it increasingly difficult to resolve supply chain security issues with dependency bumps.

Additionally, newer versions of Node.js have included many improvements that we would like to leverage, such as runtime-native common utilities (e.g. fs.glob and util.parseArgs) and entire new batteries-included modules (e.g. node:test, node:sqlite).

Why upgrade now?

In July 2024, Electron’s Ecosystem Working Group decided to upgrade all packages to the earliest Node version where require()of synchronous ESM graphs will be supported (see nodejs/node#51977 and nodejs/node#53500) at a future point after that version reaches its LTS date.

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.

What action do I need to take?

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.

Note that the Node version running in your project is unrelated to the Node version embedded into your current version of Electron.

What's next

Please feel free to write to us at info@electronjs.org if you have any questions or concerns. You can also find community support in our official Electron Discord.