为什么 document.execCommand("paste") 在 Google Chrome 中不起作用？

Question

我的扩展有问题。我想从剪贴板粘贴数据。

到目前为止，我得到了这样的信息：

function pasteAndGo()
{
    document.execCommand('paste')
    alert("Pasted")
}

出现了警报，但没有粘贴任何内容。

我感觉 document 部分需要更改，但我不知道该怎么做。有什么想法吗？

Answer 1

出于安全考虑，“合理”的浏览器不支持调用 document.execCommand("paste")，因为它可能使脚本能够从剪贴板读取敏感数据（如密码）。

这是关于剪贴板事件的 document.execCommand("...") 的兼容性矩阵：

	“复制”	“粘贴”	“剪切”
IE	OK	OK	n/a
Edge	OK	n/a	OK
Firefox	OK	n/a	OK
Chrome	好的	不适用	好的

我的两点意见：

• Edge、Firefox 和 Chrome< /em> 是“合理的”，因为它们阻止从剪贴板粘贴/读取数据。它们确实启用了剪切，因为剪切只是复制然后删除。
• IE 的行为对我来说毫无意义，因为它启用了“有风险的”粘贴，但不执行剪切事件。

您可以使用功能检测可能的命令>document.queryCommandSupported 方法。

编辑：根据 MDN，document.queryCommandSupported 现已弃用，不应再使用。

Answer 2

Chrome 中曾经有一个实验性的剪贴板 API，但在 Chrome 13 中被删除。Chrome

已转向更标准的 document.execCommand('paste')、document.execCommand(' copy') 和 document.execCommand('cut') 命令：

• Mozilla 中的富文本编辑 - MDN 文档（存档）

在 Chrome 中，您需要添加权限到您的清单：“clipboardRead”和“clipboardWrite”。

• 声明权限 - Chrome 文档

在 Chrome 38 之前，这些剪贴板权限仅适用于扩展程序页面，例如后台脚本。从 Chrome 39 开始，内容脚本在清单文件中声明剪贴板权限后也可以使用这些剪贴板 API。

• 内容中不尊重 clipboardRead/clipboardWrite 权限脚本 - Chromium 问题 (#395376)

Answer 3

这对我来说在背景页面中效果很好。

function getClipboard() {
    var pasteTarget = document.createElement("div");
    pasteTarget.contentEditable = true;
    var actElem = document.activeElement.appendChild(pasteTarget).parentNode;
    pasteTarget.focus();
    document.execCommand("Paste", null, null);
    var paste = pasteTarget.innerText;
    actElem.removeChild(pasteTarget);
    return paste;
};

当然，您的扩展程序仍然需要“clipboardRead”权限，并且您必须使用消息传递将此信息返回到您的内容脚本：

content.js：

chrome.extension.sendMessage({
    cmd: "clipboard", //$NON-NLS-0$
    action: "paste" //$NON-NLS-0$
}, function(response) {
    if (response.paste) {
        var range = document.getSelection().getRangeAt(0);
        range.deleteContents();
        range.insertNode(document.createTextNode(response.paste));
    }
});

background.js：

function getClipboard() {
    var pasteTarget = document.createElement("div");
    pasteTarget.contentEditable = true;
    var actElem = document.activeElement.appendChild(pasteTarget).parentNode;
    pasteTarget.focus();
    document.execCommand("Paste", null, null);
    var paste = pasteTarget.innerText;
    actElem.removeChild(pasteTarget);
    return paste;
};

function onClipboardMessage(request, sender, sendResponse) {
    if (request.action === "paste") { //$NON-NLS-0$
        sendResponse({
            paste: getClipboard()
        });
    }
}

chrome.extension.onMessage.addListener(onClipboardMessage);

Answer 4

您不能在常规页面上执行它，只能在后台页面中执行。

Answer 5

您需要设置 clipboardRead 权限才能使用 document.execCommand('paste') 和 clipboardWrite 权限才能使用 execCommand('复制') 和 execCommand('cut')。
否则，权限将被拒绝并且不会发生任何事情。

请查看此链接了解更多详情。

Answer 6

您可以通过手动执行相同的操作来模仿粘贴：

1. 可选：当用户尝试粘贴时触发
2. 获取剪贴板的内容（需要通过浏览器提供的弹出窗口获得用户的许可）
3. 将内容插入活动控件
4. 可选：触发真实粘贴会触发的事件（为了任何侦听器的利益）

首先关注步骤 #2 和 #3，在本例中，我检查活动元素是否是文本输入。如果是这样，我通过替换该文本框的突出显示内容并重新定位光标来模拟粘贴。

function myPaste() {
  navigator.clipboard.readText()
    .then(clipText => {
      const el = document.activeElement;
      if (el.nodeName === 'INPUT') {
        const newCursorPos = el.selectionStart + clipText.length;
        el.value =
          el.value.substring(0, el.selectionStart) +
          clipText +
          el.value.substring(el.selectionEnd);
        el.setSelectionRange(newCursorPos, newCursorPos);
      }
    });
}

对于#1，添加一个侦听器来拦截用户的粘贴尝试：

addEventListener("paste", pasteHandler);

function pasteHandler(e) {
  e.preventDefault();
  myPaste();
}

对于#4，在 el.setSelectionRange(newCursorPos, newCursorPos); 之后添加此内容：

el.dispatchEvent(new Event('input'));
el.dispatchEvent(new Event('change'));

请注意，如果您使用的是操作响应式框架的反应式框架，基于 DOM 代表您的数据绑定，您需要将光标位置更新推迟到下一次 DOM 渲染之后。例如：

Vue.nextTick(() => {
  el.setSelectionRange(newCursorPos, newCursorPos);
});

Answer 7

您需要一个能够接收内容的焦点控件...

有关 JS 中剪贴板的一些示例，请参见 http://www.geekpedia.com/tutorial126_Clipboard-cut-copy-and-paste-with-JavaScript.html
和 http://help.dottoro.com/ljcvtcaw.php

关于 Chrome 扩展程序参见复制/粘贴在 Chrome 扩展程序中不起作用

Answer 8

由于在manifest v3上无法与Service Worker一起使用，经过长时间的研究，我找到了更好的解决方案：（您仍然需要在manifest中设置clipboardRead权限）

navigator.clipboard
        .readText()
        .then(
            (clipText) => console.log(clipText)
        );