实现工具自由，开源的桌面工具箱( 三 ) 在一切开始之前

到这里，当复制 plugin.json 进入搜索框时，便可直接出现 2 个选项，一个新建插件，一个复制路径的功能：

文章图片

文章图片
当点击新建 rubick 插件功能时，则需要跳转到 home 页，加载插件的基础内容，唯一需要注意的是 home 页加载的内容高度应该是 Rubick 最大窗口的高度。所以需要调整窗口大小： ipcRenderer.send('changeWindowSize-rubick', {height: getWindowHeight(), });
关于 renderer 里面的 Vue 代码这里就不再详细介绍了，因为大多是 css 画一下就好了，直接来看展示界面：

文章图片

文章图片
到这里，就完成了开发者模式，接下来再聊聊插件是如何在 Rubick 中跑起来的。
2.3 插件运行原理
运行插件需要容器 Electron 提供了一个 webview 的容器来加载外部网页。所以可以借助 webview 的能力实现动态网页渲染，这里所谓的网页就是插件。但是网页无法使用 node 的能力，而且做插件的目的就是为了开放与约束，需要对插件开放一些内置的 API 能力。好在 webview 提供了一个 preload 的能力，可以在页面加载的时候去预置一个脚本来执行。
也就是说可以给自己的插件写一个 preload.js 来加载。但这里需要注意既要保持插件的个性又得向插件内注入全局 API 供插件使用，所以可以直接加载 Rubick 内置 preload.js ，在 preload.js 内再加载个性化的 preload.js：// webview plugin.vue
对于 preload.js 就可以这么用啦：if (location.href.indexOf('targetFile') > -1) {filePath = decodeURIComponent(getQueryVariable('targetFile'));} else {filePath = location.pathname.replace('file://', '');}window.utools = {// utools 所有的 api 实现}// 加载插件 preload.jsrequire(path.join(filePath, '../preload.js'));
到这里就已经实现了一个最基础的插件加载，效果如下：

文章图片

文章图片
2.4 支持更多体验能力
随后为了更加贴近 uTools 的体验，我又开始着手让 Rubick 支持更多原生体验增强的特性：超级面板、模板、系统命令、全局快捷键等

文章图片

文章图片
三、最后
再次致敬 uTools！我做 Rubick 旨在技术分享，并不以商业化为目的。
以上就是我和 Rubick 的故事，如果 Rubick 对您有帮助，那么就请给个 Star ? 鼓励一下。
【实现工具自由，开源的桌面工具箱】来源：HelloGitHub