LessonPlugin 插件开发简要教程

pylxu

创建一个文件夹

完善清单文件 plugin.json ，以下是一个示例

   {
     "name": "通知插件",
     "version": "1.0.0",
     "description": "前置类通知插件：队列化通知、TTS播报、类型音频与两种窗口样式",
     "id": "notify.plugin",
     "actions": [
       { "id": "openSettings", "text": "打开通知设置", "target": "openSettings", "icon": "ri-settings-3-line" }
     ]
   }

id：插件的唯一标识
name：插件显示名称
version：插件的版本号
description：管理页面显示的描述
actions：在管理页面的卡片操作按钮，target 指向入口文件导出的函数名

书写入口文件 index.js

在 init(api) 中进行插件初始化（可上报启动页状态）。
在 functions 中暴露可被 Actions 或其他插件调用的函数。

在 automationEvents 中声明自动化事件用于工作流编排。

下面是一个示例：

const path = require('path');
const { BrowserWindow, Notification } = require('electron');

const functions = {
  hello: (from) => `Hello ${from || ''}!`,
  openSettings: async () => {
    const win = new BrowserWindow({
      width: 800, height: 500, title: 'Example Plugin', frame: false,
      titleBarStyle: 'hidden', webPreferences: { preload: path.join(__dirname, 'preload.js'), nodeIntegration: false, contextIsolation: true }
    });
    win.loadFile(path.join(__dirname, 'index.html'));
    win.show();
    return true;
  },
  notify: (title = '自动化示例', body = '') => {
    try { new Notification({ title: String(title), body: String(body) }).show(); return true; } catch { return false; }
  },
  logTime: () => {
    try { const fs = require('fs'); const p = path.join(__dirname, 'automation.log'); fs.appendFileSync(p, new Date().toISOString() + '\n', 'utf-8'); return p; } catch { return null; }
  }
};

const automationEvents = [
  { id: 'notify', name: 'notify', desc: '系统通知', params: [ { name: 'title', type: 'string', hint: '通知标题' }, { name: 'body', type: 'string', hint: '通知内容' } ] },
  { id: 'logTime', name: 'logTime', desc: '时间写入日志文件', params: [] }
];

const init = async (api) => {
  api.splash.setStatus('plugin:init', '初始化');
  // 执行耗时任务...
  api.splash.setStatus('plugin:init', '加载完成');
};

module.exports = { name: '测试插件', version: '1.0.0', init, functions, automationEvents };

Electron窗口 preload.js
以下是一段代码示例（可自行选用需要的接口）

const { contextBridge, ipcRenderer } = require('electron');
contextBridge.exposeInMainWorld('pluginAPI', {
  // 调用其他插件函数：pluginId 为清单 id
  call: (pluginId, fnName, args) => ipcRenderer.invoke('plugin:call', pluginId, fnName, args),
  // 可选：注册当前插件对外函数（如窗口内函数给主程序记录）
  register: (pluginId, fns) => ipcRenderer.invoke('plugin:register', pluginId, fns),
  // 事件订阅/派发（如自动化事件总线）
  subscribe: (eventName) => ipcRenderer.invoke('plugin:event:subscribe', eventName),
  onEvent: (handler) => ipcRenderer.on('plugin:event', (_e, name, payload) => handler && handler(name, payload)),
  // 窗口控制（最小化、关闭等）
  windowControl: (action) => ipcRenderer.invoke('window:control', action),
  // 调试辅助：接受主进程路由调用
  onInvoke: (handler) => ipcRenderer.on('plugin:invoke', (_e, fn, args) => handler && handler(fn, args))
});

前端页面 index.html
- 样式推荐：引入主程序样式资源以统一风格：
  - renderer/titlebar.css （自定义标题栏）
  - renderer/settings.css （通用深色主题、表单与卡片风格）
  - renderer/remixicon-local.css （图标）
- 页面中通过 window.pluginAPI 与主程序交互（如调用其他插件函数、控制窗口、订阅事件）。
  Actions 映射与调用
- 在 plugin.json 中的 actions.target 指向 index.js 导出的 functions 的同名函数。
- 管理页面点击按钮后，主程序会路由到该函数；函数返回值应尽量简单（布尔、字符串、对象）。
自动化事件
- 在入口中导出 automationEvents ，用于设置页面查询与工作流设计：
  - id ：事件唯一标识
  - name ：显示名（可与 id 相同）
  - desc ：描述
  - params ：参数列表（含 name 、 type 、 hint ）
- 在运行时，主程序会根据事件表进行调用并传参与路由。
配置与通信
- 统一配置存储：主程序在 preload/settings.js 暴露了 configGet/Set/GetAll/EnsureDefaults 等，便于插件读写配置并广播。
- 跨窗口通信：通过主进程 webContents.send(...) 路由事件到插件窗口，渲染端用 window.addEventListener('message') 或 ipcRenderer.on(...) 接收。
- 安全建议：所有跨进程通信都应进行参数校验与 try/catch 容错，避免未捕获异常导致插件崩溃。
打包为zip文件