系统插件的加载和取色插件的开发

plugin
|-- index.js
└── package.json

{
  "pluginType": "system",
  "entry": "index.js"
}

// index.js
module.exports = () => {
  return {
    // 定义 beforeReady 钩子函数
    beforeReady() {
      // ...
    }
    // 定义 onReady 钩子函数
    onReady(ctx) {
      // ...
    },
    // 定义 onRunning 钩子函数
    onRunning(ctx) {
      // ...
    },
    // 定义 onQuit 钩子函数
    onQuit() {
      // ...
    }
 }
}

import electron, { app, protocol } from 'electron';

class App {
  constructor() {
    // 注册协议
    protocol.registerSchemesAsPrivileged([
      { scheme: 'app', privileges: { secure: true, standard: true } },
    ]);
    // 处理多应用实例
    const gotTheLock = app.requestSingleInstanceLock();
    if (!gotTheLock) {
      app.quit();
    } else {
      // 注册系统插件
      this.systemPlugins = registerSystemPlugin();
      // 注册生命周期
      this.beforeReady();
      this.onReady();
      this.onRunning();
      this.onQuit();
    }
  }
  beforeReady() {
    // ...
    // 触发 onBeforeReady
    this.systemPlugins.triggerBeforeReadyHooks()
  }

  createWindow() {
    this.windowCreator.init();
  }
  
  onReady() {
    const readyFunction = async () => {
      // ...
      // 触发 onReady
      this.systemPlugins.triggerReadyHooks();
    };
    if (!app.isReady()) {
      app.on('ready', readyFunction);
    } else {
      readyFunction();
    }
  }

  onRunning() {
    app.on('second-instance', (event, commandLine, workingDirectory) => {
      // ...
      if (win) {
        if (win.isMinimized()) {
          win.restore();
        }
        win.focus();
      }
    });
    app.on('activate', () => {
      // ...
    });
    // 触发 onRunning
    this.systemPlugins.triggerOnRunningHooks();
  }

  onQuit() {
    // ...
    app.on('window-all-closed', () => {
      if (process.platform !== 'darwin') {
        app.quit();
      }
    });

    app.on('will-quit', () => {
      // ...
      // 触发 OnQuit
      this.systemPlugins.triggerOnQuitHooks();
    });
  }
}

export default new App();

// registerSystemPlugin.js
import path from 'path';
import fs from 'fs';
// 插件通过 npm 安装下载的路径
import { PLUGIN_INSTALL_DIR } from '@/common/constans/main';

const registerSystemPlugin = () => {
  // ...
  // 通过 pluginType 从所有插件 totalPlugins 中过滤出系统插件
  let systemPlugins = totalPlugins.filter(
    (plugin) => plugin.pluginType === 'system'
  );
  // 处理插件的 entry 路径，由相对路径转为绝对路径 
  systemPlugins = systemPlugins
    .map((plugin) => {
      try {
        const pluginPath = path.resolve(
          PLUGIN_INSTALL_DIR,
          'node_modules',
          plugin.name
        );
        return {
          ...plugin,
          indexPath: path.join(pluginPath, './', plugin.entry),
        };
      } catch (e) {
        return false;
      }
    })
    .filter(Boolean);
  
  // 定义插件的所有钩子函数
  const hooks = {
    onReady: [],
  };

  // 收集所有系统插件的 onReady 钩子函数
  systemPlugins.forEach((plugin) => {
    if (fs.existsSync(plugin.indexPath)) {
      const pluginModule = __non_webpack_require__(plugin.indexPath)();
      hooks.onReady.push(pluginModule.onReady);
    }
  });
  
  // 定义触发所有插件的 onReady 钩子
  const triggerReadyHooks = (ctx) => {
    hooks.onReady.forEach((hook: any) => {
      try {
        hook && hook(ctx);
      } catch (e) {
        console.log(e);
      }
    });
  };

  return {
    triggerReadyHooks,
  };
};

$ vue create rubick-plugin-colorpicker

.
├── README.md
├── babel.config.js
├── jsconfig.json
├── package.json
├── public
│   ├── favicon.ico
│   └── index.html
├── src
│   ├── App.vue
│   ├── assets
│   │   └── logo.png
│   ├── components
│   │   └── HelloWorld.vue
│   └── main.js
├── vue.config.js
└── yarn.lock

public
├── favicon.ico
├── index.html
├── package.json
└── preload.js

{
  "name": "rubick-plugin-colorpicker",
  "pluginName": "取色器",
  "version": "1.0.0",
  "description": "取色器",
  "main": "index.html",
  "preload": "preload.js",
  "logo": "https://pic1.zhimg.com/80/v2-5f1810a71af6eefcd77edbbf07ea1cc7_720w.png",
  "pluginType": "ui",
  "features": [
    {
      "code": "colorpicker",
      "explain": "取色器",
      "cmds": [
        "colorpicker",
        "qs",
        "取色"
      ]
    }
  ]
}

// vue.config.js
const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  // ...
  publicPath: process.env.NODE_ENV === "production" ? "" : "/",
})

$ npm run build

dist
├── css
│   └── app.2cf79ad6.css
├── favicon.ico
├── index.html
├── js
│   ├── app.42798930.js
│   ├── app.42798930.js.map
│   ├── chunk-vendors.4114fffc.js
│   └── chunk-vendors.4114fffc.js.map
├── package.json
└── preload.js

$ npm link

// public/package.json
{
  "development": "http://localhost:8080",
}

$ npm install electron-color-picker

const {
  getColorHexRGB,
  darwinGetScreenPermissionGranted,
  darwinRequestScreenPermissionPopup
} = require('electron-color-picker');
const os = require("os");

const isDarwin = os.platform === 'darwin';

window.colorpicker = async () => {
  try {
    window.rubick.hideMainWindow();
    // 如果是 macOS 需要检测屏幕录制权限
    if (isDarwin) {
      const permission = await darwinGetScreenPermissionGranted();
      if (!permission) {
        return darwinRequestScreenPermissionPopup();
      }
    }
    
    // 调用 color picker 来取色
    const result = await getColorHexRGB();
    // 取色成功写入剪贴板，然后并展示系统通知
    if (result) {
      window.rubick.copyText(result);
      window.rubick.showNotification(`${result}, 取色成功！已复制剪切板`);
    }
  } catch (e) {
    console.log(e);
  }
}

<!-- App.vue -->
<template>
  <button @click="window.colorpicker">取色</button>
</template>

$ npm publish