之前在网上有看到很多小伙伴基于 electron 实现了非常多好用的桌面端工具,比如图床管理工具 PicGo,就专门做图床工具。也有一些其他的类似的小工具,比如 saladict-desktop 专门做沙拉翻译查词的桌面端应用,colorpicker 专做桌面端取色工具...
我们也参考了这些小工具的设计理念,尝试在公司内部做一款桌面端工具,解决网络抓包、代理、图床、性能测评等常见场景的使用问题。最后在推广的时候,遇到了一个比较严重的问题,就是很多小工具对特定用户来说并不需要。比如测试只需要使用网络抓包、代理的功能,其他功能并不关心。此时就需要设计一款桌面端应用,类似于 App Store 那样,用到什么下载安装什么即可。这就需要实现桌面端应用的插件化。
故事背景
之前在网上有看到很多小伙伴基于
electron
实现了非常多好用的桌面端工具,比如图床管理工具 PicGo,就专门做图床工具。也有一些其他的类似的小工具,比如 saladict-desktop 专门做沙拉翻译查词的桌面端应用,colorpicker 专做桌面端取色工具...我们也参考了这些小工具的设计理念,尝试在公司内部做一款桌面端工具,解决网络抓包、代理、图床、性能测评等常见场景的使用问题。最后在推广的时候,遇到了一个比较严重的问题,就是很多小工具对特定用户来说并不需要。比如测试只需要使用网络抓包、代理的功能,其他功能并不关心。此时就需要设计一款桌面端应用,类似于
App Store
那样,用到什么下载安装什么即可。这就需要实现桌面端应用的插件化。于是乎,我们看到了 uTools 是支持插件化的桌面端应用,但是前提是我们的插件必须发布到
uTools
插件市场,才能实现多端同步下载的功能,但是公司内部的工具库有些涉及到安全信息又无法发布到uTools
插件中,所以我们特别渴望有一款类似于uTools
的内部工具箱。为了进一步提高开发工作效率,最近我们基于 electron 开发了一款媲美 uTools 的开源工具箱 rubick。该工具箱不仅仅开源,最重要的是可以使用 uTools 生态内所有开源插件!这将是巨大的能力,意味着 uTools 生态内所有插件可以无差异化使用到 rubick 中。
代码仓库:https://github.com/clouDr-f2e/rubick
插件化之旅
一开始想到做插件化,无非就是使用
electron
的webview
能力,实现类似于原生内嵌h5
那样的方式,h5
页面可以做独立发布,原生提供nativaAPI
之间通过jsBridge
来桥接调用原生的方法。这样实现并无问题,我们也尝试了做了一次。最终思路大概是:electron webview 方式
1. electron 中使用 webview
2. 实现
bridge
3. 插件借助
bridge
调用electron
的能力4. 通信
因为
proload.js
是electron
的renderer
进程的,所以如果需要使用部分main
进程的能力,则需要使用通信机制:为什么后来我们又放弃了这条路🤔 ?
其实上面的思路大致是没啥问题的,我们也基于上面的思路成功把功能抽成了插件,按照插件的方式进行安装加载。直到我们注意到
utools
的强大,感觉utools
的生态非常丰富,我们要是能集成utools
的生成那该多好呀!所以我们秉持着干不过他就成为他的原则,我们尝试着成为他。但是utools
本身并没有开源,所以没有办法去吸取一些优秀的代码实现,但是我们可以看他的官方文档。我们发现其实
utools
大多数插件都是和container
层分离的,也就是说utools
只是一个插件的容器,为插件提供了一些api
能力和方法。所以一旦我们实现了utools
加载插件的能力,实现utools
的所有API
函数,是不是就约等于实现了utools
! 我们就可以使用utools
的插件?utools 方式
按照 utools 的 文档,首先我们需要实现一个插件,必须要有个
plugin.json
,这玩意就是用来告诉utools
插件的信息。我们也按照文档来写:接下来是将写好的插件用
utools
跑起来,按照utools
的交互是复制plugin.json
到utools
搜索框即可,我们也可以实现:实现效果如下:
接下来就是进行命令搜索插件:
实现这个功能其实也就是对之前存储的
pluginConfig
的里面的features
进行遍历,找到相应的cmd
后进行下拉框展示即可。然后我们要去实现选择功能,用
webview
加载页面的能力:到此结束了?并没有!!!由于篇幅的原因,我们后续再说。本出写的插件demo已上传github: https://github.com/clouDr-f2e/rubick-plugin-demo
目前支持能力
加载utools生态插件
拿
github
上开源的 斗图 插件举例,要加载斗图插件,只需要将代码 clone下来后,复制其plugin.json
进入搜索框即可使用斗图:https://github.com/vst93/doutu-uToolsPlugin
超级面板
长按鼠标右键,即可呼起超级面板,可以根据当前鼠标选择内容,匹配对应插件能力。比如当前选择图片后长按右击,则会呼起上传图床插件:
模板
为了更贴合
uTools
的插件能力,需要实现模板功能,模板即是一个内置 UI 样式的功能插件。utools 自带的系统命令
取色
截屏
全局快捷键
最后
目前
rubick
已经实现utools
大多数核心能力,最重要的是可以使用 utools 所有生态 ! 更多能力可以前往 github 体验。如果感觉有用,可以帮忙反手一个 star ✨Rubick github