无法通过Chrome扩展内容脚本修改WhatsApp Web的textContent

问题原因 #

WhatsApp Web采用Lexical编辑器驱动聊天输入框，直接修改DOM的textContent属于操作视图层，编辑器会通过内部状态同步更新DOM。同时，keydown事件触发后，浏览器默认会处理输入字符插入到DOM，后续编辑器的状态同步会覆盖手动修改的内容，因此只有在页面延迟时能短暂看到修改效果。

解决方案 #

要真正修改聊天框内容，需要直接操作Lexical编辑器的内部状态，同时阻止浏览器默认的输入行为：

代码示例 #

window.addEventListener("load", () => {
    document.addEventListener('keydown', function (event) {
        // 阻止默认输入行为，避免按键字符被插入
        event.preventDefault();
        
        // 找到Lexical编辑器所在的元素
        const editorEl = event.target.closest('[data-lexical-editor]');
        if (!editorEl) return;
        
        // 获取Lexical编辑器实例
        const editor = editorEl.__lexicalEditor;
        if (!editor) return;
        
        // 通过编辑器API修改内容
        editor.update(() => {
            const root = editor.getRoot();
            // 清空现有内容
            root.clear();
            // 插入新文本节点
            const textNode = $text('Changed');
            root.append(textNode);
        });
    });
});

关键说明 #

• 阻止默认行为：调用event.preventDefault()避免按键对应的字符被浏览器插入到输入框中。
• 操作编辑器状态：Lexical要求所有内容修改必须在editor.update()回调中进行，确保内部状态与DOM同步，不会被后续的编辑器更新覆盖。
• 获取编辑器实例：通过带有data-lexical-editor属性的元素的__lexicalEditor属性获取编辑器实例，这是Lexical暴露的内部引用。

扩展脚本注意事项 #

如果你的代码是Chrome扩展的content script，需要确保脚本运行在页面主上下文（而非隔离的content script上下文）：

• Manifest V3：在manifest.json中配置content_scripts时添加"world": "MAIN"
• Manifest V2：使用chrome.tabs.executeScript注入脚本到页面上下文

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