如何在Chrome扩展程序中使用navigator.clipboard.readText()?

6bc51xsx  于 2023-09-28  发布在  Go
关注(0)|答案(2)|浏览(228)

我写了一个Firefox扩展,读取剪贴板,如果它有一些PEM证书,它会在一个新的标签打印它的细节。我正在尝试移植到Chrome。它不起作用。我做错了什么?
我在manifest.json中请求clipboardRead,然后在后台脚本中运行它,它在Firefox中运行得很好。

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

这在Chrome中失败,并显示“Failed to execute 'readText' on 'Clipboard':非法调用”。我做错了什么?我如何在Chrome中也能做到这一点?大多数答案涉及创建输入、获取焦点、执行粘贴。这真的很复杂,我希望我不必这样做。它在Firefox中运行得很好,为什么在Chrome中很复杂?

1mrurvl1

1mrurvl11#

可以使用@bumble/clipboard。它是一个用于Chrome扩展的npm库,可以模拟Clipboard API。
它不需要用户交互,并且在后台脚本中工作。它只需要clipboardReadclipboardWrite权限。

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
nom7f22z

nom7f22z2#

在代码(popup.js)中添加:

navigator.clipboard.readText = function() {
  const textarea = document.createElement('textarea')
  document.body.appendChild(textarea)
  textarea.focus()
  document.execCommand('paste')
  const {value} = textarea
  textarea.remove()
  return value
}

不要忘记manifest中的权限:

"permissions": [ "clipboardRead" ],

相关问题