Chrome扩展MV3：addEventListener事件能否传递？剪贴板设置失效

你的判断完全正确——跨事件传递并操作原事件的clipboardData确实行不通，问题出在事件对象的生命周期绑定上。

原因分析 #

浏览器为每个copy/paste事件创建的ClipboardData实例是临时绑定到当前事件流程的：

• copy事件触发时，浏览器生成专属的clipboardData，仅在copy事件的处理周期内可修改；
• 当copy事件处理完毕，这个clipboardData会被浏览器回收或标记为不可用，后续在paste事件里再操作它自然无效；
• navigator.clipboard.write是独立于事件的系统剪贴板API，直接和系统剪贴板交互，不受单个事件生命周期限制，所以能正常工作。

替代方案 #

根据你的需求，有几种可行的处理方式：

1. 直接在copy事件内完成剪贴板修改（最推荐）

这是最符合浏览器事件设计逻辑的方式，不需要绕到paste事件：

document.addEventListener("copy", fixClipboard_handler_for_copy);

function fixClipboard_handler_for_copy(myCopyEvent) {
  myCopyEvent.preventDefault();
  // 直接在copy事件内修改剪贴板内容
  myCopyEvent.clipboardData.setData('text/html', "ffffffffff");
  myCopyEvent.clipboardData.setData('text/plain', "ffffffzzzzzzffff");
}

2. 若必须依赖paste事件逻辑，用全局变量暂存数据后通过navigator.clipboard写入

如果你的业务逻辑必须在paste事件里处理，可先在copy事件中保存要写入的数据，再在paste事件里调用系统剪贴板API：

let pendingClipboardData = null;

document.addEventListener("copy", (copyEvent) => {
  copyEvent.preventDefault();
  // 暂存要写入剪贴板的数据
  pendingClipboardData = {
    html: "ffffffffff",
    plain: "ffffffzzzzzzffff"
  };

  setTimeout(() => {
    document.addEventListener('paste', wrappedPasteHandler);
    document.execCommand('paste');
    document.removeEventListener('paste', wrappedPasteHandler);
  }, 0);
});

function wrappedPasteHandler(pasteEvent) {
  pasteEvent.preventDefault();
  if (!pendingClipboardData) return;

  // 用navigator.clipboard写入数据
  const htmlBlob = new Blob([pendingClipboardData.html], { type: 'text/html' });
  const plainBlob = new Blob([pendingClipboardData.plain], { type: 'text/plain' });
  navigator.clipboard.write([
    new ClipboardItem({
      'text/html': htmlBlob,
      'text/plain': plainBlob
    })
  ]).then(() => {
    console.log('剪贴板已更新');
    pendingClipboardData = null;
  }).catch(err => {
    console.error('写入失败:', err);
  });
}

3. 跳过事件传递，直接用navigator.clipboard完成读写

如果你的场景是需要先读取剪贴板内容再修改，可直接用navigator.clipboard.read读取，处理后再写入：

document.addEventListener("copy", async (copyEvent) => {
  copyEvent.preventDefault();
  try {
    // 读取当前剪贴板内容（可选，根据需求调整）
    const items = await navigator.clipboard.read();
    // 处理数据...
    // 写入修改后的数据
    await navigator.clipboard.write([
      new ClipboardItem({
        'text/html': new Blob(["修改后的HTML"], { type: 'text/html' }),
        'text/plain': new Blob(["修改后的纯文本"], { type: 'text/plain' })
      })
    ]);
  } catch (err) {
    console.error('处理剪贴板失败:', err);
  }
});

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