Chrome扩展程序粘贴到输入元素中

Question

让我想象一下我有一个简单的页面。具有以下内容。

<form>
     <input type="text" id="startText">
</form>

我有一个带有脚本的chrome扩展程序，可以在此页面加载时触发。我还在chrome中配置了所有相关权限（即clipboardRead）。在页面加载时触发的脚本称为action.js。它目前只有一行代码：

document.getElementById("startText").value = "text";

我知道我可以使用＆＃34; execCommand（＆＃39; paste＆＃39;）＆＃34;功能粘贴在chrome扩展名中。但我无法弄清楚如何修改上面的代码，以便将用户剪贴板的内容粘贴到输入元素中。

我会尝试类似的事情：

document.getElementById("startText").value.execCommand('paste')

但不出所料，这不起作用。

Answer 1

出于安全原因，只能通过背景页面访问剪贴板。问题是后台页面无法与DOM交互，只有内容脚本可以。查看this gist，它在后台页面和内容脚本之间使用messages passing解决了此问题。

Answer 2

截至2014年和this bugfix，您现在可以直接在content_scripts中使用复制/粘贴，假设您已在清单中声明了适当的权限。

重要的是要记住execCommand('paste')不会返回剪贴板的内容，但实际上会触发粘贴操作到文档的焦点元素和选择区域。因此，粘贴到输入元素的代码将是：

document.getElementById("startText").select();
var didSucceed = document.execCommand('paste');

如果您希望捕获带格式的文字，则需要使用DIV contentEditable=true代替TEXTAREA。

如果您希望查看使用旧方法使用背景页面的工作示例，则可以看到我的BBCodePaste extension。