如何用JavaScript在Instagram私信的contenteditable div模拟输入

问题根源 #

Instagram私信输入框基于Lexical编辑器（从data-lexical-text属性可判断），直接修改DOM内容或派发合成键盘事件无法触发编辑器内部状态更新，导致前端无法识别输入内容，发送按钮点击无效。

可行解决方案 #

1. 使用document.execCommand('insertText')插入内容 #

这是针对contenteditable元素的标准文本插入方法，能触发Lexical的内部状态同步，让Instagram前端感知到内容变化：

function typeTextInIG(text, delay = 150) {
  const inputBox = document.querySelector('div[contenteditable="true"][aria-label="Message"]');
  if (!inputBox) return;

  // 先聚焦输入框
  inputBox.focus();
  // 清空原有内容（如果需要）
  document.execCommand('selectAll', false, null);
  document.execCommand('delete', false, null);

  let index = 0;
  function insertNextChar() {
    if (index >= text.length) return;
    const char = text[index];
    // 使用insertText插入字符，触发编辑器状态更新
    document.execCommand('insertText', false, char);
    // 触发input事件，确保前端同步状态
    inputBox.dispatchEvent(new Event('input', { bubbles: true }));
    
    index++;
    setTimeout(insertNextChar, delay);
  }

  insertNextChar();
}

// 使用示例
typeTextInIG("hola");

2. 正确触发发送按钮 #

不要使用绝对XPath，改用基于输入框的相对选择器，确保内容状态更新后再点击：

function sendIGMessage() {
  const inputBox = document.querySelector('div[contenteditable="true"][aria-label="Message"]');
  if (!inputBox) return;

  // 基于输入框的同级元素查找发送按钮，避免依赖固定DOM结构
  const sendButton = inputBox.closest('div[role="textbox"]')?.nextElementSibling?.querySelector('button[type="button"]');
  if (sendButton && !sendButton.disabled) {
    // 用原生click方法，合成事件可能被拦截
    sendButton.click();
  }
}

// 配合输入函数使用：输入完成后调用
setTimeout(sendIGMessage, 2000); // 延迟时间根据输入长度调整

3. 避免使用合成键盘事件 #

Instagram会校验键盘事件的isTrusted属性（合成事件该属性为false，原生事件为true），直接派发KeyboardEvent会被拦截，所以execCommand是更可靠的方式。

4. 优化元素选择器 #

不要依赖绝对XPath或固定DOM结构，使用带有语义化属性的选择器：

• 输入框：div[contenteditable="true"][aria-label="Message"]（aria-label是稳定的语义属性）
• 发送按钮：基于输入框的父级/同级元素查找，避免绝对路径

关键注意事项 #

• 确保输入框处于聚焦状态后再插入内容
• 插入字符后必须触发input事件，同步前端状态
• 发送按钮需要等待输入状态完全更新后再点击，避免因状态未同步导致点击无效

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