為了提高開發效率，我實現了 uTools 的超級皮膚

muwooo發表於2021-07-02

前言

為了進一步提高開發工作效率，最近我們基於 electron 開發了一款媲美 uTools 的開源工具箱 rubick。該工具箱不僅僅開源，最重要的是可以使用 uTools 生態內所有開源外掛！這將是巨大的能力，意味著 uTools 生態內所有外掛可以無差異化使用到 rubick 中。為了更滿足 uTools 生態使用者的習慣，提高工作開發效率，我們又實現了 uTools 的超級皮膚能力：

程式碼倉庫

Rubick github

功能截圖：

資料夾下長按右建

為了提高開發效率，我實現了 uTools 的超級皮膚

選擇檔案後長按右鍵

為了提高開發效率，我實現了 uTools 的超級皮膚

選擇文字後長按右鍵

為了提高開發效率，我實現了 uTools 的超級皮膚

實現原理

獲取選中文案

要實現改功能核心是要讀取當前使用者選中的文案或者檔案，根據當前選擇內容進行不同功能展示。但是核心有一個問題是如何來實現獲取當前選中的內容。這個問題思考了很久很久，要想獲取選中的文案，感覺唯一的辦法是使用 ctrl + c 或者 command + c 來先複製到剪下板，再通過 electron clipboard 來獲取當前剪下板內容。但是 utools 可不是通過先複製再長按這樣的操作來實現的，而是直接選中文字或者檔案長按後呼起超級皮膚。所以一定要在右擊長按前獲取到當前選中的內容。

如果要這麼幹，可能真的無解了，之前就因為這麼想，才被無解了。正確的思路應該是先長按再獲取選中的內容。別看只是掉了個個，但實現確實天壤之別：

  1. 先獲取選中內容：這就要求我們必須監聽原生系統選中事件，但是 electron 並沒有提供能力，我們也無法監聽系統選擇事件。
  2. 先右擊，後獲取內容，這樣的好處在於先右擊可以通過監聽滑鼠右擊事件，相比選擇事件更加容易。

所以思路就有了，先監聽長按右擊事件：

// macos
const mouseEvents = require("osx-mouse");

const mouseTrack = mouseEvents();
// 按下去的 time
let down_time = 0;

// 是否彈起
let isPress = false;

// 監聽右擊
mouseTrack.on('right-down', () => {
    isPress = true;
    down_time = Date.now();
    // 長按 500ms 後觸發
    setTimeout(async () => {
      if (isPress) {
        // 獲取選中內容
        const copyResult = await getSelectedText();
    }, 500);
})
mouseTrack.on('right-up', () => {
    isPress = false;
});

接下來一步就是要去實現獲取選中內容，要獲取選中內容有個比較騷的操作，就是：

  1. 通過 clipboard 先獲取當前剪下板內容，並存下 A
  2. 通過 robot.js 來呼叫系統 command + c 或者 ctrl + c
  3. 再通過 clipboard 先獲取當前剪下板內容，並存下 B
  4. 再將 A 寫到剪下板中，返回 B

先存剪下板內容的目的在於我們是偷偷幫使用者執行了複製動作，當讀取完使用者選擇內容後，需要回複使用者之前的剪下板內容。接下來看一下簡單的實現：

const getSelected = () => {
  return new Promise((resolve) => {
    // 快取之前的文案
    const lastText = clipboard.readText('clipboard');

    const platform = process.platform;
    
    // 執行復制動作
    if (platform === 'darwin') {
      robot.keyTap('c', 'command');
    } else {
      robot.keyTap('c', 'control');
    }

    setTimeout(() => {
      // 讀取剪下板內容
      const text = clipboard.readText('clipboard') || ''
      const fileUrl = clipboard.read('public.file-url');
      
      // 恢復剪下板內容
      clipboard.writeText(lastText);

      resolve({
        text,
        fileUrl
      })
    }, 300);
  })
}

通知超級皮膚視窗當前選中內容

當獲取到了選中內容後，接下來就是需要建立超級皮膚的 BrowserWindow:

const { BrowserWindow, ipcMain, app } = require("electron");

module.exports = () => {
  let win;

  let init = (mainWindow) => {
    if (win === null || win === undefined) {
      createWindow();
    }
  };

  let createWindow = () => {
    win = new BrowserWindow({
      frame: false,
      autoHideMenuBar: true,
      width: 250,
      height: 50,
      show: false,
      alwaysOnTop: true,
      webPreferences: {
        webSecurity: false,
        enableRemoteModule: true,
        backgroundThrottling: false,
        nodeIntegration: true,
        devTools: false,
      },
    });
    win.loadURL(`file://${__static}/plugins/superPanel/index.html`);
    win.once('ready-to-show', () => win.show());
    win.on("closed", () => {
      win = undefined;
    });
  };

  let getWindow = () => win;

  return {
    init: init,
    getWindow: getWindow,
  };
};

然後再通知 superPanel 進行內容展示：

 win.webContents.send('trigger-super-panel', {
  ...copyResult,
  optionPlugin: optionPlugin.plugins,
});

超級皮膚點選操作

接下來要實現超級皮膚點選操作，這塊也是比較簡單的了，直接上程式碼好了：

1. 開啟 Terminal

const { spawn } = require ('child_process');

spawn('open', [ '-a', 'Terminal', fileUrl ]);

2. 新建檔案

remote.dialog.showSaveDialog({
  title: "請選擇要儲存的檔名",
  buttonLabel: "儲存",
  defaultPath: fileUrl.replace('file://', ''),
  showsTagField: false,
  nameFieldLabel: '',
}).then(result => {
  fs.writeFileSync(result.filePath, '');
});

3. 複製路徑

clipboard.writeText(fileUrl.replace('file://', ''))

最後

本篇主要介紹如何實現一個類似於 utools 的超級皮膚功能，當然這遠遠不是 utools 的全部，下期我們再繼續介紹如何實現 utools 其他能力。歡迎大家前往體驗 Rubick 有問題可以隨時提 issue 我們會及時反饋。

另外，如果覺得設計實現思路對你有用，也歡迎給個 Star：https://github.com/clouDr-f2e/rubick

相關文章