如何通过JS修改WhatsApp网页版输入框innerHTML实现群成员@提及？

我正在开发一个JS脚本，用于在WhatsApp群聊中自动提及成员。目前遇到的问题是：尝试用.innerHTML修改输入框HTML内容、插入手动提及成员时生成的代码块时，完全没有效果。我已经能正确获取到DOM元素，但赋值操作就是不生效；不过如果手动修改输入框HTML后再用.innerHTML，却能正常工作。

WhatsApp网页版输入框的HTML结构 #

<div 
    class="fd365im1 to2l77zo bbv8nyr4 gfz4du6o ag5g9lrv bze30y65 kao4egtt"
    style="max-height: 7.35em; 
    user-select: text; 
    white-space: 
    pre-wrap; word-break: 
    break-word;" 
    role="textbox"
    spellcheck="false" 
    title="Type a message" 
    data-testid="conversation-compose-box-input" 
    data-tab="10"
    data-lexical-editor="true" 
    contenteditable="true">

    <!-- the inner HTML -->
    <p class="selectable-text copyable-text iq0m558w">Test text</p>
    
</div>

获取输入框的JS代码 #

var typespace = document.querySelector('div.fd365im1.to2l77zo.bbv8nyr4.gfz4du6o.ag5g9lrv.bze30y65.kao4egtt');

无效的赋值代码 #

typespace.innerHTML = '<p class="selectable-text copyable-text iq0m558w" dir="ltr"><span class="selectable-text copyable-text o0rubyzf" data-app-text-template="​201144292107@c.us​" data-lexical-text="true">@Abdo Eid</span><span class="selectable-text copyable-text" data-lexical-text="true"> </span></p>';

环境信息：Windows 10，JS，Chrome/Firefox最新版

1. 核心原因 #

WhatsApp网页版采用Lexical编辑器（从data-lexical-editor="true"属性可确认），这类现代编辑器不依赖DOM作为数据来源，而是维护独立的内部数据模型。直接修改innerHTML属于绕开编辑器的底层操作，会被编辑器忽略甚至覆盖。

2. 基于Lexical API的正确实现 #

通过编辑器的官方API修改内容，步骤如下：

步骤1：获取Lexical编辑器实例

从输入框元素的私有属性中提取编辑器实例：

const editor = typespace.__lexicalEditor__;

步骤2：通过update方法插入提及内容

Lexical要求通过update方法修改编辑器状态，需创建对应格式的节点：

editor.update(() => {
  const root = $getRoot();
  // 清空原有内容
  root.clear();
  
  // 创建段落节点
  const paragraph = $createParagraphNode();
  
  // 创建提及文本节点并设置格式
  const mentionNode = $createTextNode('@Abdo Eid');
  mentionNode.setFormat('mention');
  // 绑定联系人ID（对应手动提及的data-app-text-template值）
  mentionNode.__data = {
    appTextTemplate: '201144292107@c.us'
  };
  
  // 添加空格节点
  const spaceNode = $createTextNode(' ');
  
  // 组装节点结构
  paragraph.append(mentionNode);
  paragraph.append(spaceNode);
  root.append(paragraph);
});

步骤3：触发编辑器变更事件（可选）

若操作后无响应，手动触发输入事件同步状态：

typespace.dispatchEvent(new Event('input', { bubbles: true }));

3. 备选方案：模拟用户手动操作 #

如果Lexical API调用受限，可模拟手动输入选择流程：

// 清空输入框
typespace.textContent = '';

// 输入@符号触发联系人列表
document.execCommand('insertText', false, '@');

// 延迟选择第一个联系人（根据实际DOM调整选择器）
setTimeout(() => {
  const contactItem = document.querySelector('div[role="listbox"] div:first-child');
  contactItem?.click();
}, 500);

内容的提问来源于stack exchange，提问作者عبدو عيد