Question

我正在为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();

但是，无论我在调用方法时我的剪贴板中有什么数据，“粘贴结果”始终为“true”，“result”为“用于调试的虚拟内容”（即与我以前用于初始化的内容不变）假场）。

我正在使用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，我看到了标题为“浏览器特定注意事项”的部分。我不知道为什么我在第一次阅读时错过了它，但它提供了解决方案：

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;
}

通过这些更改（将输入更改为 textarea ;将 contentEditable 设置为 true ），该方法可以正常工作我曾希望。

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

1 个答案: