时间戳

首页 > 解决方案 > 如何在 Chrome 扩展程序中使用 navigator.clipboard.readText()？

google-chrome - 如何在 Chrome 扩展程序中使用 navigator.clipboard.readText()？

问题描述

我编写了一个 Firefox 扩展来读取剪贴板，如果它有一些 PEM 证书，它将在新选项卡中打印它的详细信息。我正在尝试移植到 Chrome。这没用。我究竟做错了什么？

我在 manifest.json 中询问了 clipboardRead，并在后台脚本中运行它，它在 Firefox 中运行良好。

 navigator.clipboard.readText().then(function (textFromClipboard) {
   //do stuff with textFromClipboard
 });

这在 Chrome 中失败，并显示“无法在 'Clipboard' 上执行 'readText'：非法调用”。我究竟做错了什么？我怎样才能在 Chrome 中也能做到这一点？大多数答案涉及创建输入、获得焦点、执行粘贴。这真的很复杂，我希望我不必这样做。它在 Firefox 中运行得非常好，为什么它在 Chrome 中很复杂？

标签： google-chromefirefoxgoogle-chrome-extensionfirefox-addon-webextensions

解决方案

您可以使用@bumble/clipboard. 它是一个模拟剪贴板 API 的用于 Chrome 扩展的 npm 库。

它不需要用户交互，并且在后台脚本中工作。它只需要clipboardRead或clipboardWrite权限。

import { clipboard } from '@bumble/clipboard'

// Read text from the clipboard, or "paste"
clipboard.readText()
  .then((text) => {
    console.log('clipboard contents', text)
  })

// Write text to the clipboard, or "copy"
clipboard.writeText('write this to the clipboard')
  .then((text) => {
    console.log(text, 'was written to the clipboard')
  })

披露：我为自己编写了这个库来解决@ddreian 提到的相同问题。它是一个基于 Promise 的非阻塞解决方案，document.execCommand在后台使用。

推荐阅读