前言
之前在社区开源了一个基于 Electron 的桌面端工具箱 Rubick，收到了 Github 6.5k+ star。但是有部分小伙伴也想加入开源一起开发，但是对源码结构不了解；也有部分小伙伴想学习 Electron 应用开发的实践知识；还有的想了解 Rubick 核心功能的实现原理。但是 Rubick 这个项目做了也挺久的，涵盖的知识面比较广，一两篇文章也说不清楚，所以我就以 Rubick 源码 为实战基础的小册：《Electron 应用开发实践指南》。
如果对 Rubick 了解的小伙伴可能清楚，有段时间 Rubick 为了升级 UI 交互，在社区众筹了一笔钱来雇佣了一个设计师重新设计 Rubick 的交互。因为开源真的没有任何收入，写小册的目的一方面也是为了能通过小册的收入来持续维护、迭代、升级 Rubick 项目，为开源输血。小册的收入也将全部投入到开源项目当中。
本小册的实战篇我们将以 Rubick 项目作为原型来介绍如何一步步动手实现自己的插件化桌面端工具箱。如果你对 Rubick 还不了解，可以阅读一下我之前写的介绍文章：桌面端效率工具 Rubick 来了🎉。
Rubick是一款基于Electron做的开源、免费桌面端效率工具箱；目标是通过一系列辅助插件解决工作、学习、开发上的效率问题。可以把Rubick理解成一个微信App，插件就是基于微信做的小程序。不过微信的功能主要是聊天；而Rubick功能主要是效率工具。
小册主要分为三大模块内容：
-
模块一：Electron 基础篇 。以最通俗易通的方式介绍
Electron的一些核心概念和Electron的原生能力。希望通过该模块的学习让你对Electron的整体骨架有一个清晰的认知，可以开始入坑Electron。 -
模块二：Electron 实战篇 。通过基础篇的学习后，相信你一定希望动手实操，本模块将会从零开始以 Rubick 为原型来揭秘桌面端工具开发的核心秘密。本模块所有源码都源自 Rubick，你可以边调试边看，进一步加强理解。
-
模块三：Electron 通用篇 。本模块重点介绍开发
Electron会遇到的一些通用问题，包括：应用的打包、更新、自动化测试、性能优化、内存优化等等，并给出一些常用的解决方案。
接下来，我简单介绍一下小册实战篇会介绍和实现的知识点：
1. 无边框窗口的拖拽和缩放
窗口是 Electron 应用程序的首要表现形式和展示形式，无边框窗口是指没有明显边框、标题栏或外框的窗口。它们通常具有以下特点：
- 无边框： 这种窗口没有传统窗口的标准边框。它们可能只有一个微小的边缘，用于指示窗口的大小和位置。
- 没有标题栏： 无边框窗口通常没有传统的标题栏，也就是用于显示窗口标题和操作按钮（如最小化、最大化和关闭按钮）的区域。
- 内容焦点： 它们着重于窗口内容，让用户更专注于应用程序或内容本身，而不是窗口装饰或边框。
这种设计风格通常出现在现代化的用户界面和应用程序中，以提供更清晰、更简洁的外观，并且在某些情况下可能有助于提升用户体验。
Rubick 有两类无边框窗口，一种是主程序的默认搜索窗口：
另外一种是有自定义控件栏（最大化、最小化、关闭），嵌入式的 windows 窗口：
这两类窗口的实现中，都有各自的问题，默认情况下，无边框窗口是不可拖拽的。而若你有自定义标题栏，或者嵌入式的windows 窗口控件需求时，又需要自行实现控件栏。后面的 《实战篇：定义窗口的拖拽和缩放》 章节我们将会详细介绍。
2. 应用的快速检索
作为一款提升效率的工具，其最重要的功能之一是快速检索当前系统中安装的应用，并立即启动这些应用。市面上确实有很多 App 能够满足这一需求，例如：
Raycast：
Alfred：
uTools：
但是，这些软件要么不支持多平台，要么是商业化产品需要付费。所以，如果你希望了解如何自行打造一个支持应用检索和快速启动的跨平台桌面应用程序，建议你继续阅读后面的《实战篇：实现应用快速检索》章节。
3. 插件化的设计体系
作为一个桌面端效率工具箱而言，为了适配各种场景和工作的需要，不得不实现非常多的功能来满足使用需求。比如我们需要一个 远程调试&网络抓包 的工具，然后我们基于此开发了一款桌面端工具：
这也是 Rubick 最早的雏形。随后，我们发现当页面发布线上的时候，没有办法在微信环境内对线上页面进行调试，所以开发了一个基于 winner 的远程调试功能。
但随着该 Rubick 在内部不断推广和使用，所需功能也越来越多。我们需要需求管理、性能评估、埋点检测等工具。这些工具的增加一方面导致 Rubick 体积暴增，一方面又导致了用户需要不断更新软件，导致用户体验非常差。
其次，我们在推广给测试、UI 同学使用的时候，发现他们其实并不关注前面的页面调试、性能测评等功能，可能只是用到其中某一项，所以整个项目对他们来说就显得很臃肿。
因此，插件化体系设计是解决这些问题的最优解，让每个需求功能都独立成一个个插件，只需要安装需要的插件，插件可以单独迭代和发布。
如果你对插件化体系的实现原理和常用的插件开发比较感兴趣，可以阅读我们后续的 《实战篇：如何支持工具插件化》 篇进行详细阅读。
4. 实现超级面板
相信很多小伙伴听说过或体验过一些划词翻译的桌面端应用，这个功能在辅助阅读外文文档遇到生疏的语句或单词的时候，非常有用。
另外，如果你有用过 picgo 这样的软件，那你可能体验过右击菜单增强的特性：当鼠标选中图片，右击触发系统菜单的时候，会弹出系统右击菜单，并可以通过菜单面板选项进行直接上传。关于如何将你的应用选项注入到系统右击菜单项目中，我们会在《实战：Electron 应用注入到系统右键菜单》 章节详细介绍。
但是系统菜单内容毕竟太多、太杂了，而且我们无法自定义一些常用的功能。所以，我们要实现的超级面板就是一个支持快速唤起、划词翻译、文件自动匹配插件的系统菜单增强的超级"菜单"：
在《实战篇：实现超级面板》的章节中，我们将会一起从零实现一个属于自己的"超级菜单"来提升自己的工作效率。
5. 本地数据库和多端数据同步
桌面端 App 在运行期间会产生大量的数据，这些数据大多是存储在本地环境的，所以我们需要设计与实现一套客户端环境下的本地数据库的存储策略。
另外，如果你有多个电脑设备，你可能会经常碰到设备之前数据传输的问题。其实这个场景我们经常碰到，比如微信、钉钉、QQ 这些聊天类软件，它们自带了多端数据同步的能力：当我们在手机上进行聊天时产生了大量数据，在当我们登录电脑设备时，这些数据又可以被同步到电脑终端上。
而我们的应用场景也很类似，我们的 Rubick 工具箱装载了大量的插件，如果我们工作的电脑 A 使用了这些插件并产生了一些数据，当我们再切到电脑 B 上使用插件的时候，我们是希望这些数据是能够同步的。因此，我们需要设计一套多端数据同步的能力：《实战篇：本地数据库和多端数据同步》。
6. 菜单、截图、取色
作为一款桌面端软件，我们也会实现一些通用和基础的功能。比如:
截图
截图能力在 Electron 中有两种实现方式，一种是基于 Electron 的 desktopCapturer API 和 web 提供的 navigator.mediaDevices.getUserMedia。还有一种是调用原生截图功能，关于这两种方式，我们将会在：《实战篇：Electron 实现屏幕截图》 章节详细介绍。
屏幕取色
我们将会在 《实战篇：系统插件的加载和取色插件的开发》 详细介绍取色插件的实现。
总结
写小册的目的是为了开源可持续化，如果你之前已经为 Rubick 项目参与过众筹、知识星球，可以联系我，我将会为你提供小册的一折码。感谢支持！
最后，也感谢 Electron-egg 作者和 PicGo 作者对本小册的支持和推荐！