Chrome扩展粘贴到输入元素答案

【问题标题】：Chrome Extension Paste into input elementChrome扩展粘贴到输入元素
【发布时间】：2016-09-26 23:28:43
【问题描述】：

假设我有一个简单的页面。内容如下。

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

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

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

我知道我可以使用“execCommand('paste')”函数在 chrome 扩展中粘贴。但是我不知道如何修改上面的代码，以便将用户剪贴板的内容粘贴到输入元素中。

我会尝试类似：

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

但是，不出所料，这行不通。

【问题讨论】：

【解决方案1】：

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

【讨论】：

谢谢——我非常感谢您的回复。但这些例子似乎很复杂。我想要的只是一次将剪贴板的内容粘贴到单个输入元素的内容中。由于 chrome 施加的限制，肯定遵循这一点很棘手，但我真的很难理解这个例子。
@JBL 它本质上是在后台页面（不是你的实际页面）中创建一个textarea，然后它选择textarea，从剪贴板粘贴值，然后返回粘贴值的值。然后它通过消息将值发送到内容脚本，该消息可以访问您页面的 DOM，并将值插入到您的 textarea 元素中。消息传递对于从后台页面获取内容到内容脚本以及因此页面的 DOM 非常重要。它绕过了许多安全限制。
在 2014 年，他们修复了它，因此内容脚本可以使用复制/粘贴，因此不需要背景页面。 - bugs.chromium.org/p/chromium/issues/detail?id=395376

【解决方案2】：

从 2014 年和 this bugfix 开始，您现在可以直接在 content_scripts 中使用复制/粘贴，前提是您已在清单中声明了适当的权限。

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

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

如果您希望捕获格式化文本，则需要使用DIV contentEditable=true 而不是TEXTAREA。

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

【讨论】：