Chrome扩展剪切复制粘贴异常：无法捕获剪切/复制缓冲区

嘿，我刚好碰到过类似的问题，Chrome 对剪贴板的访问限制确实有点严格，尤其是复制和剪切操作，和粘贴的处理逻辑不太一样。你能捕获粘贴内容是因为paste事件里直接读取剪贴板数据的限制相对宽松，但copy和cut事件需要更规范的处理方式，再加上Chrome的安全策略，才导致你现在的问题。

下面是针对你的场景（Windows10 + Chrome65）的解决方案：

核心原因 #

Chrome 要求剪贴板的读写操作必须由用户主动触发（比如鼠标点击、键盘快捷键），而且在copy/cut事件中，你需要通过事件对象的clipboardData属性来操作，不能直接异步访问系统剪贴板，否则会被浏览器的安全机制阻止。

完整示例代码 #

把你的textarea部分替换成下面的代码，就能同时捕获剪切、复制、粘贴的内容了：

<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Strict//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd'>
<html xmlns='http://www.w3.org/1999/xhtml' xmlns:v='urn:schemas-microsoft-com:vml'>
<body>
  <hr/>Clipboard TEST<br/>
  <textarea id="testArea" rows="5" cols="50" placeholder="在这里输入内容，试试复制/剪切/粘贴"></textarea>
  <div id="log"></div>

  <script>
    const textarea = document.getElementById('testArea');
    const log = document.getElementById('log');

    // 监听复制事件
    textarea.addEventListener('copy', (e) => {
      // 阻止默认复制行为，避免浏览器自动把选中内容放到剪贴板
      e.preventDefault();
      // 获取选中的文本内容
      const selectedText = textarea.value.substring(textarea.selectionStart, textarea.selectionEnd);
      // 将内容写入剪贴板（可选，如果你需要自定义剪贴板内容的话）
      e.clipboardData.setData('text/plain', selectedText);
      // 记录日志
      log.innerHTML += `<p>复制操作捕获内容：${selectedText}</p>`;
    });

    // 监听剪切事件
    textarea.addEventListener('cut', (e) => {
      e.preventDefault();
      const selectedText = textarea.value.substring(textarea.selectionStart, textarea.selectionEnd);
      e.clipboardData.setData('text/plain', selectedText);
      // 手动删除textarea里的选中内容（因为阻止了默认剪切行为）
      textarea.value = textarea.value.slice(0, textarea.selectionStart) + textarea.value.slice(textarea.selectionEnd);
      log.innerHTML += `<p>剪切操作捕获内容：${selectedText}</p>`;
    });

    // 监听粘贴事件
    textarea.addEventListener('paste', (e) => {
      e.preventDefault();
      // 获取剪贴板里的文本内容
      const pastedText = e.clipboardData.getData('text/plain');
      // 将内容插入到textarea的光标位置
      const start = textarea.selectionStart;
      const end = textarea.selectionEnd;
      textarea.value = textarea.value.slice(0, start) + pastedText + textarea.value.slice(end);
      // 调整光标位置到粘贴内容之后
      textarea.selectionStart = textarea.selectionEnd = start + pastedText.length;
      log.innerHTML += `<p>粘贴操作捕获内容：${pastedText}</p>`;
    });
  </script>
</body>
</html>

关键注意点 #

• 必须阻止默认行为：在copy和cut事件里调用e.preventDefault()，否则浏览器会执行默认的剪贴板操作，你自定义的逻辑可能无法生效。
• 用户触发限制：所有剪贴板操作必须由用户的主动操作触发（比如按Ctrl+C、右键菜单复制），如果是页面加载后自动执行的代码，Chrome会直接阻止访问剪贴板。
• Chrome65的兼容性：这个版本已经支持clipboardData在事件对象中的使用，不需要额外的权限申请，但如果要在事件外访问剪贴板（比如异步读取），需要使用navigator.clipboard API，并且需要用户授权。

如果还有问题，检查一下是否有其他脚本阻止了事件冒泡，或者页面的安全上下文（比如是否是HTTPS？不过本地文件file://在Chrome里也能测试剪贴板操作）。

内容的提问来源于stack exchange，提问作者chup