关于electron:在electron中监听系统剪贴板变化

前言

因为要实现剪贴板历史记录性能，通过查阅 electron 剪贴板文档。没有发现有剪贴板变动的钩子事件，于是决定本人实现一个。

electron 中有读取剪贴板内容 API，能够借助此 API 封装监听定时器办法。具体逻辑如下：

应用定时器一直判断内容是否雷同，如不雷同。执行剪贴板扭转回调

编写一剪贴板观察者类，实例化时传入监听的音讯 / 图片变动回调、因为频繁获取剪贴板内容可能会带来性能累赘，所以还须要反对传入自定义监听间隔时间。

返回的实例应该反对暂停和持续监听的办法。

编写剪贴板观察者类

首先定义结构函数参数的接口

import {clipboard, NativeImage} from 'electron';

interface Options {
  //  定时器获取内容判断的距离
  duration?: number;
  //  文本变动回调
  textChange?: (text: string, beforeText: string) => void;
  //  图片变动回调
  imageChange?: (image: NativeImage, beforeImage: NativeImage) => void;
}

接着定义类，编写结构器中解决传参的逻辑与裸露的 api

class ClipboardObserver {
  //  定时器
  timer: NodeJS.Timeout;
  //  变动前的文本（用于比照新获取的剪贴板文本）beforeText: string;
  //  变动去的图片（用于比照新获取的剪贴板图片）beforeImage: NativeImage;

  duration = 500;
  textChange: (text: string, beforeText: string) => void;
  imageChange: (image: NativeImage, beforeImage: NativeImage) => void;

  constructor(options: Options) {
    //  获取传入配置并保留到属性中
    const {duration, textChange, imageChange} = options;

    this.duration = duration;
    this.textChange = textChange;
    this.imageChange = imageChange;

    //  判断传入回调，默认开始执行定时器
    if (this.textChange || this.imageChange) {this.start();
    }
  }

  /**
   * 开始
   */
  start(): void {
    //  记录剪贴板目前的内容
    this.setClipboardDefaultValue();
    //  设置定时器
    this.setTimer();}

  /**
   * 暂停
   */
  stop(): void {
    //  革除定时器
    this.setTimer();}
}

clearTimer负责调用 clearInterval 来革除定时器，setClipboardDefaultValue负责设置实例中记录上一次变动的内容。

class ClipboardObserver {
  ...

  /**
   * 革除定时器
   */
  clearTimer(): void {clearInterval(this.timer);
  }

  /**
   * 设置剪贴板默认内容
   */
  setClipboardDefaultValue(): void {if (this.textChange) {
      //  electron 剪贴板读取文本办法
      this.beforeText = clipboard.readText();}
    if (this.imageChange) {
      //  electron 剪贴板读取图片办法
      this.beforeImage = clipboard.readImage();}
  }
}

setTimer 负责比拟外围的逻辑，设置定时器，并在每一轮定时器回调中判断内容是否存在变动。如内容变动，执行内容变动回调。

class ClipboardObserver {
  ...

  /**
   * 设置定时器
   */
  setTimer(): void {
    //  设置定时器
    this.timer = setInterval(() => {if (this.textChange) {const text = clipboard.readText();
        //  判断内容是否与上次读取的内容不同
        if (this.isDiffText(this.beforeText, text)) {
          //  执行变动回调
          this.textChange(text, this.beforeText);
          //  记录此次内容
          this.beforeText = text;
        }
      }

      if (this.imageChange) {const image = clipboard.readImage();
        //  判断内容是否与上次读取的内容不同
        if (this.isDiffImage(this.beforeImage, image)) {
          //  执行变动回调
          this.imageChange(image, this.beforeImage);
          //  记录此次内容
          this.beforeImage = image;
        }
      }
    }, this.duration);
  }

  /**
   * 判断内容是否不统一
   * @param beforeText
   * @param afterText
   * @returns
   */
  isDiffText(beforeText: string, afterText: string): boolean {return afterText && beforeText !== afterText;}

  /**
   * 判断图片是否不统一
   * @param beforeImage
   * @param afterImage
   * @returns
   */
  isDiffImage(beforeImage: NativeImage, afterImage: NativeImage): boolean {return afterImage && !afterImage.isEmpty() && beforeImage.toDataURL() !== afterImage.toDataURL();
  }
}

打完出工

至此，剪贴板观察者类的逻辑曾经实现了。咱们在代码中能够这样食用

const clipboardObserver = new ClipboardObserver({textChange: (text: string, beforeText: string) => {//  解决文本变动的逻辑},
  imageChange: (image: Electron.NativeImage, beforeText: Electron.NativeImage) => {//  解决图片变动的逻辑}
});

//  也能够暂停
clipboardObserver.stop();

//  也能够再开始
clipboardObserver.start();

我的项目已开源到 electron-clipboard-observer 中。能够将代码拷到我的项目中应用

也能够在我的项目中装置依赖 electron-clipboard-observer 装置后在我的项目内可间接援用应用。

npm install electron-clipboard-observer

或者

yarn add electron-clipboard-observer

应用

import ClipboardObserver from "electron-clipboard-observer"

const clipboardObserver = new ClipboardObserver({textChange() {},
    imageChange() {}
})

我的项目地址

代码仓库

npm