mirror of
https://github.com/rubickCenter/rubick
synced 2025-06-20 03:03:40 +08:00
2.5 KiB
2.5 KiB
开发一个最基础的插件
一个最基础插件的目录是这样的：
rubick-plugin-demo
|-- index.html
|-- logo.png
|-- plugin.json
|-- preload.js
文件说明
plugin.json
用于指定插件最基础的配置，一个最基础的配置信息如下：
{
"pluginName": "测试插件",
"author": "muwoo",
"description": "我的第一个 rubick 插件",
"main": "index.html",
"version": "0.0.2",
"logo": "logo.png",
"name": "rubick-plugin-demo",
"features": [
{
"code": "hello",
"explain": "这是一个测试的插件",
"cmds":["hello", "你好"]
}
],
"preload": "preload.js"
}
核心字段说明：
- name 插件仓库名称，需要保持和git仓库同名，不要随意变更
- pluginName 插件显示名称，用于展示给使用者
- description 插件描述，描述这个插件的作用
- main 入口文件，一般为
index.html - version 插件的版本
- features 插件核心功能列表
- features.code 插件某个功能的识别码，可用于区分不同的功能
- features.cmds 输入框内搜索该 cmd 进入插件
index.html
插件的入口文件，用于展示插件的样式，一个最基础的 html 结构可以是这样：
<!DOCTYPE html>
<html>
<body>
hello Rubick
<button id="showNotification">通知</button>
</body>
<script>
document.getElementById('showNotification').addEventListener('click', () => {
window.showNotification();
})
</script>
</html>
preload.js
细心的同学可能已经注意到上面的 index.html 使用了一个全局函数 showNotification 那么这个函数是在哪里定义的呢？
答案就是在 preload.js 里面。我们知道 electron 是可以再渲染进程中执行 node.js 的，所以 preload.js 是既可以
执行 node.js 以及执行 Rubick 提供的系统命令的位置：
window.showNotification = function () {
rubick.showNotification('HI, rubick')
}
rubick 更多支持 API 能力参考：rubick 全局API
logo.png
当前插件的logo图标，建议是 200 x 200 方形图标
测试插件
复制 plugin.json 文件，在 rubick 主窗口执行 ctrl/command + v 即可唤起安装插件的功能，选择新建rubick插件，进入插件主界面，
开启插件后，在插件主窗口即可通过命令打开插件：
本小节所有代码：rubcik-plugin-demo