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

【问题标题】：Webextension: cannot paste text from clipboard to input elementWebextension：无法将文本从剪贴板粘贴到输入元素
【发布时间】：2017-12-23 12:53:08
【问题描述】：

我正在为 Firefox 编写一个 WebExtension。在其中，我希望能够在 webextension 和剪贴板之间复制任意文本。据我从文档 (https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Interact_with_the_clipboard) 中可以看出，无法在 javascript 变量和剪贴板之间传输数据，看来我需要绕道而行 DOM 元素。

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

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();

但是，无论我在调用该方法时剪贴板中有什么数据，“粘贴结果”始终为“真”，“结果”为“用于调试的虚拟内容”（即与我用来初始化的内容相同）虚拟字段）。

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

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

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

【问题讨论】：

标签： firefox-addon-webextensions

【解决方案1】：

再次查看https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Interact_with_the_clipboard#Reading_from_the_clipboard 后，我看到了标题为“浏览器特定注意事项”的部分。我不知道为什么我在第一次阅读时错过了它，但它提供了解决方案：

Firefox 从 54 版开始支持“clipboardRead”权限，但是确实需要content editable mode 中的元素，用于内容脚本仅适用于 <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）该方法可以像我一样工作希望。

【讨论】：