前言

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

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

代码仓库

Rubick github

功能截图:

文件夹下长按右建

选择文件后长按右键

选择文字后长按右键

实现原理

获取选中文案

要实现改功能核心是要读取当前用户选中的文案或者文件,根据当前选择内容进行不同功能展示。但是核心有一个问题是如何来实现获取当前选中的内容。这个问题思考了很久很久,要想获取选中的文案,感觉唯一的办法是使用 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

基于 Electron 实现 uTools 的超级面板的更多相关文章

  1. 为了提高开发效率,我实现了 uTools 的超级面板

    前言 为了进一步提高开发工作效率,最近我们基于 electron 开发了一款媲美 uTools 的开源工具箱 rubick.该工具箱不仅仅开源,最重要的是可以使用 uTools 生态内所有开源插件!这 ...

  2. 基于 Electron 的 Rubick 2.4k star 啦,同步更新新功能!

    为什么要做 Rubick 其实做 Rubick 1.x 的初衷就是解决自己的问题的:特别需要一款支持自定义插件的桌面端应用来简化使用者安装庞大桌面端应用的臃肿.而且涉及到数据安全的问题,插件只能在公司 ...

  3. 基于 electron 实现简单易用的抓包、mock 工具

    背景 经常我们要去看一些页面所发出的请求时,经常会用到 Charles 做为抓包工具来进行接口抓取,但一方面市面是很多抓包工具都是收费或者无法二次开发的.当前我们团队大多数用的也都是 Charles, ...

  4. 使用Squirrel创建基于Electron开发的Windows 应用安装包

    我们把自己开发的Electron应用发布之前,需要把app打包成简单的安装包,这样app更容易被获取,以此来发布我们的应用.我们可以参考Wix或其他的安装程序,但是对于Electron应用更好的打包程 ...

  5. 基于 Electron 的爬虫框架 Nightmare

    作者:William 本文为原创文章,转载请注明作者及出处 Electron 可以让你使用纯 JavaScript 调用 Chrome 丰富的原生的接口来创造桌面应用.你可以把它看作一个专注于桌面应用 ...

  6. MySQL 8.0.12 基于Windows 安装教程(超级详细)

    MySQL 8.0.12 基于Windows 安装教程(超级详细) (一步一步来,装不了你找我!) 本教程仅适用Windows系统,如果你原本装了没装上,一定要先删除原本的数据库,执行:mysqld ...

  7. 基于electron+vue+element构建项目模板之【自定义标题栏&右键菜单项篇】

    1.概述 开发平台OS:windows 开发平台IDE:vs code 本篇章将介绍自定义标题栏和右键菜单项,基于electron现有版本安全性的建议,此次的改造中主进程和渲染进程彼此语境隔离,通过预 ...

  8. 基于electron+vue+element构建项目模板之【改造项目篇】

    1.概述 开发平台OS:windows 开发平台IDE:vs code 上一篇中已完成了electron-vue项目的创建,本篇章中则介绍在此项目基础上进行取消devtools的安装.项目结构的改造. ...

  9. Pencil 基于Electron的GUI原型工具之菜单三探 印象笔记同步

    今天一鼓作气实现Pencil整合印象笔记同步的功能. 缘起,像Sketch或者Adobe XD等一些工具都开始陆续支持整合阿里巴巴的"语雀"云服务,将设计文档同步到云端,便于团队协 ...

随机推荐

  1. kvm虚拟机迁移(6)

    一.迁移简介 迁移:      系统的迁移是指把源主机上的操作系统和应用程序移动到目的主机,并且能够在目的主机上正常运行. 在没有虚拟机的时代,物理机之间的迁移依靠的是系统备份和恢复技术.在源主机上实 ...

  2. Linux进阶之RAID磁盘阵列、系统启动及dd命令

    本节内容 1.      磁盘阵列 RAID0: 条带卷 2+ 100% 读写速度快,不容错 RAID1: 镜像卷 2   50% 读写速度慢,容错 RAID5: 奇偶校验条带卷 3 读写速度快,容错 ...

  3. Linux命令学习—— fdisk -l 查看硬盘及分区信息

    Linux命令学习(3)-- fdisk -l 查看硬盘及分区信息注意:在使用fdisk命令时要加上sudo命令,否则什么也不能输出linux fdisk 命令和df区别是什么? fdisk工具是分区 ...

  4. 三大主流开源硬件对比:Arduino vs Raspberry Pi vs BeagleBone

    http://www.elecfans.com/emb/361236_3.html 下文摘自上面的链接 软硬件整合是今年一再被提及的话题,如今我们也可以看到不少硬件创业的成功案例,比如Jawbone ...

  5. 《Matlab实用案例》系列Matlab从入门到精通实用100例案例教程目录(持续更新)

    目录 1. 专栏简介 2. 专栏地址 3. 专栏目录 1. 专栏简介 2. 专栏地址 「 刘一哥与GIS的故事 」之<Matlab使用案例> 3. 专栏目录 [MATLAB统计分析与应用1 ...

  6. 解决Maven资源过滤问题

    向pom文件添加如下配置 <build> <resources> <resource> <directory>src/main/java</dir ...

  7. JVM-垃圾收集算法基础

    目录 目录 前言 手动释放内存导致的问题 垃圾判定方法 哪些对象是垃圾? 引用计数算法 可达性分析法 垃圾收集算法 标记-清除 优点 缺点 优化 标记-复制 优点 缺点 优化 标记-整理 优点 缺点 ...

  8. Socks协议以及代理转发工具分析

    前言:最近两场HW都和某师傅学到了挺多东西,算是对内网不出网以及流量代理做个分析(SOCKS协议,reGeorg原理分析,frp的代理,CS上的代理 SOCKS SOCKS(Socks:Protoco ...

  9. MinkowskiBroadcast广播

    MinkowskiBroadcast广播 MinkowskiBroadcastAddition广播加法 class MinkowskiEngine.MinkowskiBroadcastAddition ...

  10. python_selenium 之yaml文件读取(以读取元素信息为例)

    一.yaml源文件编写 二.对yaml文件内容的读取 #coding=gbkimport osimport yamlcurrent_path=os.path.dirname(__file__)yaml ...