在 chrome 扩展中正确使用 execcommand("paste")

IT技术 javascript google-chrome-extension
2021-02-25 20:58:45

我正在尝试使用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>
3个回答

剪贴板功能是我的扩展的一个关键部分,所以我已经看到了所有的正常问题。在我的背景页面上,我公开了一个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;
}

为简单起见,我使用jQuery,但您明白了。现在每当我想使用剪贴板功能时,我只需调用相关函数即可。我的扩展程序中的其他页面可以通过chrome.extension.getBackgroundPage()访问此 API,如果您的背景页面是事件页面,您也可以使用chrome.runtime.getBackgroundPage(callback)

我不确定这是否是最佳实践,或者这个功能是否存在这样的东西,但这绝对对我有用并且非常干净。

您好,今天 07/21/2015,document.execCommand('copy') 在没有扩展的情况下工作正常,但 document.execCommand('paste') 不起作用。我还需要扩展吗?
2021-04-30 20:58:45
确保您也设置了权限。“权限”:[“剪贴板写入”]
2021-05-14 20:58:45
非常感谢您我无法让您的代码开箱即用,但更改 result = sandbox.val(); 结果 = $("#sandbox").val(); 成功了
2021-05-17 20:58:45
有人可以展示一个没有 jQuery 的例子吗?也许链接到github要点?那会有所帮助
2021-05-19 20:58:45
啊,救命稻草!有一个问题,我复制了一些使用 textarea style='display: none;' 的其他代码 这停止了​​它的工作,但这完美地解决了这个问题!
2021-05-20 20:58:45

对 Alasdair 的出色回应发表评论太长了,所以我正在创建另一个答案。Alasdair 的回答非常好,对我来说效果很好,但作为 Chrome 扩展程序的新手,我仍然需要一段时间才能让它工作。对于处于类似位置的任何人,这是他的答案的扩展。

背景/事件页面能够与系统剪贴板交互,前提是您已请求适当的权限。它们无法与用户加载的页面的 DOM 交互。内容脚本不能与系统剪贴板交互,但它们可以与用户加载的页面的 DOM 交互。查看扩展架构解释,以获得对所有这些的一个很好的概述。

这实质上意味着您需要从系统剪贴板中的事件/背景页面执行复制/粘贴操作,这正是 Alasdair 上面概述的内容。从用户正在查看的页面的 DOM 进行的任何粘贴或复制都必须在您的内容脚本中进行。这两个脚本可以很容易地通过消息传递进行通信

我有一个扩展,其唯一目的是粘贴,架构主要来自这篇文章。如果您想在实践中看到上述技术,请查看代码特别是background.htmlbackground.jscontentscript.js

如果你真的很着急,这里有一个要点

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

希望这对你有用