feat: 增加 rubick 文档

2026-03-05 12:46:12 +08:00 · 2021-08-05 21:21:20 +08:00
parent ffb6ac96dc
commit 3a70af5c49
15 changed files with 11379 additions and 0 deletions
--- a/docs/docs/dev/README.md
+++ b/docs/docs/dev/README.md
@@ -0,0 +1,81 @@
+## 开发一个最基础的插件
+一个最基础插件的目录是这样的：
+```
+rubick-plugin-demo
+  |-- index.html
+  |-- logo.png
+  |-- plugin.json
+  |-- preload.js
+```
+## 文件说明
+### plugin.json
+用于指定插件最基础的配置，一个最基础的配置信息如下：
+```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` 结构可以是这样：
+```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` 提供的系统命令的位置：
+```js
+window.showNotification = function () {
+  rubick.showNotification('HI, rubick')
+}
+```
+rubick 更多支持 API 能力参考：[rubick 全局API](https://github.com/clouDr-f2e/rubick/blob/master/static/preload.js#L49)
+
+### logo.png
+当前插件的logo图标，建议是 200 x 200 方形图标
+
+## 测试插件
+复制 `plugin.json` 文件，在 `rubick` 主窗口执行 `ctrl/command + v` 即可唤起安装插件的功能，选择`新建rubick插件`，进入插件主界面，
+开启插件后，在插件主窗口即可通过命令打开插件：
+
+![](/images/5.gif)
+
+本小节所有代码：[rubcik-plugin-demo](https://github.com/clouDr-f2e/rubick-plugin-demo)
+