✨ 支持插件分离，增加开发者工具功能

src/main/browsers/detach.ts

@@ -0,0 +1,57 @@
+import { app, BrowserWindow, protocol } from "electron";
+import path from "path";
+export default () => {
+  let win: any;
+
+  const init = (pluginInfo, viewInfo, view) => {
+    createWindow(pluginInfo, viewInfo, view);
+  };
+
+  const createWindow = async (pluginInfo, viewInfo, view) => {
+    win = new BrowserWindow({
+      height: viewInfo.height,
+      width: viewInfo.width,
+      autoHideMenuBar: true,
+      titleBarStyle: "hidden",
+      trafficLightPosition: { x: 12, y: 21 },
+      title: pluginInfo.pluginName,
+      resizable: true,
+      frame: true,
+      show: false,
+      enableLargerThanScreen: true,
+      x: viewInfo.x,
+      y: viewInfo.y,
+      webPreferences: {
+        webSecurity: false,
+        enableRemoteModule: true,
+        backgroundThrottling: false,
+        contextIsolation: false,
+        webviewTag: true,
+        nodeIntegration: true,
+      },
+    });
+    if (process.env.WEBPACK_DEV_SERVER_URL) {
+      // Load the url of the dev server if in development mode
+      win.loadURL("http://localhost:8082");
+    } else {
+      win.loadURL(`file://${path.join(__static, "./detach/index.html")}`);
+    }
+
+    win.on("closed", () => {
+      win = undefined;
+    });
+
+    win.once("ready-to-show", () => {
+      win.setBrowserView(view);
+      win.webContents.executeJavaScript(`window.initDetach(${JSON.stringify(pluginInfo)})`)
+      win.show();
+    });
+  };
+
+  const getWindow = () => win;
+
+  return {
+    init,
+    getWindow,
+  };
+};

src/main/browsers/index.ts

@@ -1,3 +1,4 @@
 import main from "./main";
 import runner from "./runner";
-export { main, runner };
+import detach from "./detach";
+export { main, runner, detach };

src/main/browsers/runner.ts

@@ -63,7 +63,6 @@ export default () => {
       window.setSize(800, 660);
       view.setBounds({ x: 0, y: 60, width: 800, height: 600 });
       view.setAutoResize({ width: true });
-      commonConst.dev() && view.webContents.openDevTools();
       executeHooks("PluginEnter", plugin.ext);
       executeHooks("PluginReady", plugin.ext);
       window.webContents.executeJavaScript(`window.pluginLoaded()`);

src/main/common/api.ts

@@ -7,13 +7,14 @@ import {
   nativeImage,
   clipboard,
 } from "electron";
-import { runner } from "../browsers";
+import { runner, detach } from "../browsers";
 import fs from "fs";
 import { LocalDb } from "@/core";
 import plist from "plist";
 import { DECODE_KEY } from "@/common/constans/main";
 
 const runnerInstance = runner();
+const detachInstance = detach();
 const dbInstance = new LocalDb(app.getPath("userData"));
 
 dbInstance.init();
@@ -21,6 +22,11 @@ dbInstance.init();
 const API: any = {
   currentPlugin: null,
   DBKEY: "RUBICK_DB_DEFAULT",
+  getCurrentWindow: (window, e) => {
+    let originWindow = BrowserWindow.fromWebContents(e.sender);
+    if (originWindow !== window) originWindow = detachInstance.getWindow();
+    return originWindow;
+  },
   __EscapeKeyDown: (event, input, window) => {
     if (input.type !== "keyDown") return;
     if (!(input.meta || input.control || input.shift || input.alt)) {
@@ -43,13 +49,22 @@ const API: any = {
     );
     window.show();
     // 按 ESC 退出插件
-    window.webContents.on("before-input-event", (event, input) => API.__EscapeKeyDown(event, input, window));
-    runnerInstance.getView().webContents.on("before-input-event", (event, input) => API.__EscapeKeyDown(event, input, window));
+    window.webContents.on("before-input-event", (event, input) =>
+      API.__EscapeKeyDown(event, input, window)
+    );
+    runnerInstance
+      .getView()
+      .webContents.on("before-input-event", (event, input) =>
+        API.__EscapeKeyDown(event, input, window)
+      );
   },
   removePlugin(e, window) {
     API.currentPlugin = null;
     runnerInstance.removeView(window);
   },
+  openPluginDevTools() {
+    runnerInstance.getView().webContents.openDevTools({ mode: "detach" });
+  },
   hideMainWindow(arg, window) {
     window.hide();
   },
@@ -59,28 +74,36 @@ const API: any = {
   showOpenDialog({ data }, window) {
     dialog.showOpenDialogSync(window, data);
   },
-  setExpendHeight({ data: height }, window: BrowserWindow) {
+  setExpendHeight({ data: height }, window: BrowserWindow, e) {
+    const originWindow = API.getCurrentWindow(window, e);
+    if (!originWindow) return;
     const targetHeight = height;
-    window.setSize(window.getSize()[0], targetHeight);
+    originWindow.setSize(originWindow.getSize()[0], targetHeight);
   },
-  setSubInput({ data }, window) {
-    window.webContents.executeJavaScript(
+  setSubInput({ data }, window, e) {
+    const originWindow = API.getCurrentWindow(window, e);
+    if (!originWindow) return;
+    originWindow.webContents.executeJavaScript(
       `window.setSubInput(${JSON.stringify({
         placeholder: data.placeholder,
       })})`
     );
   },
   subInputBlur() {
-    runnerInstance.getView().webContents.focus()
+    runnerInstance.getView().webContents.focus();
   },
   sendSubInputChangeEvent({ data }) {
     runnerInstance.executeHooks("SubInputChange", data);
   },
-  removeSubInput(e, window) {
-    window.webContents.executeJavaScript(`window.removeSubInput()`);
+  removeSubInput(data, window, e) {
+    const originWindow = API.getCurrentWindow(window, e);
+    if (!originWindow) return;
+    originWindow.webContents.executeJavaScript(`window.removeSubInput()`);
   },
-  setSubInputValue({ data }, window) {
-    window.webContents.executeJavaScript(
+  setSubInputValue({ data }, window, e) {
+    const originWindow = API.getCurrentWindow(window, e);
+    if (!originWindow) return;
+    originWindow.webContents.executeJavaScript(
       `window.setSubInputValue(${JSON.stringify({
         value: data.text,
       })})`
@@ -189,6 +212,30 @@ const API: any = {
       });
     }
   },
+
+  detachPlugin(e, window) {
+    if (!API.currentPlugin) return;
+    const view = window.getBrowserView();
+    window.setBrowserView(null);
+    window.webContents
+      .executeJavaScript(`window.getMainInputInfo()`)
+      .then((res) => {
+        detachInstance.init(
+          {
+            ...API.currentPlugin,
+            subInput: res,
+          },
+          window.getBounds(),
+          view
+        );
+        window.webContents.executeJavaScript(`window.initRubick()`);
+        window.setSize(window.getSize()[0], 60);
+        API.currentPlugin = null;
+      });
+  },
+  detachInputChange({ data }) {
+    API.sendSubInputChangeEvent({ data });
+  },
 };
 
 export default (mainWindow: BrowserWindow) => {