Gmail正文与Facebook Messenger聊天框粘贴事件监听异常

• 编辑器内置粘贴逻辑未被拦截：Gmail（基于CKEditor）和Facebook Messenger（基于Lexical）的富文本编辑器会在事件捕获阶段优先处理粘贴行为，你的代码默认在冒泡阶段监听paste事件，event.preventDefault()根本来不及阻止编辑器已经完成的原生粘贴操作，导致原URL先被插入，后续execCommand再插入修剪后的URL，最终出现叠加。
• setTimeout放大时序冲突：50ms的延迟给编辑器留足了处理原粘贴内容的时间，之后插入修剪后的URL，必然造成内容重复。
• document.execCommand兼容性差：该API已被废弃，现代定制化富文本编辑器对它的支持不一致，insertHTML可能触发编辑器的自动格式化（比如URL转链接），进一步加剧内容重复问题。

方法1：捕获阶段监听事件，优先阻止默认行为 #

将事件监听切换到捕获阶段，抢在编辑器处理前拦截粘贴，并改用insertText避免HTML解析冲突：

function pasteClipboard(){
    // 第三个参数设为true，开启捕获阶段监听
    window.addEventListener("paste", (event) => {
        event.preventDefault();
        const paste = (event.clipboardData || window.clipboardData).getData("text/plain");
        const trimmed = trimURL(paste);
        
        // 优先使用insertText，避免HTML解析问题
        if (document.execCommand('insertText', false, trimmed)) {
            return;
        }
        // 兼容不支持insertText的场景， fallback到insertHTML
        document.execCommand("insertHTML", false, trimmed);
    }, true);
}

方法2：直接操作选区替换内容（更可靠） #

用Selection和Range API直接替换光标位置内容，绕过execCommand的兼容性问题：

function pasteClipboard(){
    window.addEventListener("paste", (event) => {
        event.preventDefault();
        const paste = (event.clipboardData || window.clipboardData).getData("text/plain");
        const trimmed = trimURL(paste);
        
        const selection = window.getSelection();
        if (!selection.rangeCount) return;
        
        const range = selection.getRangeAt(0);
        range.deleteContents(); // 删除当前选区内容（若存在）
        const textNode = document.createTextNode(trimmed);
        range.insertNode(textNode);
        
        // 调整光标到插入内容末尾
        range.setStartAfter(textNode);
        range.setEndAfter(textNode);
        selection.removeAllRanges();
        selection.addRange(range);
    }, true);
}

方法3：修改剪贴板内容（最稳定） #

给扩展申请clipboardWrite权限，直接修改剪贴板内容，粘贴时自然是修剪后的URL，完全避免编辑器冲突：

1. 在manifest.json（V3）中添加权限：

{
  "permissions": ["clipboardWrite", "activeTab"]
}

2. 修改代码：

async function pasteClipboard(){
    window.addEventListener("paste", async (event) => {
        const paste = (event.clipboardData || window.clipboardData).getData("text/plain");
        const trimmed = trimURL(paste);
        // 先替换剪贴板内容，再允许默认粘贴
        await navigator.clipboard.writeText(trimmed);
    });
}

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