用Electron做个小工具?这个或许是终极版
muwoo opened this issue · 0 comments
故事背景
之前在网上有看到很多小伙伴基于 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
<webview src="https://xxx.xx.com/index.html" preload="preload.js" />
2. 实现 bridge
// preload.js
window.rubickBridge = {
sayHello() {
console.log('hello world')
}
}
3. 插件借助 bridge
调用 electron
的能力
<html>
<body>
<div>这是一个插件<div>
</body>
<script>
window.rubickBridge.sayHello()
</script>
</html>
4. 通信
因为 proload.js
是 electron
的 renderer
进程的,所以如果需要使用部分 main
进程的能力,则需要使用通信机制:
// main process
ipcMain.on('msg-trigger', async (event, arg) => {
const window = arg.winId ? BrowserWindow.fromId(arg.winId) : mainWindow
const operators = arg.type.split('.');
let fn = Api;
operators.forEach((op) => {
fn = fn[op];
});
const data = await fn(arg, window);
event.sender.send(`msg-back-${arg.type}`, data);
});
// renderer process
ipcRenderer.send('msg-trigger', {
type: 'getPath',
name,
});
ipcRenderer.on(`msg-back-getPath`, (e, result) => {
console.log(result)
});
为什么后来我们又放弃了这条路🤔 ?
其实上面的思路大致是没啥问题的,我们也基于上面的思路成功把功能抽成了插件,按照插件的方式进行安装加载。直到我们注意到 utools
的强大,感觉 utools
的生态非常丰富,我们要是能集成 utools
的生成那该多好呀!所以我们秉持着干不过他就成为他的原则,我们尝试着成为他。但是 utools
本身并没有开源,所以没有办法去吸取一些优秀的代码实现,但是我们可以看他的官方文档。
我们发现其实 utools
大多数插件都是和 container
层分离的,也就是说 utools
只是一个插件的容器,为插件提供了一些 api
能力和方法。所以一旦我们实现了utools
加载插件的能力,实现 utools
的所有 API
函数,是不是就约等于实现了 utools
! 我们就可以使用 utools
的插件?
utools 方式
按照 utools 的 文档,首先我们需要实现一个插件,必须要有个 plugin.json
,这玩意就是用来告诉 utools
插件的信息。我们也按照文档来写:
{
"pluginName": "helloWorld",
"description": "我的第一个uTools插件",
"main": "index.html",
"version": "0.0.1",
"logo": "logo.png",
"features": [
{
"code": "hello",
"explain": "hello world",
"cmds":["hello", "你好"]
}
]
}
接下来是将写好的插件用 utools
跑起来,按照 utools
的交互是复制 plugin.json
到utools
搜索框即可,我们也可以实现:
// 监听 input change
// 读取剪切板内容
const fileUrl = clipboard.read('public.file-url').replace('file://', '');
// 复制文件
if (fileUrl && value === 'plugin.json') {
// 读取 plugin.json 配置
const config = JSON.parse(fs.readFileSync(fileUrl, 'utf-8'));
const pluginConfig = {
...config,
// index.html 文件位置,用于webview加载
sourceFile: path.join(fileUrl, `../${config.main || 'index.html'}`),
id: uuidv4(),
type: 'dev',
icon: 'image://' + path.join(fileUrl, `../${config.logo}`),
subType: (() => {
if (config.main) {
return ''
}
return 'template';
})()
};
}
实现效果如下:
接下来就是进行命令搜索插件:
实现这个功能其实也就是对之前存储的pluginConfig
的里面的 features
进行遍历,找到相应的 cmd
后进行下拉框展示即可。
然后我们要去实现选择功能,用 webview
加载页面的能力:
<template>
<div>
<webview id="webview" :src="path" :preload="preload"/>
</div>
</template>
<script>
export default {
data() {
return {
path: `File://${this.$route.query.sourceFile}`,
preload: `File://${path.join(__static, './preload.js')}`,
webview: null,
query: this.$route.query,
config: {}
}
}
}
</script>
到此结束了?并没有!!!由于篇幅的原因,我们后续再说。本出写的插件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 ✨