如何通过Chrome扩展向WhatsApp Web自动发送文本消息

旧方案失效原因 #

之前使用的代码在近期WhatsApp Web版本更新后失效，核心原因有两点：

• DOM结构调整：页面内存在多个contenteditable=true的元素（包括搜索框、群编辑区等），原选择器无法精准匹配到底部聊天输入框
• 事件校验升级：WhatsApp Web现在基于React框架维护输入框状态，直接修改innerHTML+派发普通Event的方式无法同步内部状态，会被框架虚拟DOM校验拦截，修改后的值不会被识别为有效输入

旧版失效代码参考：

var input = document.querySelector('[contenteditable~=true]');
input.innerHTML = message;
input.dispatchEvent(new Event('input', { bubbles: true }));

最新可用实现方案 #

实现要点 #

• 精准选择输入框：通过父容器定位+角色属性过滤，只匹配聊天区域底部的发送文本框
• 用原生输入API写入：优先使用浏览器原生的文本插入API，自动触发符合规范的事件链，适配页面的状态同步逻辑
• 可选自动发送：定位发送按钮触发点击，实现从填充到发送的全流程

可直接运行的代码 #

// 替换为你从扩展捕获到的待发送文本
const sendMessage = "待发送的文本内容";

// 精准定位聊天输入框，避免匹配到页面其他可编辑元素
const chatInput = document.querySelector('#main footer [contenteditable="true"][role="textbox"]');
if (!chatInput) {
  console.error("未检测到聊天输入框，请确认已打开目标聊天会话");
} else {
  // 聚焦输入框
  chatInput.focus();
  // 调用原生插入文本API，自动触发页面可识别的输入事件
  document.execCommand('insertText', false, sendMessage);

  // 不需要手动点发送的话可以删掉下面这段
  setTimeout(() => {
    const sendButton = document.querySelector('#main footer [data-icon="send"]');
    sendButton?.click();
  }, 80);
}

特殊场景兼容 #

如果是Chrome扩展MV3版本content script环境下execCommand被拦截，可以用手动构造原生事件的方式实现：

const sendMessage = "待发送的文本内容";
const chatInput = document.querySelector('#main footer [contenteditable="true"][role="textbox"]');
if (chatInput) {
  chatInput.focus();
  // 先清空原有内容
  chatInput.textContent = "";
  // 插入新文本节点
  const textNode = document.createTextNode(sendMessage);
  chatInput.appendChild(textNode);
  // 把光标移到末尾
  const range = document.createRange();
  range.selectNodeContents(chatInput);
  range.collapse(false);
  const selection = window.getSelection();
  selection.removeAllRanges();
  selection.addRange(range);
  // 按顺序派发符合规范的输入事件
  chatInput.dispatchEvent(new InputEvent('input', {
    bubbles: true,
    composed: true,
    inputType: 'insertText',
    data: sendMessage
  }));
  // 触发发送逻辑和上面一致
}

注意事项 #

• 不要直接修改innerHTML或textContent后只派发普通Event，无法通过React的状态校验，输入值会被清空
• 扩展注入脚本时建议加MutationObserver监听输入框节点渲染完成后再执行逻辑，避免页面没加载完找不到元素
• 如果需要发送富文本内容，把insertText替换为insertHTML命令即可，注意做好特殊字符转义

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