基于 Electron 实现 uTools 的超级面板

客官°小女子只卖身不卖艺 2022-08-28 04:46 40阅读 0赞

点击上方 前端瓶子君，关注公众号

回复算法，加入前端编程面试算法每日一题群

![a6cdde5c1acd2fe2bb58cec39772689e.png][]

## 前言 ##

为了进一步提高开发工作效率，最近我们基于 `electron` 开发了一款媲美 `uTools` 的开源工具箱 rubick\[1\]。该工具箱不仅仅开源，最重要的是可以使用 `uTools` 生态内所有开源插件！这将是巨大的能力，意味着 `uTools` 生态内所有插件可以无差异化使用到 rubick\[2\] 中。

设计交互上为了更能提高用户的使用效率，我们又尝试去实现了 `uTools` 中非常优秀的一些设计，比如：**超级面板**。该功能可以通过鼠标快速唤起`uTools` 插件能力，而不用再打开应用。比如上传图片，只要我们安装了图床插件，那么当鼠标选择桌面上某张图片时，即可快速呼出上传图片的菜单选项，方便省事。接下来一起看看实现方式吧！

### 代码仓库 ###

Rubick github\[3\]

### 功能截图： ###

#### 文件夹下长按右建 ####

![30c09e88bf46cdc3beef345821d0ae11.png][]

#### 选择文件后长按右键 ####

![6c527e5e5bb3485c11e34f1106379cad.png][]

#### 选择文字后长按右键 ####

![359ae44e828f7768b4cc501f5897f4cd.png][]

## 实现原理 ##

### 获取选中文案 ###

要实现改功能核心是要读取当前用户选中的文案或者文件，根据当前选择内容进行不同功能展示。但是核心有一个问题是如何来实现获取当前选中的内容。这个问题思考了很久很久，要想获取选中的文案，感觉唯一的办法是使用 `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\[4\] 有问题可以随时提 issue 我们会及时反馈。

另外，如果觉得设计实现思路对你有用，也欢迎给个 Star：github.com/clouDr-f2e/…\[5\]

关于本文

# 作者：muwoo #

https://juejin.cn/post/6981253825445249060

## 最后 ##

欢迎关注【前端瓶子君】✿✿ヽ(°▽°)ノ✿

回复「算法」，加入前端编程源码算法群，每日一道面试题（工作日），第二天瓶子君都会很认真的解答哟！

回复「交流」，吹吹水、聊聊技术、吐吐槽！

回复「阅读」，每日刷刷高质量好文！

如果这篇文章对你有帮助，「在看」是最大的支持

》》面试官也在看的算法资料《《

“在看和转发”就是最大的支持

[a6cdde5c1acd2fe2bb58cec39772689e.png]: /images/20220828/4fcae9a8b6f340758c411ec5cb65969b.png
[30c09e88bf46cdc3beef345821d0ae11.png]: /images/20220828/858bce67b1114cecafeac671e5d43cc9.png
[6c527e5e5bb3485c11e34f1106379cad.png]: /images/20220828/21e1e935ab0648c3a825f43f6243cb4a.png
[359ae44e828f7768b4cc501f5897f4cd.png]: /images/20220828/7707983e0347441996f000fe89ccc228.png