Javascript 在 chrome 扩展中正确使用 execcommand("paste")
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7144702/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
the proper use of execcommand("paste") in a chrome extension
提问by monopoint
I'm trying to paste clipboard data into a textarea using execcommand("paste")with a chome extension, but i cannot seem to get it to work.
permissions are set.
I have tried to set focus()on the textarea, but document.execCommand("paste")does nothing, and I get no error.
calling execcommand("paste")from background page also does nothing.
我正在尝试使用execcommand("paste")chome 扩展将剪贴板数据粘贴到 textarea 中，但我似乎无法让它工作。权限设置。我试图focus()在 textarea 上进行设置，但document.execCommand("paste")什么也没做，也没有出现错误。execcommand("paste")从后台页面调用也没有任何作用。
<form>
<textarea id="ta"></textarea>
</form>
<script type="text/javascript">
document.findElemetById("ta").focus();
document.execCommand("paste");
</script>
回答by Alasdair
Clipboard functionality is a key part of my extensionso I've seen all the normal problems. On my background page I expose a copyand a pastefunction and the page itself contains <textarea id="sandbox"></textarea>;
剪贴板功能是我的扩展的关键部分，所以我已经看到了所有的正常问题。在我的背景页面上，我公开了一个copy和一个paste函数，页面本身包含<textarea id="sandbox"></textarea>；
function copy(str) {
var sandbox = $('#sandbox').val(str).select();
document.execCommand('copy');
sandbox.val('');
}
function paste() {
var result = '',
sandbox = $('#sandbox').val('').select();
if (document.execCommand('paste')) {
result = sandbox.val();
}
sandbox.val('');
return result;
}
I'm using jQueryfor simplicity but you get the idea. Now any time I want to use the clipboard functionality I simply call the relevant function. Other pages in my extension can access this API via chrome.extension.getBackgroundPage()but you can also use chrome.runtime.getBackgroundPage(callback)if your background page is an event page.
为简单起见，我使用jQuery，但您明白了。现在，每当我想使用剪贴板功能时，我只需调用相关函数即可。我的扩展程序中的其他页面可以通过chrome.extension.getBackgroundPage()访问此 API，但如果您的背景页面是事件页面，您也可以使用chrome.runtime.getBackgroundPage(callback)。
I'm not sure if this is best practice or if such a thing even exists for this functionality yet but this definitely works for me and is very clean.
我不确定这是否是最佳实践，或者这个功能是否存在这样的东西，但这绝对适用于我并且非常干净。
回答by user1978019
This is too long for a comment on Alasdair's excellent response, so I'm creating another answer. Alasdair's answer is excellent and worked great for me, but as a newcomer to Chrome extensions it still took me a while to get it working. For anyone in a similar position, here is an expansion on his answer.
对 Alasdair 的出色回应发表评论太长了，所以我正在创建另一个答案。Alasdair 的回答非常好，对我来说效果很好，但作为 Chrome 扩展程序的新手，我仍然需要一段时间才能让它工作。对于处于类似位置的任何人，这是他的答案的扩展。
Background/event pages are able to interact with the system clipboard, provided you've requested the appropriate permissions. They are not able to interact with the DOM of pages the user has loaded. Content scripts cannot interact with the system clipboard, but they can interact with the DOM of pages the user has loaded. Take a look at the explanation of the extension architecturefor a good overview of all this.
背景/事件页面能够与系统剪贴板交互，前提是您已请求适当的权限。它们无法与用户加载的页面的 DOM 交互。内容脚本不能与系统剪贴板交互，但它们可以与用户加载的页面的 DOM 交互。查看扩展架构的解释，以获得对所有这些的一个很好的概述。
This essentially means you need to do the copy/paste actions from the system clipboard in your event/background pages, which is what Alasdair has outlined above. Any pasting or copying from the DOM of the page the user is viewing has to occur in your content script. The two scripts are able to communicate pretty easily with message passing.
这实质上意味着您需要从系统剪贴板中的事件/背景页面中执行复制/粘贴操作，这正是 Alasdair 上面概述的内容。从用户正在查看的页面的 DOM 进行的任何粘贴或复制都必须在您的内容脚本中进行。这两个脚本可以很容易地通过消息传递进行通信。
I have an extensionwhose only purpose is to paste, and the architecture came largely from this post. If you want to see the above technique in practice, take a look at the code. In particular, background.html, background.js, and contentscript.js.
我有一个扩展，其唯一目的是粘贴，架构主要来自这篇文章。如果您想在实践中看到上述技术，请查看代码。特别是background.html、background.js和contentscript.js。
If you're in a real hurry, here is a gist.
如果你真的很着急，这里有一个要点。
回答by Nikhil Ghuse
function PasteString() {
var editor = document.getElementById("TemplateSubPage");
editor.focus();
// editor.select();
document.execCommand('Paste');
}
function CopyString() {
var input = document.getElementById("TemplateSubPage");
input.focus();
// input..select();
document.execCommand('Copy');
if (document.selection) {
document.selection.empty();
} else if (window.getSelection) {
window.getSelection().removeAllRanges();
}
}
Hope this will work for you
希望这对你有用
