Webextension：无法将文本从剪贴板粘贴到输入元素

Question

我正在为 Firefox 编写 WebExtension。在其中，我希望能够在 webextension 和剪贴板之间复制任意文本。据我从文档中看到的（https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Interact_with_the_clipboard），没有办法在javascript变量和剪贴板之间传输数据，看来我需要绕道DOM元素。

为了将文本复制到剪贴板，我想出了一个虚拟方法，它与这个问题中描述的非常相似：

function copy(contentToCopy) {
  var txtToCopy = document.createElement('input');
  txtToCopy.style.left = '-300px';
  txtToCopy.style.position = 'absolute';
  txtToCopy.value = contentToCopy;
  document.body.appendChild(txtToCopy);
  txtToCopy.select();

  console.log("Copying ", txtToCopy.value);
  var res = document.execCommand('copy');
  console.log("Copy result ", res);

  txtToCopy.parentNode.removeChild(txtToCopy);
}

然后我可以用

调用它

copy('any arbitrary text');

而且效果很好。

但是，我也需要以同样的方式访问剪贴板内容，但无法正常工作：

function paste() {
  var txtToPaste = document.createElement('input');
  txtToPaste.style.left = '-300px';
  txtToPaste.style.position = 'absolute';
  txtToPaste.value = 'dummy content for debugging';
  document.body.appendChild(txtToPaste);
  txtToPaste.focus();
  txtToPaste.select();

  var res = document.execCommand('paste');
  var result = txtToPaste.value;
  console.log("Paste result ", res);
  console.log('Pasted text', result);
  console.log('txtToPaste', txtToPaste);

  txtToPaste.parentNode.removeChild(txtToPaste);

  return result;
}

我也在我的 manifest.json 文件中请求了适当的许可：

"permissions": ["clipboardRead" ]

然后我尝试这样调用方法：

var dataFromClipboard = paste();

但是，无论我在调用该方法时剪贴板中有什么数据，"Paste result" 总是 "true" 而 "result" 总是 "dummy content for debugging"（即不变来自我用来初始化虚拟字段的内容）。

我正在 Windows 7（64 位）上使用 Firefox 57.0.2（64 位）进行测试。

我是不是遗漏了什么明显的东西？为什么这对一个方向起作用而不对另一个方向起作用？

javascript 控制台（无论是在测试扩展的选项卡中还是在全局浏览器控制台中）都没有显示任何错误。

Answer 1

再看 https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Interact_with_the_clipboard#Reading_from_the_clipboard 之后，我看到了标题为 "Browser-specific considerations" 的部分。我不知道为什么我在第一次通读时错过了它，但它提供了解决方案：

Firefox supports the "clipboardRead" permission from version 54, but does require an element in content editable mode, which for content scripts only works with a <textarea>.

因此，根据这些知识，我修改了我的函数如下：

function paste() {
  var txtToPaste = document.createElement('textarea');
  txtToPaste.id = "txtToPaste";
  txtToPaste.style.left = '-300px';
  txtToPaste.style.position = 'absolute';
  txtToPaste.contentEditable = true;
  txtToPaste.textContent = '';
  document.body.appendChild(txtToPaste);
  txtToPaste.focus();
  txtToPaste.select();

  var res = document.execCommand('paste');
  var result = txtToPaste.textContent;
  console.log("Copy result ", res);
  console.log('Pasted text', result);
  console.log('txtToPaste', txtToPaste);

  txtToPaste.parentNode.removeChild(txtToPaste);

  return result;
}

进行这些更改（将 input 更改为 textarea；将 contentEditable 设置为 true) 该方法如我所愿。

Webextension：无法将文本从剪贴板粘贴到输入元素

Webextension: cannot paste text from clipboard to input element

firefox-addon-webextensions