如何通过Chrome扩展向React Lexical编辑器自动输入文本？

Lexical编辑器的状态由内部核心实例维护，直接修改DOM或触发普通键盘事件无法同步到编辑器的核心状态，必须借助Lexical官方提供的API来操作：

步骤1：定位Lexical编辑器的DOM容器 #

先找到页面中Lexical编辑器的根容器元素，通常它会带有data-lexical-editor属性，也可以根据页面结构用类名/ID定位：

const editorContainer = document.querySelector('[data-lexical-editor]');
// 示例：通过ID定位
// const editorContainer = document.getElementById('lexical-editor-container');

步骤2：获取Lexical Editor实例 #

Lexical会将编辑器实例挂载到容器元素的__lexicalEditor属性上，直接读取即可：

const editor = editorContainer?.__lexicalEditor;

步骤3：通过Lexical API插入文本 #

使用编辑器的update方法修改内部状态，该方法接收一个回调函数，内部可使用Lexical全局节点操作API（前缀带$的函数）：

if (editor) {
  editor.update(() => {
    // 获取编辑器根节点
    const rootNode = $getRoot();
    
    // 可选：清空现有内容（如需替换而非追加）
    rootNode.clear();
    
    // 创建文本节点并插入到根节点
    const textNode = $createTextNode('你要插入的内容');
    rootNode.append(textNode);
    
    // 可选：将光标移动到文本末尾
    $setSelection(null, rootNode.getEndOffset(), null, rootNode.getEndOffset());
  });
}

为什么之前的方法无效？ #

• 直接修改innerText：Lexical的DOM只是状态的渲染结果，修改DOM不会同步到编辑器内部状态，页面刷新或编辑器重渲染后内容会丢失；
• 发送keypress事件：Lexical使用自定义事件处理逻辑，且React的合成事件系统可能拦截普通DOM事件，无法触发编辑器状态更新。

额外注意事项 #

• 确保代码在Lexical编辑器加载完成后执行：可以用MutationObserver监听容器元素的出现，或者在Chrome扩展的manifest.json中设置content_scripts的run_at为document_idle；
• 如需插入富文本，可使用Lexical其他节点API：比如$createParagraphNode创建段落、$createLinkNode创建链接等；
• 不同版本Lexical API可能略有差异，操作时需对应版本的节点逻辑。

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