如何用EventListener追踪网页版WhatsApp输入框内容变化？

核心思路 #

网页版WhatsApp的输入框会动态生成<p>元素处理换行，直接监听单个<p>元素会失效。正确做法是监听输入框的父容器，通过MutationObserver捕获容器内的元素新增、删除及内容变更，再拼接所有<p>元素的内容得到完整消息。

具体实现步骤 #

1. 定位输入框容器
   找到WhatsApp输入框的核心容器：一个带有contenteditable="true"属性的div，通常还伴随特定类名（比如._13NKt，可通过浏览器开发者工具确认）。优先用contenteditable="true"属性筛选，类名可能随版本更新变化。

2. 配置MutationObserver
   使用MutationObserver监听容器的子节点变化和内容修改，配置项需包含：

   • childList: true：监听子元素的添加/删除
   • subtree: true：监听子树内的所有节点变化
   • characterData: true：监听文本内容的修改

3. 拼接完整消息
   每次触发变更时，遍历容器内所有<p.selectable-text>元素，将每个元素的文本内容用\n拼接，得到完整的输入内容。

代码示例 #

function setupWhatsAppInputTracker() {
  // 定位输入框容器
  const inputContainer = document.querySelector('div[contenteditable="true"]._13NKt');
  
  if (!inputContainer) {
    // 容器未加载则延迟重试（适配WhatsApp动态加载机制）
    setTimeout(setupWhatsAppInputTracker, 1000);
    return;
  }

  // 创建观察者实例
  const observer = new MutationObserver(() => {
    // 收集所有行的内容并拼接
    const fullMessage = Array.from(inputContainer.querySelectorAll('p.selectable-text'))
      .map(line => line.textContent)
      .join('\n');
    
    // 此处可将fullMessage传递给你的扩展逻辑
    console.log('当前完整输入内容:', fullMessage);
  });

  // 启动观察
  observer.observe(inputContainer, {
    childList: true,
    subtree: true,
    characterData: true
  });
}

// 启动追踪
setupWhatsAppInputTracker();

注意事项 #

• WhatsApp的DOM结构可能会更新，若容器选择器失效，需重新通过开发者工具定位。
• 确保扩展的内容脚本在页面加载完成后注入，可在manifest.json中配置"run_at": "document_idle"。
• 避免使用定时轮询方案，MutationObserver能更高效、精准地捕获内容变化。

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