Skip to main content

为开源应用简化自动更新

· 5 min read

今天我们发布了一个免费的开源托管 更新网络服务 及其配套的 npm 包,以便为开源 Electron 应用实现轻松的自动更新。这是迈向让应用开发者更少关注部署、更多专注于为用户开发高质量体验的一步。

🌐 Today we're releasing a free, open-source, hosted updates webservice and companion npm package to enable easy automatic updates for open-source Electron apps. This is a step toward empowering app developers to think less about deployment and more about developing high-quality experiences for their users.


让生活更轻松​

🌐 Making life easier

Electron 有一个 autoUpdater API,它使应用能够从远程端点获取元数据以检查更新,在后台下载更新,并自动安装它们。

🌐 Electron has an autoUpdater API that gives apps the ability to consume metadata from a remote endpoint to check for updates, download them in the background, and install them automatically.

对于许多 Electron 应用开发者来说,启用这些更新一直是部署进程中的一个繁琐步骤,因为它需要部署和维护一个网络服务器,仅仅为了提供应用版本历史的元数据。

🌐 Enabling these updates has been a cumbersome step in the deployment process for many Electron app developers because it requires a web server to be deployed and maintained just to serve app version history metadata.

今天我们宣布推出一项新的即插即用解决方案,用于自动应用更新。如果你的 Electron 应用位于公共 GitHub 仓库中,并且你使用 GitHub Releases 发布构建版本,你可以使用此服务向用户提供持续的应用更新。

🌐 Today we are announcing a new drop-in solution for automatic app updates. If your Electron app is in a public GitHub repository and you're using GitHub Releases to publish builds, you can use this service to deliver continuous app updates to your users.

使用新模块​

🌐 Using the new module

为了尽量减少你的配置工作,我们创建了 update-electron-app,这是一个与新的 update.electronjs.org 网络服务集成的 npm 模块。

🌐 To minimize configuration on your part, we've created update-electron-app, an npm module which integrates with the new update.electronjs.org webservice.

安装模块:

🌐 Install the module:

npm install update-electron-app

可以在应用的任何位置调用它([主进程]):

🌐 Call it from anywhere in your app's main process:

require('update-electron-app')();

就是这样!该模块将在应用启动时检查更新,然后每十分钟检查一次。当发现更新时,它会在后台自动下载,并在更新准备好时显示一个对话框。

🌐 That's it! The module will check for updates at app startup, then every ten minutes. When an update is found it will download automatically in the background, and a dialog will be displayed when the update is ready.

迁移现有的应用​

🌐 Migrating existing apps

已经使用 Electron 的 autoUpdater API 的应用也可以使用此服务。要使用它,你可以 自定义 update-electron-app 模块 或 直接与 update.electronjs.org 集成。

🌐 Apps already using Electron's autoUpdater API can use this service too. To do so, you can customize the update-electron-app module or integrate directly with update.electronjs.org.

替代方案​

🌐 Alternatives

如果你使用 electron-builder 打包你的应用,你可以使用它内置的更新器。详情请参见 electron.build/auto-update。

🌐 If you're using electron-builder to package your app, you can use its built-in updater. For details, see electron.build/auto-update.

如果你的应用是私有的,你可能需要运行自己的更新服务器。有许多开源工具可以做到这一点,包括 Zeit 的 Hazel 和 Atlassian 的 Nucleus。有关更多信息,请参阅 [部署更新服务器] 教程。

🌐 If your app is private, you may need to run your own update server. There are a number of open-source tools for this, including Zeit's Hazel and Atlassian's Nucleus. See the Deploying an Update Server tutorial for more info.

致谢​

🌐 Thanks

感谢 Julian Gruber 帮助设计和构建这个简单且可扩展的网络服务。感谢 Zeit 的团队提供开源的 Hazel 服务,我们从中获得了设计灵感。感谢 Samuel Attard 对代码的审查。感谢 Electron 社区帮助测试这个服务。

🌐 Thanks to Julian Gruber for helping design and build this simple and scalable web service. Thanks to the folks at Zeit for their open-source Hazel service, from which we drew design inspiration. Thanks to Samuel Attard for the code reviews. Thanks to the Electron community for helping test this service.

🌲 祝 Electron 应用拥有一个常青的未来!

Electron 2 新特性:应用内购买

· 4 min read

全新的 Electron 2.0 发行版本充满了新功能和修复。这个新主版本的亮点之一是为苹果的 Mac 应用商店提供的新 inAppPurchase API。

🌐 The new Electron 2.0 release line is packed with new features and fixes. One of the highlights from this new major version is a new inAppPurchase API for Apple's Mac App Store.


应用内购买允许用户直接在应用内购买内容或订阅。这为开发者提供了一种轻松采用免费增值商业模式的方式,在这种模式下,用户免费下载应用,但可选择购买应用内提供的高级功能、额外内容或订阅服务。

🌐 In-app purchases enable content or subscriptions to be purchased directly from within apps. This gives developers an easy way to embrace the freemium business model, wherein users pay nothing to download an app and are offered optional in-app purchases for premium features, additional content, or subscriptions.

新的 API 由社区贡献者 Adrien Fery 添加到 Electron 中,以便在讲座和会议的注意应用 Amanote 中启用应用内购买。Amanote 可以免费下载,并允许在 PDF 中添加清晰且结构化的注意,并提供数学公式、绘图、音频录制等功能。

🌐 The new API was added to Electron by community contributor Adrien Fery to enable in-app purchases in Amanote, a note-taking Electron app for lectures and conferences. Amanote is free to download and allows clear and structured notes to be added to PDFs, with features like mathematical formulae, drawings, audio recording, and more.

自从在 Amanote 的 Mac 版本中添加了应用内购买支持后,Adrien 注意到销量增加了 40%!

🌐 Since adding in-app purchase support to the Mac version of Amanote, Adrien has noted a 40% increase in sales!

入门​

🌐 Getting Started

新的 inAppPurchase API 已经在最新的 Electron 测试版中发布:

🌐 The new inAppPurchase API has already landed in the latest Electron beta:

npm i -D electron@beta

API 的文档可以在 GitHub 上找到,Adrien 也非常乐意写了一篇关于如何使用 API 的教程。要开始在你的应用中添加应用内购买,请查看教程。

🌐 The docs for the API can be found on GitHub, and Adrien has been kind enough to write a tutorial on how to use the API. To get started adding in-app purchases to your app, see the tutorial.

更多 API 改进 正在进行中,并将很快在即将发布的 Electron 测试版中推出。

🌐 More improvements to the API are in the works, and will soon be landing in an upcoming Electron beta release.

Windows 可能是下一个​

🌐 Windows Could Be Next

接下来,Adrien 希望通过在 Electron 中增加对 Microsoft Store 应用内购买的支持,为 Amanote 开辟新的收入渠道。敬请关注相关进展!

🌐 Up next, Adrien is hoping to open a new revenue channel for Amanote by adding support for Microsoft Store in-app purchases in Electron. Stay tuned for developments on that!

Webview 漏洞修复

· 3 min read

发现了一个漏洞,该漏洞允许在某些禁用 Node.js 集成的 Electron 应用中重新启用 Node.js 集成。该漏洞已被分配 CVE 标识符 CVE-2018-1000136。

🌐 A vulnerability has been discovered which allows Node.js integration to be re-enabled in some Electron applications that disable it. This vulnerability has been assigned the CVE identifier CVE-2018-1000136.


受影响的应用​

🌐 Affected Applications

如果以下所有情况都成立,则应用会受到影响:

🌐 An application is affected if all of the following are true:

  1. 可在 Electron 1.7、1.8 或 2.0.0-beta 版本上运行
  2. 允许执行任意远程代码
  3. 禁用 Node.js 集成
  4. 在其 webPreferences 中未明确声明 webviewTag: false
  5. 未启用 nativeWindowOption 选项
  6. 不会拦截 new-window 事件,并且在不使用提供的 options 标签的情况下手动覆盖 event.newGuest

虽然这似乎只存在于少数 Electron 应用中,但我们建议所有应用升级以防万一。

🌐 Although this appears to be a minority of Electron applicatons, we encourage all applications to be upgraded as a precaution.

缓解措施​

🌐 Mitigation

此漏洞已在今天发布的 1.7.13、1.8.4 和 2.0.0-beta.5 版本中修复。

🌐 This vulnerability is fixed in today's 1.7.13, 1.8.4, and 2.0.0-beta.5 releases.

无法升级应用 Electron 版本的开发者可以使用以下代码缓解此漏洞:

🌐 Developers who are unable to upgrade their application's Electron version can mitigate the vulnerability with the following code:

app.on('web-contents-created', (event, win) => {
win.on(
'new-window',
(event, newURL, frameName, disposition, options, additionalFeatures) => {
if (!options.webPreferences) options.webPreferences = {};
options.webPreferences.nodeIntegration = false;
options.webPreferences.nodeIntegrationInWorker = false;
options.webPreferences.webviewTag = false;
delete options.webPreferences.preload;
},
);
});

// and *IF* you don't use WebViews at all,
// you might also want
app.on('web-contents-created', (event, win) => {
win.on('will-attach-webview', (event, webPreferences, params) => {
event.preventDefault();
});
});

更多信息​

🌐 Further Information

这个漏洞是由 Trustwave SpiderLabs 的 Brendan Scarvell 发现并负责任地报告给 Electron 项目的。

🌐 This vulnerability was found and reported responsibly to the Electron project by Brendan Scarvell of Trustwave SpiderLabs.

要了解有关保持 Electron 应用安全的最佳实践的更多信息,请参阅我们的 安全教程。

🌐 To learn more about best practices for keeping your Electron apps secure, see our security tutorial.

如果你希望报告 Electron 中的漏洞,请提交 [GitHub 安全咨询]。

🌐 Please file a GitHub Security Advisory if you wish to report a vulnerability in Electron.

请加入我们的email list以接收有关版本发布和安全更新的通知。

🌐 Please join our email list to receive updates about releases and security updates.

网站故障

· 3 min read

上周,electronjs.org 网站有几分钟的停机。如果你受到这些短暂中断的影响,我们对此带来的不便表示歉意。经过今天的一些调查,我们已经诊断出根本原因,并部署了一个修复。

🌐 Last week the electronjs.org site had a few minutes of downtime. If you were affected by these brief outages, we're sorry for the inconvenience. After a bit of investigation today, we've diagnosed the root cause and have deployed a fix.


为了防止将来出现这种停机情况,我们已经在我们的应用上启用了Heroku 阈值警报。每当我们的 Web 服务器累积的失败请求或响应缓慢超过某个阈值时,我们的团队将会收到通知,以便我们能够快速解决问题。

🌐 To prevent this kind of downtime in the future, we've enabled Heroku threshold alerts on our app. Any time our web server accumulates failed requests or slow responses beyond a certain threshold, our team will be notified so we can address the problem quickly.

所有语言的离线文档​

🌐 Offline Docs in Every Language

下次当你在飞机上或地下咖啡馆开发 Electron 应用时,可能会希望拥有一份离线文档以供参考。幸运的是,Electron 的文档以 Markdown 文件形式提供,并且有超过 20 种语言版本。

🌐 The next time you're developing an Electron app on a plane or in a subterranean coffee shop, you might want to have a copy of the docs for offline reference. Fortunately, Electron's docs are available as Markdown files in over 20 languages.

git clone https://github.com/electron/electron-i18n
ls electron-i18n/content

带有图形用户界面的离线文档​

🌐 Offline Docs with a GUI

devdocs.io/electron 是一个方便的网站,提供离线文档,不仅仅适用于 Electron,还包括许多其他项目,如 JavaScript、TypeScript、Node.js、React、Angular 等等。当然,也有针对它的 Electron 应用。
可以查看 devdocs-app 在 Electron 网站上的信息。

devdocs-app

如果你想在不使用鼠标或触控板的情况下安装应用,可以尝试使用 Electron Forge 的 install 命令:

🌐 If you like to install apps without using your mouse or trackpad, give Electron Forge's install command a try:

npx electron-forge install egoist/devdocs-app

协议处理程序漏洞修复

· 3 min read

已经发现了一个影响使用自定义协议处理程序的 Electron 应用的远程代码执行漏洞。该漏洞已被分配 CVE 标识符 CVE-2018-1000006。

🌐 A remote code execution vulnerability has been discovered affecting Electron apps that use custom protocol handlers. This vulnerability has been assigned the CVE identifier CVE-2018-1000006.


受影响的平台​

🌐 Affected Platforms

在 Windows 上运行的 Electron 应用,如果将自己注册为某个协议(如 myapp://)的默认处理程序,就存在漏洞。

🌐 Electron apps designed to run on Windows that register themselves as the default handler for a protocol, like myapp://, are vulnerable.

无论协议如何注册,例如使用本地代码、Windows 注册表或 Electron 的 app.setAsDefaultProtocolClient API,这类应用都可能受到影响。

🌐 Such apps can be affected regardless of how the protocol is registered, e.g. using native code, the Windows registry, or Electron's app.setAsDefaultProtocolClient API.

macOS 和 Linux 不受此问题影响。

🌐 macOS and Linux are not vulnerable to this issue.

缓解措施​

🌐 Mitigation

我们已经发布了包含此漏洞修复的新版本 Electron: 1.8.2-beta.5、 1.7.12、 和 1.6.17。 我们强烈建议所有 Electron 开发者立即将他们的应用更新到最新的稳定版本。

🌐 We've published new versions of Electron which include fixes for this vulnerability: 1.8.2-beta.5, 1.7.12, and 1.6.17. We urge all Electron developers to update their apps to the latest stable version immediately.

如果由于某种原因你无法升级 Electron 版本, 你可以在调用 app.setAsDefaultProtocolClient 时将 -- 作为最后一个参数附加,这可以防止 Chromium 解析更多选项。 双破折号 -- 表示命令选项的结束,之后只接受位置参数。

🌐 If for some reason you are unable to upgrade your Electron version, you can append -- as the last argument when calling app.setAsDefaultProtocolClient, which prevents Chromium from parsing further options. The double dash -- signifies the end of command options, after which only positional parameters are accepted.

app.setAsDefaultProtocolClient(protocol, process.execPath, [
'--your-switches-here',
'--',
]);

有关更多详情,请参阅 app.setAsDefaultProtocolClient API。

🌐 See the app.setAsDefaultProtocolClient API for more details.

要了解有关保持你的 Electron 应用安全的最佳做法,请参阅我们的 [安全教程]。

🌐 To learn more about best practices for keeping your Electron apps secure, see our security tutorial.

如果你希望报告 Electron 中的漏洞,请提交 [GitHub 安全咨询]。

🌐 Please file a GitHub Security Advisory if you wish to report a vulnerability in Electron.

Electron 2.0及以后 - 语义化版本

· 2 min read

Electron 正在开发一个新的主要版本,同时我们对版本控制策略也进行了一些调整。从 2.0.0 版本开始,Electron 将严格遵循语义化版本控制(Semantic Versioning)。

🌐 A new major version of Electron is in the works, and with it some changes to our versioning strategy. As of version 2.0.0, Electron will strictly adhere to Semantic Versioning.


这一变化意味着你会更频繁地看到主版本的提升,而且通常会是对 Chromium 的重大更新。补丁版本也将更加稳定,因为它们现在只包含错误修复,不会有新功能。

🌐 This change means you'll see the major version bump more often, and it will usually be a major update to Chromium. Patch releases will also be more stable, as they will now only contain bug fixes with no new features.

主要版本更新

  • Chrom 版本更新
  • Node.js 主要版本更新
  • Electron 断裂 API 更改

次要版本更新

  • Node.js 小版本更新
  • Electron 不间断 API 更改

补丁版本递增

  • Node.js 补丁版本更新
  • 修复相关的 chromium 补丁
  • Electron 错误修复

因为 Electron 的 semver 范围现在将更有意义,我们建议使用 npm 的默认 --save-dev 标志来安装 Electron,这将为你的版本加上 ^ 前缀,使你能够安全地保持次要和修补程序更新:

🌐 Because Electron's semver ranges will now be more meaningful, we recommend installing Electron using npm's default --save-dev flag, which will prefix your version with ^, keeping you safely up to date with minor and patch updates:

npm install --save-dev electron

对于只对错误修复感兴趣的开发者,你应该使用波浪号语义版本前缀,例如 ~2.0.0,它不会引入新功能,只会进行修复以提高稳定性。

🌐 For developers interested only in bug fixes, you should use the tilde semver prefix e.g. ~2.0.0, which which will never introduce new features, only fixes to improve stability.

欲了解更多详情,请参见 electronjs.org/docs/tutorial/electron-versioning。

🌐 For more details, see electronjs.org/docs/tutorial/electron-versioning.

Electron 的新国际化网站

· 12 min read

Electron 有了一个新网站,网址是 electronjs.org!我们已将原来的静态 Jekyll 网站替换为 Node.js 网络服务器,这让我们能够更灵活地进行网站的国际化,并为更多令人兴奋的新功能铺平了道路。

🌐 Electron has a new website at electronjs.org! We've replaced our static Jekyll site with a Node.js webserver, giving us flexibility to internationalize the site and paving the way for more exciting new features.


🌍 翻译​

🌐 🌍 Translations

我们已开始着手对网站进行国际化,目标是让全球开发者都能轻松进行 Electron 应用开发。我们正在使用一个名为 Crowdin 的本地化平台,该平台可以与 GitHub 集成,并在内容被翻译成不同语言时自动创建和更新拉取请求。

🌐 We've begun the process of internationalizing the website with the goal of making Electron app development accessible to a global audience of developers. We're using a localization platform called Crowdin that integrates with GitHub, opening and updating pull requests automatically as content is translated into different languages.

Electron 导航(简体中文)

尽管到目前为止我们一直在默默地推进这项工作,但已经有超过75名Electron社区成员自发发现了这个项目,并加入了将网站国际化及将Electron文档翻译成20多种语言的工作。我们看到来自世界各地的每日贡献,其中法语、越南语、印尼语和中文的翻译工作走在前列。

🌐 Though we've been working quietly on this effort so far, over 75 Electron community members have already discovered the project organically and joined in the effort to internationalize the website and translate Electron's docs into over 20 languages. We are seeing daily contributions from people all over the world, with translations for languages like French, Vietnamese, Indonesian, and Chinese leading the way.

要选择你的语言并查看翻译进度,请访问 electronjs.org/languages

🌐 To choose your language and view translation progress, visit electronjs.org/languages

Crowdin 上的翻译进行中

如果你会多种语言并且有兴趣帮助翻译 Electron 的文档和网站,可以访问 electron/electron-i18n 仓库,或者直接在 Crowdin 上进行翻译,你可以使用 GitHub 账号登录。

🌐 If you're multilingual and interested in helping translate Electron's docs and website, visit the electron/electron-i18n repo, or jump right into translating on Crowdin, where you can sign in using your GitHub account.

目前,Electron 项目在 Crowdin 上已启用 21 种语言。添加对更多语言的支持很简单,因此如果你有兴趣帮助翻译,但没有看到你的语言列在其中,请告诉我们,我们会启用它。

🌐 There are currently 21 languages enabled for the Electron project on Crowdin. Adding support for more languages is easy, so if you're interested in helping translate but you don't see your language listed, let us know and we'll enable it.

原始翻译文档​

🌐 Raw Translated Docs

如果你更喜欢阅读原始 Markdown 文件的文档,现在你可以用任何语言这样做:

🌐 If you prefer to read documentation in raw markdown files, you can now do that in any language:

git clone https://github.com/electron/electron-i18n
ls electron-i18n/content

应用页面​

🌐 App Pages

截至今天,任何 Electron 应用都可以轻松在 Electron 网站上拥有自己的页面。举几个例子,看看 Etcher、1Clipboard 或 GraphQL Playground,如图所示,在网站的日文版上:

🌐 As of today, any Electron app can easily have its own page on the Electron site. For a few examples, check out Etcher, 1Clipboard, or GraphQL Playground, pictured here on the Japanese version of the site:

GraphQL Playground

有一些非常棒的 Electron 应用,但它们并不总是容易找到,而且并不是每个开发者都有时间或资源去建立一个完善的网站来推广和分发他们的应用。

🌐 There are some incredible Electron apps out there, but they're not always easy to find, and not every developer has the time or resources to build a proper website to market and distribute their app.

仅使用一个PNG 图标文件和少量应用元数据,我们就能够收集有关特定应用的大量信息。通过收集 GitHub 的数据,应用页面现在可以显示截图、下载链接、版本、更新说明以及每个拥有公共仓库的应用的 README。通过从每个应用的图标中提取调色板,我们可以制作大胆且易于识别的颜色,为每个应用页面提供一定的视觉差异。

🌐 Using just a PNG icon file and a small amount of app metadata, we're able to collect a lot of information about a given app. Using data collected from GitHub, app pages can now display screenshots, download links, versions, release notes, and READMEs for every app that has a public repository. Using a color palette extracted from each app's icon, we can produce bold and accessible colors to give each app page some visual distinction.

应用索引页面 现在也有分类和关键字过滤功能,方便查找有趣的应用,如 GraphQL 图形界面 和 点对点工具。

🌐 The apps index page now also has categories and a keyword filter to find interesting apps like GraphQL GUIs and p2p tools.

如果你有一个想在网站上展示的 Electron 应用,可以在 electron/electron-apps 仓库中提交一个 pull request。

🌐 If you've got an Electron app that you'd like featured on the site, open a pull request on the electron/electron-apps repository.

使用 Homebrew 的一行安装​

🌐 One-line Installation with Homebrew

macOS 的 Homebrew 包管理器有一个名为 cask 的子命令,它可以让你通过在终端中输入一个命令轻松安装桌面应用,例如 brew cask install atom。

🌐 The Homebrew package manager for macOS has a subcommand called cask that makes it easy to install desktop apps using a single command in your terminal, like brew cask install atom.

我们已经开始收集流行 Electron 应用的 Homebrew cask 名称,并且现在在每个有 cask 的应用页面上显示安装命令(针对 macOS 访问者):

🌐 We've begun collecting Homebrew cask names for popular Electron apps and are now displaying the installation command (for macOS visitors) on every app page that has a cask:

针对你的平台定制的安装选项:macOS、Windows、Linux

要查看所有具有 Homebrew Cask 名称的应用,请访问 electronjs.org/apps?q=homebrew。如果你知道其他我们尚未收录的 Cask 应用,请添加它们!

🌐 To view all the apps that have homebrew cask names, visit electronjs.org/apps?q=homebrew. If you know of other apps with casks that we haven't indexed yet, please add them!

🌐 一个新字段​

🌐 🌐 A New Domain

我们已将网站从 electron.atom.io 迁移到新的域名:electronjs.org。

🌐 We've moved the site from electron.atom.io to a new domain: electronjs.org.

Electron 项目诞生于 Atom 内部,Atom 是 GitHub 基于 web 技术构建的开源文本编辑器。Electron 最初被称为 atom-shell。Atom 是第一个使用它的应用,但人们很快就意识到,这个神奇的 Chromium + Node 运行时可以用于各种不同的应用。当像微软和 Slack 这样的公司开始使用 atom-shell 时,很明显这个项目需要一个新的名字。

🌐 The Electron project was born inside Atom, GitHub's open-source text editor built on web technologies. Electron was originally called atom-shell. Atom was the first app to use it, but it didn't take long for folks to realize that this magical Chromium + Node runtime could be used for all kinds of different applications. When companies like Microsoft and Slack started to make use of atom-shell, it became clear that the project needed a new name.

于是,“Electron”诞生了。在2016年初,GitHub组建了一个新的团队,专门专注于Electron的开发和维护,独立于Atom。在此之后,Electron被成千上万的应用开发者采用,如今许多大型公司也依赖它,其中许多公司还有自己的Electron团队。

🌐 And so "Electron" was born. In early 2016, GitHub assembled a new team to focus specifically on Electron development and maintenance, apart from Atom. In the time since, Electron has been adopted by thousands of app developers, and is now depended on by many large companies, many of which have Electron teams of their own.

支持 GitHub 的 Electron 项目,比如 Atom 和 GitHub Desktop,仍然是我们团队的优先事项,但通过迁移到一个新的域名,我们希望能够帮助澄清 Atom 和 Electron 之间的技术区别。

🌐 Supporting GitHub's Electron projects like Atom and GitHub Desktop is still a priority for our team, but by moving to a new domain we hope to help clarify the technical distinction between Atom and Electron.

🐢🚀 Node.js 无处不在​

🌐 🐢🚀 Node.js Everywhere

之前的 Electron 网站是使用流行的基于 Ruby 的静态网站生成器 Jekyll 构建的。Jekyll 是构建静态网站的绝佳工具,但网站已经开始超出它的能力范围。我们希望拥有更多动态功能,例如正确的重定向和动态内容渲染,因此 Node.js 服务器成为显而易见的选择。

🌐 The previous Electron website was built with Jekyll, the popular Ruby-based static site generator. Jekyll is a great tool for building static websites, but the website had started to outgrow it. We wanted more dynamic capabilities like proper redirects and dynamic content rendering, so a Node.js server was the obvious choice.

Electron生态系统包含使用多种不同编程语言编写组件的项目,从Python到C++再到Bash。但JavaScript是Electron的基础语言,也是我们社区中使用最广泛的语言。

🌐 The Electron ecosystem includes projects with components written in many different programming languages, from Python to C++ to Bash. But JavaScript is foundational to Electron, and it's the language used most in our community.

通过将网站从 Ruby 迁移到 Node.js,我们旨在降低希望为网站做出贡献的人的入门门槛。

🌐 By migrating the website from Ruby to Node.js, we aim to lower the barrier to entry for people wishing to contribute to the website.

⚡️ 更轻松的开源参与​

🌐 ⚡️ Easier Open-Source Participation

如果你的系统上已经安装了 Node.js(8 或更高版本)和 git,你可以轻松地在本地运行该网站:

🌐 If you've got Node.js (8 or higher) and git installed on your system, you can easily get the site running locally:

git clone https://github.com/electron/electronjs.org
cd electronjs.org
npm install
npm run dev

新网站托管在 Heroku 上。我们使用部署流水线和Review Apps功能,该功能会为每个拉取请求自动创建一个正在运行的应用副本。这使得审查者可以轻松查看拉取请求对网站实时副本的实际影响。

🌐 The new website is hosted on Heroku. We use deployment pipelines and the Review Apps feature, which automatically creates a running copy of the app for every pull request. This makes it easy for reviewers to view the actual effects of a pull request on a live copy of the site.

🙏 感谢所有贡献者​

🌐 🙏 Thanks to Contributors

我们想向世界各地所有贡献了时间和精力帮助改进 Electron 的朋友们表示特别感谢。开源社区的热情在 Electron 的成功中起到了不可估量的作用。谢谢大家!

🌐 We'd like to give special thanks to all the folks around the world who have contributed their own time and energy to help improve Electron. The passion of the open-source community has helped immeasurably in making Electron a success. Thank you!

Thumbs up!

Chromium RCE 漏洞修复

· 2 min read

在 Google Chromium 中发现了一个远程代码执行漏洞,影响所有最近版本的 Electron。任何访问远程内容的 Electron 应用都容易受到此漏洞的攻击,无论是否启用了 [沙箱选项]。

🌐 A remote code execution vulnerability has been discovered in Google Chromium that affects all recent versions of Electron. Any Electron app that accesses remote content is vulnerable to this exploit, regardless of whether the sandbox option is enabled.

我们发布了两个新的 Electron 版本 1.7.8 和 1.6.14,其中都包含了对该漏洞的修复。我们强烈建议所有 Electron 开发者立即将他们的应用更新到最新的稳定版本:

🌐 We've published two new versions of electron 1.7.8 and 1.6.14, both of which include a fix for this vulnerability. We urge all Electron developers to update their apps to the latest stable version immediately:

npm i electron@latest --save-dev

要了解有关保持你的 Electron 应用安全的最佳做法,请参阅我们的 [安全教程]。

🌐 To learn more about best practices for keeping your Electron apps secure, see our security tutorial.

如果你希望报告 Electron 中的漏洞,请提交 [GitHub 安全咨询]。

🌐 Please file a GitHub Security Advisory if you wish to report a vulnerability in Electron.

宣布 Electron 支持 TypeScript

· 9 min read

electron npm 包现在包含一个 TypeScript 定义文件,提供了对整个 Electron API 的详细注释。这些注释可以提升你的 Electron 开发体验,即使你使用的是普通的 JavaScript。只需 npm install electron 就可以在你的项目中获取最新的 Electron 类型定义。

🌐 The electron npm package now includes a TypeScript definition file that provides detailed annotations of the entire Electron API. These annotations can improve your Electron development experience even if you're writing vanilla JavaScript. Just npm install electron to get up-to-date Electron typings in your project.


TypeScript 是由微软创建的一种开源编程语言。它是 JavaScript 的超集,通过添加对静态类型的支持来扩展语言。近年来,TypeScript 社区发展迅速,在最近的 Stack Overflow 开发者调查中,TypeScript 被评为最受喜爱的编程语言之一。TypeScript 被形容为“可扩展的 JavaScript”,GitHub、Slack 和 Microsoft 的团队都在使用它来编写可扩展的 Electron 应用,这些应用被数百万人使用。

🌐 TypeScript is an open-source programming language created by Microsoft. It's a superset of JavaScript that extends the language by adding support for static types. The TypeScript community has grown quickly in recent years, and TypeScript was ranked among the most loved programming languages in a recent Stack Overflow developer survey. TypeScript is described as "JavaScript that scales", and teams at GitHub, Slack, and Microsoft are all using it to write scalable Electron apps that are used by millions of people.

TypeScript 支持 JavaScript 中的许多新语言特性,比如类、对象解构和 async/await,但它真正的区别特性是类型注解。 声明程序预期的输入和输出数据类型可以减少错误,通过帮助你在编译时发现错误,同时这些注解也可以作为对程序工作方式的正式声明。

🌐 TypeScript supports many of the newer language features in JavaScript like classes, object destructuring, and async/await, but its real differentiating feature is type annotations. Declaring the input and output datatypes expected by your program can reduce bugs by helping you find errors at compile time, and the annotations can also serve as a formal declaration of how your program works.

当库使用原生 JavaScript 编写时,类型通常在编写文档时作为附带考虑而被模糊定义。函数通常可以接受的类型比文档中记录的更多,或者函数可能具有未记录的隐形约束,这可能导致运行时错误。

🌐 When libraries are written in vanilla Javascript, the types are often vaguely defined as an afterthought when writing documentation. Functions can often accept more types than what was documented, or a function can have invisible constraints that are not documented, which can lead to runtime errors.

TypeScript 通过 定义文件 解决了这个问题。TypeScript 定义文件描述了一个库的所有函数以及其预期的输入和输出类型。当库的作者在发布的库中打包 TypeScript 定义文件时,该库的使用者可以直接在编辑器中探索它的 API 并立即开始使用,通常无需查阅库的文档。

🌐 TypeScript solves this problem with definition files. A TypeScript definition file describes all the functions of a library and its expected input and output types. When library authors bundle a TypeScript definition file with their published library, consumers of that library can explore its API right inside their editor and start using it right away, often without needing to consult the library's documentation.

许多流行的项目,例如 Angular、Vue.js、node-github(以及现在的 Electron!)都会编译自己的定义文件,并将其与发布的 npm 包一起打包。对于那些没有打包自己定义文件的项目,有 DefinitelyTyped,这是一个由社区维护的第三方定义文件生态系统。

🌐 Many popular projects like Angular, Vue.js, node-github (and now Electron!) compile their own definition file and bundle it with their published npm package. For projects that don't bundle their own definition file, there is DefinitelyTyped, a third-party ecosystem of community-maintained definition files.

安装​

🌐 Installation

从版本 1.6.10 开始,每个 Electron 版本都包含自己的 TypeScript 定义文件。当你从 npm 安装 electron 包时,electron.d.ts 文件会随安装的包自动打包。

🌐 Starting at version 1.6.10, every release of Electron includes its own TypeScript definition file. When you install the electron package from npm, the electron.d.ts file is bundled automatically with the installed package.

安装 Electron 最安全的方法是使用确切的版本号:

🌐 The safest way to install Electron is using an exact version number:

npm install electron --save-dev --save-exact

或者如果你使用的是 yarn:

🌐 Or if you're using yarn:

yarn add electron --dev --exact

如果你已经在使用第三方定义,例如 @types/electron 和 @types/node,你应该将它们从你的 Electron 项目中移除,以防止任何冲突。

🌐 If you were already using third-party definitions like @types/electron and @types/node, you should remove them from your Electron project to prevent any collisions.

定义文件来源于我们的结构化 API 文档,因此它始终与Electron 的 API 文档保持一致。只需安装 electron,你就可以始终获得与所使用的 Electron 版本同步的 TypeScript 定义。

🌐 The definition file is derived from our structured API documentation, so it will always be consistent with Electron's API documentation. Just install electron and you'll always get TypeScript definitions that are up to date with the version of Electron you're using.

用法​

🌐 Usage

想要了解如何安装和使用 Electron 的新 TypeScript 注解,请观看这个简短的演示录屏:

🌐 For a summary of how to install and use Electron's new TypeScript annotations, watch this short demo screencast:

如果你正在使用 Visual Studio Code,你已经拥有内置的 TypeScript 支持。还有社区维护的插件可用于 Atom、Sublime、vim 以及 其他编辑器。

🌐 If you're using Visual Studio Code, you've already got TypeScript support built in. There are also community-maintained plugins for Atom, Sublime, vim, and other editors.

一旦你的编辑器配置好了 TypeScript,你就会开始看到更多上下文感知的功能,比如自动补全建议、内联方法引用、参数检查等。

🌐 Once your editor is configured for TypeScript, you'll start to see more context-aware behavior like autocomplete suggestions, inline method reference, argument checking, and more.

Method autocompletion

Method reference

Argument checking

TypeScript 入门​

🌐 Getting started with TypeScript

如果你是 TypeScript 新手并想了解更多,这个来自微软的入门视频提供了对该语言创建原因、工作原理、使用方法以及未来发展方向的不错概述。

🌐 If you're new to TypeScript and want to learn more, this introductory video from Microsoft provides a nice overview of why the language was created, how it works, how to use it, and where it's headed.

官方 TypeScript 网站上还有一本手册和一个练习场。

🌐 There's also a handbook and a playground on the official TypeScript website.

由于 TypeScript 是 JavaScript 的超集,你现有的 JavaScript 代码已经是有效的 TypeScript。这意味着你可以逐步将现有的 JavaScript 项目迁移到 TypeScript,根据需要逐步加入新的语言特性。

🌐 Because TypeScript is a superset of JavaScript, your existing JavaScript code is already valid TypeScript. This means you can gradually transition an existing JavaScript project to TypeScript, sprinkling in new language features as needed.

致谢​

🌐 Thanks

这个项目如果没有 Electron 开源维护者社区的帮助是不可能实现的。感谢 Samuel Attard、Felix Rieseberg、Birunthan Mohanathas、Milan Burda、Brendan Forster 以及其他许多人在修复漏洞、改进文档和技术指导方面的贡献。

🌐 This project would not have been possible without the help of Electron's community of open-source maintainers. Thanks to Samuel Attard, Felix Rieseberg, Birunthan Mohanathas, Milan Burda, Brendan Forster, and many others for their bug fixes, documentation improvements, and technical guidance.

支持​

🌐 Support

如果你在使用 Electron 的新 TypeScript 定义文件时遇到任何问题,请在 electron-typescript-definitions 仓库中提交问题。

🌐 If you encounter any issues using Electron's new TypeScript definition files, please file an issue on the electron-typescript-definitions repository.

祝你 TypeScript 愉快!

🌐 Happy TypeScripting!

本周项目:Jasper

· 9 min read

本周我们采访了Jasper的创作者,这是一款基于Electron的GitHub通知管理工具。

🌐 This week we interviewed the creator of Jasper, an Electron-based tool for managing GitHub notifications.


你好!你是谁?​

🌐 Hello! Who are you?

我是Ryo Maruyama,在日本的一个软件开发者。我正在开发Jasper和ESDoc。

🌐 I'm Ryo Maruyama, a software developer in Japan. I am developing Jasper and ESDoc.

什么是 Jasper?​

🌐 What is Jasper?

Jasper 是一个灵活且功能强大的 GitHub 问题阅读器。它支持 github.com 和 GitHub Enterprise 上的问题和拉取请求。

Jasper 应用截图

为什么要这样做?​

🌐 Why did you make it?

当人们在工作或开源项目活动中使用 GitHub 时,他们往往每天会收到大量通知。作为订阅通知的一种方式,GitHub 提供了Electron邮件和网页通知。我使用这些功能有几年时间,但遇到了以下问题:

🌐 When people use GitHub in their job or OSS activities, they tend to receive many notifications on a daily basis. As a way to subscribe to the notifications, GitHub provides email and web notifications. I used these for a couple of years, but I faced the following problems:

  • 我很容易忽略别人提到我、我评论过或我正在关注的问题。
  • 我把一些问题记在脑子里,以便以后检查,但有时我会忘记它们。
  • 为了避免忘记问题,我会在浏览器中保持多个标签页打开。
  • 很难检查所有与我相关的问题。
  • 很难掌握团队的所有活动。

我花费了大量时间和精力来避免这些问题,因此我决定为 GitHub 创建一个问题阅读器来有效地解决这些问题,并开始开发 Jasper。

🌐 I was spending a lot of time and energy trying to prevent those problems, so I decided to make an issue reader for GitHub to solve these problems efficiently, and started developing Jasper.

谁在使用 Jasper?​

🌐 Who's using Jasper?

Jasper 被多家公司中使用 GitHub 的开发者、设计师和经理使用。当然,一些开源软件开发者也在使用它。它也被 GitHub 的一些人使用!

🌐 Jasper is used by developers, designers, and managers in several companies that are using GitHub. Of course, some OSS developers also are using it. And it is also used by some people at GitHub!

Jasper 如何工作?​

🌐 How does Jasper work?

一旦 Jasper 配置完成,屏幕会显示如下。从左到右,你可以看到“流列表”、“问题列表”和“问题内容”。

🌐 Once Jasper is configured, the following screen appears. From left to right, you can see "streams list", "issues list" and "issue body".

Jasper 启动界面

这个“流”是 Jasper 的核心功能。例如,如果你想查看“分配给 electron/electron 仓库中 @zeke 的问题”,你可以创建如下流:

🌐 This "stream" is the core feature of Jasper. For example, if you want to see "issues that are assigned to @zeke in the electron/electron repository", you create the following stream:

repo:electron/electron assignee:zeke is:issue

Jasper 启动屏幕 2

创建流并等待几秒钟后,你可以看到符合条件的问题。

🌐 After creating the stream and waiting for a few seconds, you can see the issues that meet the conditions.

Jasper 启动屏幕 3

我们能用流做什么?​

🌐 What can we do with streams?

我将介绍哪些类型的条件可用于流。

🌐 I will introduce what kind of conditions can be used for stream.

用户和团队​

🌐 Users and Teams

流问题
mentions:cat mentions:dog提到用户 cat 或 dog 的问题
author:cat author:dog由用户 cat 或 dog 创建的问题
assignee:cat assignee:dog分配给 cat 或 dog 的问题
commenter:cat commenter:dogcat 或 dog 评论过的问题
involves:cat involves:dog涉及 cat 或 bob 的问题
team:animal/white-cat team:animal/black-dog提到 animal/white-cat 或 animal/black-dog 的问题

involves 意思是 mention、author、assignee 或 commenter

代码库和组织​

🌐 Repositories and Organizations

流问题
repo:cat/jump repo:dog/runcat/jump 或 dog/run 中的问题
org:electron user:cat user:dogelectron、cat 或 dog 中的问题

org 与 user 相同

属性​

🌐 Attributes

流问题
repo:cat/jump milestone:v1.0.0 milestone:v1.0.1在 cat/jump 中附加到 v1.0.0 或 v1.0.1 的问题
repo:cat/jump label:bug label:blocker在 cat/jump 中同时附加到 bug 和 blocker 的问题
electron OR atomshell包含 electron 或 atomshell 的问题

审核状态​

🌐 Review Status

流问题
is:pr review:required在 cat/jump 中需要审查的问题
is:pr review-requested:cat由 cat 请求审查的问题。
但是这些还没有被审查。
is:pr reviewed-by:cat由 cat 审查的问题

正如你可能已经注意到的,通过查看这些内容,流可以使用 GitHub 的搜索查询。有关如何使用流和搜索查询的详细信息,请参阅以下网址。

🌐 As you may have noticed by looking at these, streams can use GitHub's search queries. For details on how to use streams and search queries, see the following URLs.

Jasper 还具有未读问题管理、未读评论管理、标记星标、通知更新、问题过滤、键盘快捷键等功能。

🌐 Jasper also has features for unread issue management, unread comment management, marking stars, notification updating, filtering issues, keyboard shortcuts, etc.

Jasper 是付费产品吗?它多少钱?​

🌐 Is Jasper a paid product? How much does it cost?

Jasper 价格为 12 美元。不过你可以使用 免费试用版 试用 30 天。

🌐 Jasper is $12. However you can use the free trial edition for 30 days.

为什么选择在 Electron 上构建 Jasper?​

🌐 Why did you choose to build Jasper on Electron?

我喜欢 Electron 的以下几个方面:

🌐 I like the following aspects of Electron:

  • 应用可以使用 JavaScript/CSS/HTML 开发。
  • 应用可以构建于 Windows、Mac 和 Linux 平台。
  • Electron 正在积极开发中,并拥有庞大的社区。

这些功能使桌面应用的开发快速且简单。太棒了!如果你有任何产品创意,你绝对应该考虑使用 Electron。

🌐 These features enable rapid and simple desktop application development. It is awesome! If you have any product idea, you should consider using Electron by all means.

在开发 Jasper 的进程中,你遇到了哪些挑战?​

🌐 What are some challenges you've faced while developing Jasper?

我在理解“流”(stream)概念时遇到了很大困难。起初,我考虑使用 GitHub 的 [通知 API]。然而,我注意到它不支持某些使用场景。之后,我又考虑了结合通知 API 的 [问题 API] 和 [拉取请求 API]。但这始终不是我想要的。然后在思考各种方法时,我意识到轮询 GitHub 的 [搜索 API] 会提供最大的灵活性。经过大约一个月的实验才达到这一点,随后我在两天内实现了带有流概念的 Jasper 原型。

🌐 I had a hard time figuring out the "stream" concept. At first I considered using GitHub's Notifications API. However I noticed that it does not support certain use cases. After that I considered using the Issues API and Pull Requests API, in addition to the Notification API. But it never became what I wanted. Then while thinking about various methods, I realized that polling GitHub's Search API would offer the most flexibility. It took about a month of experimentation to get to this point, then I implemented a prototype of Jasper with the stream concept in two days.

注意:轮询最多每 10 秒进行一次。这对于 GitHub API 的限制来说已经足够了。

🌐 Note: The polling is limited to once every 10 seconds at most. This is acceptable enough for the restriction of GitHub API.

下一步计划是什么?​

🌐 What's coming next?

我计划开发以下功能:

🌐 I have a plan to develop the following features:

  • 过滤流:一个流有一些过滤流,用于过滤流中的问题。它就像SQL中的视图。
  • 多个账户:你将能够同时使用 github.com 和 GHE
  • 提升性能:目前 WebView 的加载速度比普通浏览器慢。

在 Twitter 上关注 @jasperappio 获取更新。

🌐 Follow @jasperappio on Twitter for updates.