共计 3522 个字符，预计需要花费 9 分钟才能阅读完成。
故事背景
之前在网上有看到很多小伙伴基于 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…
目前反对能力
加载 utools 生态插件
拿 github 上开源的 斗图 插件举例，要加载斗图插件，只须要将代码 clone 下来后，复制其 plugin.json 进入搜寻框即可应用
斗图：https://github.com/vst93/dout…
超级面板
长按鼠标右键，即可呼起超级面板，能够依据以后鼠标抉择内容，匹配对应插件能力。比方以后抉择图片后长按右击，则会呼起上传图床插件：
模板
为了更贴合 uTools 的插件能力，须要实现模板性能，模板即是一个内置 UI 款式的性能插件。
utools 自带的系统命令
取色
截屏
全局快捷键
最初
目前 rubick 曾经实现 utools 大多数外围能力，最重要的是能够应用 utools 所有生态！ 更多能力能够返回 github) 体验。如果感觉有用，能够帮忙反手一个 star ✨
Rubick github