Electron 37.0.0 已发布！它包括对 Chromium 138、V8 13.8 和 Node 22.16.0 的升级。

🌐 Electron 37.0.0 has been released! It includes upgrades to Chromium 138, V8 13.8, and Node 22.16.0.

Electron 团队很高兴地宣布发布 Electron 37.0.0！你可以通过 npm 使用 npm install electron@latest 安装，或从我们的发布网站下载。请继续阅读以了解此次发布的详细信息。

🌐 The Electron team is excited to announce the release of 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.

如果你有任何反馈，请通过 Bluesky 或 Mastodon 与我们分享，或者加入我们的社区 Discord！可以在 Electron 的 问题追踪器 报告漏洞和功能请求。

🌐 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 开始​

🌐 Google Summer of Code Begins

我们两位 Google Summer of Code 贡献者已经开始了该项目的编码阶段！

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

• @nilayarya 正在 Electron 核心中开发一个新的 保存/恢复窗口状态 API。新的 API 将提供一种内置的、标准化的方式来处理窗口状态的持久化。详见 Nilay 正在进行中的 RFC：electron/rfcs#16。
• @hitarth-gg 正在努力使用 Chrome Manifest V3 API 现代化长期未活跃的 Devtron 扩展。该项目将为开发者提供工具，以调试 IPC 通信、跟踪事件监听器，并可视化他们的 Electron 应用中的模块依赖。

对于我们的 GSOC 参与者来说，这几周是令人兴奋的，敬请期待更多更新！

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

显著变化​

🌐 Notable Changes

圆角平滑：原生 CSS Squircle​

🌐 Smooth Corners: Native CSS Squircles

Electron 37 引入了自定义 -electron-corner-smoothing CSS 属性，这使应用能够创建更平滑的圆角，以匹配苹果 macOS 的设计风格。这个功能最初是在 Electron 36 中推出的，但我们觉得它值得获得更多关注。

🌐 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.

100% 圆角平滑示例

代码	结果
.box { width: 128px; height: 128px; border-radius: 24px; -electron-corner-smoothing: 100%; }

与标准的 border-radius 属性不同，它会从矩形上切出四分之一圆角，-electron-corner-smoothing 会将曲线平滑地过渡为具有连续周长的 方形圆 形状。

🌐 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.

你可以使用 0% 到 100% 的数值来调整平滑度，或者使用 system-ui 值以匹配操作系统的风格（macOS 上为 60%，其他系统为 0%）。 这一设计增强可以应用于边框、轮廓和阴影，为你的应用增添一层细腻的精致感。

🌐 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.

Electron 36.0.0 已发布！它包括对 Chromium 136、V8 13.6 和 Node 22.14.0 的升级。

🌐 Electron 36.0.0 has been released! It includes upgrades to Chromium 136, V8 13.6, and Node 22.14.0.

Electron 团队很高兴地宣布发布 Electron 36.0.0！你可以通过 npm 使用 npm install electron@latest 安装，或从我们的发布网站下载。请继续阅读以了解此次发布的详细信息。

🌐 The Electron team is excited to announce the release of 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.

如果你有任何反馈，请通过 Bluesky 或 Mastodon 与我们分享，或者加入我们的社区 Discord！可以在 Electron 的 问题追踪器 报告漏洞和功能请求。

🌐 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

在 Electron 36 中，你可以在上下文菜单中启用 macOS 系统级功能，例如写作工具（拼写和语法检查）、自动填充以及服务菜单项。要实现此功能，请将一个 WebFrameMain 实例传入 menu.popup() 的 frame 参数中。

🌐 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 已发布！它包括对 Chromium 134.0.6998.44、V8 13.5 和 Node 22.14.0 的升级。

🌐 Electron 35.0.0 has been released! It includes upgrades to Chromium 134.0.6998.44, V8 13.5, and Node 22.14.0.

Electron 团队很高兴地宣布发布 Electron 35.0.0！你可以通过 npm 使用 npm install electron@latest 安装，或从我们的发布网站下载。请继续阅读以了解此次发布的详细信息。

🌐 The Electron team is excited to announce the release of 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.

如果你有任何反馈，请通过 Bluesky 或 Mastodon 与我们分享，或者加入我们的社区 Discord！可以在 Electron 的 问题追踪器 报告漏洞和功能请求。

🌐 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 预加载脚本，用于改进扩展支持​

🌐 Service Worker Preload Scripts for Improved Extensions Support

最初由 @samuelmaddock 在 RFC #8 中提出，Electron 35 增加了向 服务工作者 附加预加载脚本的能力。随着 Chrome 的 Manifest V3 扩展将大量工作通过 扩展服务工作者 路由，这一功能填补了 Electron 对现代 Chrome 扩展支持的空白。

🌐 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.

在会话级别以编程方式注册预加载脚本时，现在可以使用 ses.registerPreloadScript(script) API 将其专门应用于服务工作线程上下文。

🌐 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.

// 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'),
});

此外，现在可以通过 ServiceWorkerMain.ipc 类在 Service Workers 与其附加的预加载脚本之间进行 IPC。预加载脚本仍将使用 ipcRenderer 模块与其 Service Worker 通信。更多详细信息请参阅原始 RFC。

🌐 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 重新设计了 Session 模块的预加载 API，以支持注册和注销单个预加载脚本。
• #45229 添加了实验性的 contextBridge.executeInMainWorld(executionScript) 脚本，用于通过上下文桥在主世界中评估 JavaScript。
• #45341 在主进程中添加了 ServiceWorkerMain 类以与服务工作者进行交互。

Electron 再次被接受为 2025 年 Google 夏季编程（GSoC）的指导组织！ Google 夏季编程是一个全球性项目，旨在吸引新的贡献者参与开源软件开发。

🌐 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.

有关该项目的更多详情，请访问 Google 的 夏季编程计划主页。

🌐 For more details about the program, visit Google’s Summer of Code homepage.

关于我们​

🌐 About us

Electron 是一个 JavaScript 框架，用于使用网页技术构建跨平台桌面应用。核心的 Electron 框架是一个使用 Chromium 和 Node.js 构建的编译二进制可执行文件，并且主要用 C++ 编写。

🌐 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 Chromium and Node.js, and is mostly written in C++.

除了 Electron 核心代码库之外，我们还维护着几个支持 Electron 生态系统的项目，包括：

🌐 Outside of the Electron core repository, we also maintain several projects to support the Electron ecosystem, including:

• 面向终端用户分发的工具（例如 Electron Forge 和 update.electronjs.org）。
• 针对 Electron 开发者的学习资料（例如 electronjs.org 和 Electron Fiddle）。
• 用于提升开发者生产力的内部工具（例如 Electron Build Tools 和 Sheriff）。

作为 GSoC 贡献者，你将有机会与 Electron 的一些核心贡献者合作，参与 github.com/electron 旗下的众多项目之一。

🌐 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 github.com/electron umbrella.

应用前​

🌐 Before applying

如果你对 Electron 不是很熟悉，我们建议你先阅读文档，并尝试一些Electron Fiddle中的示例。

🌐 If you aren’t very familiar with Electron, we would recommend you start by reading the documentation and trying out some of the examples in Electron Fiddle.

要了解更多关于分发 Electron 应用的信息，可以尝试使用 Electron Forge 创建一个示例应用：

🌐 To learn more about distributing Electron apps, try creating a sample application with Electron Forge:

npm init electron-app@latest my-app

在稍微熟悉了代码之后，来加入 Electron Discord 服务器 上的讨论吧。

🌐 After familiarizing yourself with the code a bit, come join the conversation on the Electron Discord server.

项目贡献​

🌐 Project contributions

我们鼓励你查看与你感兴趣的项目想法相关的任何代码库。进行研究的一种方式是通过报告错误、分类现有问题或提交拉取请求来做出贡献。这样做是获取我们代码库实践经验的有效方法，但提交提案并非强制要求。一个精心撰写的提案应该能够展示你对代码的理解，而无需参考以往的贡献。

🌐 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.

如果你打算在提交提案之前为 Electron 做贡献，这里有一些小建议：

🌐 Here are a few tips if you are looking to contribute to Electron before submitting your proposal:

1. 在提交贡献时，请提供详细的问题或拉取请求描述。无论代码本身如何，对贡献的书面部分投入精力，都能向我们展示你在协作环境中是一个有效的沟通者。
2. 对于开放的问题，我们一直欢迎提交 PR。你不需要评论某个问题来询问维护者是否可以被分配给你。请注意，如果你需要完善解决方案的想法，我们仍然鼓励你在问题上讨论潜在的解决方案，但仅仅询问是否可以处理某件事的评论是多余的，会增加问题追踪器的噪音。
3. 低投入的项目贡献（例如无效的问题报告、仓库 README 中微不足道的措辞修改，或前端代码的轻微样式更改）会对你的最终提案产生负面影响，因为它们占用有限的维护者时间，并且对 Electron 项目没有任何净收益。
4. 虽然 AI 编程助手可以成为调试和理解新概念的有效工具，但我们强烈不建议直接复制/粘贴 AI 生成的内容作为贡献。这类内容往往质量较低，而且维护者清理由大语言模型生成的代码通常比我们直接拒绝一个 PR 要费更多力气。

制定你的提案​

🌐 Crafting your proposal

有兴趣与 Electron 合作吗？首先，查看我们准备的七个项目创意草案。所有列出的创意都开放接受提案。

🌐 Interested in collaborating with Electron? First, check out the seven project idea drafts we have prepared. All listed ideas are open for proposals.

如果你有列表中没有的独特想法，我们愿意考虑，但请确保你的提案详细且全面说明。如有疑问，我们建议遵循我们列出的创意。

🌐 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.

你的应用应包含：

🌐 Your application should include:

• 一份详细的提案，概述了你计划在夏季实现的目标。
• 作为开发者的背景。如果你有简历，请附上副本。否则，请告诉我们你过去的技术经验。
  • 在某些字段缺乏经验并不会让你失去资格，但这将帮助我们的导师制定一个计划，以最好地支持你，并确保你的暑期项目取得成功。

有关作为 Electron 应用提交内容的详细指南请参阅此处。请直接将提案提交到 Google Summer of Code 门户。通过Electron邮件发送给 Electron 团队的提案将不被视为最终提交。

关于你的提案的更多指导，我们建议你遵循此处的官方 Google 夏季编码提案撰写建议。

🌐 For more guidance on your proposal, we recommend you follow the official Google Summer of Code proposal writing advice here.

申请于2025年3月24日开始，2025年4月8日截止。

🌐 Applications open on March 24th, 2025 and close on April 8th, 2025.

有问题吗？​

🌐 Questions?

如果你有我们在这篇博客文章中未涉及的问题，或关于你的提案草稿的咨询，请发送Electron邮件至 summer-of-code@electronjs.org 或查看 GSoC 常见问题。在发送Electron邮件之前，请阅读 我们的贡献者指南。

🌐 If you have questions we didn’t address in this blog post or inquiries about your proposal draft, please send us an email at summer-of-code@electronjs.org or check the GSoC FAQ. Please read our contributor guidance before emailing.

资源​

🌐 Resources

• Electron 2025 谷歌夏季编程项目创意列表
• Electron 2025 谷歌夏季编程项目贡献者指南
• Google 夏季编程学生/贡献者指南

Electron 34.0.0 已发布！它包括对 Chromium 132.0.6834.83、V8 13.2 和 Node 20.18.1 的升级。

🌐 Electron 34.0.0 has been released! It includes upgrades to Chromium 132.0.6834.83, V8 13.2, and Node 20.18.1.

Electron 团队很高兴地宣布发布 Electron 34.0.0！你可以通过 npm 使用 npm install electron@latest 安装，或从我们的发布网站下载。请继续阅读以了解此次发布的详细信息。

🌐 The Electron team is excited to announce the release of 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.

如果你有任何反馈，请通过 Bluesky 或 Mastodon 与我们分享，或者加入我们的社区 Discord！可以在 Electron 的 问题追踪器 报告漏洞和功能请求。

🌐 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 压缩共享字典管理 API​

🌐 HTTP Compression Shared Dictionary Management APIs

HTTP 压缩允许 Web 服务器在浏览器接收数据之前对数据进行压缩。现代版本的 Chromium 支持 Brotli 和 Zstandard，这些是新的压缩算法，对于文本文件的压缩效果比旧的方案如 gzip 更好。

🌐 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.

自定义共享字典可以进一步提高 Brotli 和 Zstandard 压缩的效率。有关更多信息，请参阅 Chrome 开发者博客关于共享字典的文章。

🌐 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 在 #44950 中添加了以下 API，以在会话级别管理共享字典：

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

无响应的渲染器 JavaScript 调用堆栈​

🌐 Unresponsive Renderer JavaScript Call Stacks

Electron 的 unresponsive 事件会在渲染进程长时间挂起时触发。@samuelmaddock 在 #44204 中新增的 WebFrameMain.collectJavaScriptCallStack() API 允许你从相关的 WebFrameMain 对象 (webContnets.mainFrame) 收集 JavaScript 调用堆栈。

🌐 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).

当存在长时间运行的 JavaScript 事件导致进程挂起时，这个 API 可以用来确定为什么帧无响应。有关更多信息，请参阅提议中的网页标准崩溃报告 API。

🌐 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.

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);
  });
});

在2025年初，Electron 的 npm 生态系统仓库（位于 @electron/ 和 @electron-forge/ 命名空间下）将迁移至 Node.js 22 作为最低支持版本。

🌐 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?

过去，Electron 的 npm 生态系统中的包（Forge、Packager 等）会尽可能支持 Node 版本，即使某个版本已经达到其生命周期终止（EOL）日期。这么做是为了确保我们的生态系统不会分裂——我们理解许多项目依赖于旧版本的 Node，而且除非有迫切的升级原因，否则我们不想让这些项目陷入困境。

🌐 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.

随着时间的推移，使用 Node.js 14 作为我们的最低版本变得越来越困难，原因如下：

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

• 由于缺乏官方的 Node.js 14 macOS ARM64 版本，我们需要维护持续集成 (CI) 基础设施解决方案，以提供全面的测试覆盖。
• engines 对上游软件包依赖的要求已经向前推进，这使得通过升级依赖来解决供应链安全问题变得越来越困难。

此外，较新的 Node.js 版本包含了许多我们希望利用的改进，例如运行时原生的常用工具（如 fs.glob 和 util.parseArgs）以及全新的内置模块（如 node:test、node:sqlite）。

🌐 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?

2024年7月，Electron的生态系统工作组决定将所有包升级到支持同步ESM图的最早Node版本（参见nodejs/node#51977 和 nodejs/node#53500），该升级将在该版本达到其长期支持（LTS）日期之后的某个时间点进行。

🌐 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.

我们已决定将更新的时间定在 2025 年一月/二月。在此次升级之后，节点 22 将成为现有生态系统包中支持的最低版本。

🌐 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?

我们将尽力保持最大的兼容性。不过，为了确保最佳支持，我们建议你将应用升级到 Node 22 或更高版本。

🌐 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.

请注意，你项目中运行的 Node 版本与你当前 Electron 版本中嵌入的 Node 版本无关。

🌐 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

如果你有任何问题或疑虑，请随时通过 info@electronjs.org 与我们联系。你也可以在我们的官方 Electron Discord 社区中寻求支持。

🌐 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.

Electron 项目将在 2024 年 12 月暂停，然后在 2025 年 1 月恢复全速运行。

🌐 The Electron project will pause for the month of December 2024, then return to full speed in January 2025.

via GIPHY

12 月会有什么相同之处？​

🌐 What will be the same in December

1. 零日漏洞和其他主要安全相关的版本更新将根据需要发布。安全事件应通过 SECURITY.md 报告。
2. 行为准则 报告和审核将继续。

12 月会有什么不同？​

🌐 What will be different in December

1. 2024 年最后一批稳定分支版本，包括 Electron 31、32 和 33，将在 12 月 1 日那一周发布。12 月不会有额外计划的发布。
2. 12 月最后两周未发布 Nightly 和 Alpha 版本。
3. 除了少数例外，无需进行拉取请求审核或合并。
4. 任何代码库均未更新问题跟踪器。
5. 维护人员未提供 Discord 调试帮助。
6. 无需更新社交媒体内容。

2025 年再见！

🌐 See you all in 2025!

BrowserView 自 Electron 30 起已被弃用，并被 WebContentView 替代。所幸的是，迁移相对非常简单。

Electron 正在从 BrowserView 移动到 WebContentsView，以与 Chromium 的 UI 框架 Views API 对齐。WebContentsView 提供了一个可重用的视图，直接与 Chromium 的渲染管线相关联，从而简化了未来的升级，并为开发者在 Electron 应用中集成非 Web UI 元素提供了可能。通过采用 WebContentsView，应用不仅为即将到来的更新做好准备，还能在长期中受益于更低的代码复杂性和更少的潜在 bug。

🌐 Electron is moving from BrowserView to WebContentsView to align with Chromium’s UI framework, the Views API. WebContentsView 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 WebContentsView, applications are not only prepared for upcoming updates but also benefit from reduced code complexity and fewer potential bugs in the long run.

熟悉 BrowserWindows 和 BrowserViews 的开发者应注意，BrowserWindow 和 WebContentsView 是分别继承自 BaseWindow 和 View 基类的子类。要全面了解可用的实例变量和方法，请务必查阅这些基类的文档。

🌐 Developers familiar with BrowserWindows and BrowserViews should note that BrowserWindow and WebContentsView are subclasses inheriting from the BaseWindow and View base classes, respectively. To fully understand the available instance variables and methods, be sure to consult the documentation for these base classes.

迁移步骤​

🌐 Migration steps

1. 将 Electron 升级到 30.0.0 或更高版本​

🌐 1. Upgrade Electron to 30.0.0 or higher

2. 熟悉你的应用使用 BrowserViews 的位置​

🌐 2. Familiarize yourself with where your application uses BrowserViews

一种方法是搜索你的代码库中的 new BrowserView(。这应该可以让你了解你的应用如何使用 BrowserViews 以及需要迁移的调用点数量。

🌐 One way to do this is to search your codebase for new BrowserView(. This should give you a sense for how your application is using BrowserViews and how many call sites need to be migrated.

3. 迁移每个 BrowserView 的使用​

🌐 3. Migrate each usage of BrowserView

1. 迁移实例化。这应该相当简单，因为 WebContentsView 和 BrowserView 的构造函数本质上形状相同。两者都通过 webPreferences 参数接受 WebPreferences。

   - this.tabBar = new BrowserView({
   + this.tabBar = new WebContentsView({
   

   info

   默认情况下，WebContentsView 会以白色背景实例化，而 BrowserView 会以透明背景实例化。

要在 WebContentsView 中获得透明背景，请将其背景颜色设置为带有 alpha（不透明度）通道并设置为 00 的 RGBA 十六进制值：

+ this.webContentsView.setBackgroundColor("#00000000");

:::

2. 迁移 BrowserView 被添加到其父窗口的位置。

   - this.browserWindow.addBrowserView(this.tabBar)
   + this.browserWindow.contentView.addChildView(this.tabBar);
   

3. 迁移父窗口上的 BrowserView 实例方法调用。

   | 旧方法 | 新方法 | 备注 | | ----------------------- | ---------------------------------------------------------------- | ---------------------------------------------------------------- | | win.setBrowserView | win.contentView.removeChildView + win.contentView.addChildView | | | win.getBrowserView | win.contentView.children | | | win.removeBrowserView | win.contentView.removeChildView | | | win.setTopBrowserView | win.contentView.addChildView | 在现有视图上调用 addChildView 会将其重新排列到顶部。 | | win.getBrowserViews | win.contentView.children | |

4. 将 setAutoResize 实例方法迁移到调整大小监听器。

   - this.browserView.setAutoResize({
   -   vertical: true,
   - })
   
   + this.browserWindow.on('resize', () => {
   +   if (!this.browserWindow || !this.webContentsView) {
   +     return;
   +   }
   +   const bounds = this.browserWindow.getBounds();
   +   this.webContentsView.setBounds({
   +     x: 0,
   +     y: 0,
   +     width: bounds.width,
   +     height: bounds.height,
   +    });
   +  });
   

   :::提示 所有现有的 browserView.webContents 用法以及实例方法 browserView.setBounds、browserView.getBounds 和 browserView.setBackgroundColor 都不需要迁移，并且应该能够直接在 WebContentsView 实例上使用！ :::

4. 测试并提交你的更改​

🌐 4. Test and commit your changes

遇到问题了吗？请查看 Electron 的问题跟踪器上的 WebContentsView 标签，看看你遇到的问题是否已被报告。如果没有看到你的问题，欢迎提交新的错误报告。包括测试用例的 Gist 会帮助我们更好地分类和处理你的问题！

🌐 Running into issues? Check the WebContentsView 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!

恭喜，你已经迁移到 WebContentsViews 了！🎉

🌐 Congrats, you’ve migrated onto WebContentsViews! 🎉

Electron 33.0.0 已发布！它包括对 Chromium 130.0.6723.44、V8 13.0 和 Node 20.18.0 的升级。

🌐 Electron 33.0.0 has been released! It includes upgrades to Chromium 130.0.6723.44, V8 13.0, and Node 20.18.0.

Electron 团队很高兴地宣布发布 Electron 33.0.0！你可以通过 npm 使用 npm install electron@latest 安装，或从我们的发布网站下载。请继续阅读以了解此次发布的详细信息。

🌐 The Electron team is excited to announce the release of Electron 33.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.

如果你有任何反馈，请通过 Twitter 或 Mastodon 与我们分享，或者加入我们的社区 Discord！错误和功能请求可以在 Electron 的 问题追踪器 中报告。

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

显著变化​

🌐 Notable Changes

• 添加了一个处理程序 app.setClientCertRequestPasswordHandler(handler)，以在需要 PIN 时帮助解锁加密设备。＃41205
• 扩展了 navigationHistory API，增加了 2 个新功能以更好地管理历史记录。#42014
• 改进了原生主题透明度检查。 #42862

Electron API 的历史变更现在将在文档中详细说明。

🌐 Historical changes to Electron APIs will now be detailed in the docs.

嗨 👋，我是彼得，2024 年 Google Summer of Code (GSoC) 的 Electron 贡献者。

🌐 Hi 👋, I'm Peter, the 2024 Google Summer of Code (GSoC) contributor to Electron.

在整个 GSoC 项目期间，我为 Electron 文档及其函数、类等实现了一个 API 历史功能，方式类似于 Node.js 文档：通过在 API 文档的 Markdown 文件中使用简单但功能强大的 YAML 架构，并在 Electron 文档网站上美观地展示它。

🌐 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 Node.js documentation: 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.