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

时间:2019-01-27 08:19:19

标签: google-chrome firefox google-chrome-extension firefox-webextensions

我写了一个Firefox扩展程序,它读取剪贴板,并且如果它具有一些PEM证书,它将在新选项卡中打印其详细信息。我正在尝试移植到Chrome。这是行不通的。我在做什么错了?

我要求剪贴板读取manifest.json中的内容,并在后台脚本中运行它,并且在Firefox中运行良好。

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

这在Chrome中失败,并显示“无法在'剪贴板'上执行'readText':非法调用”。我究竟做错了什么?如何在Chrome浏览器中也可以使用此功能?大多数答案涉及创建输入,获得焦点,执行粘贴。那真的很复杂,我希望我不必这样做。它在Firefox中确实能很好地工作,为什么在Chrome中变得复杂?

1 个答案:

答案 0 :(得分:1)

您可以使用@bumble/clipboard。这是一个用于Chrome扩展程序的npm库,它模仿剪贴板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