WhatsApp Web JavaScript扩展：消息输入框文本注入失效问题求助

我正在开发一个针对WhatsApp网页版的JavaScript扩展，核心功能是修正和操作消息输入框里的文本，但现在卡在了文本注入的问题上——我能正确获取输入框里最后一条消息的文本，却没法稳定地把修改后的文本再注入回去。

问题背景 #

我的需求很明确：从WhatsApp网页版的消息输入框中提取最后输入的文本，对文本做处理（比如去掉空格），再把处理后的文本重新注入到输入框里，不需要自动发送消息，只是替换输入框里的原有内容。

我当前的实现代码 #

获取输入文本的函数 #

function getInputText() {
  // 选择所有包含文本的span元素
  const allSpans = document.querySelectorAll("span.selectable-text.copyable-text.false[data-lexical-text='true']");
  // 取最后一个可见的span（即最后输入的消息内容）
  const lastSpan = allSpans[allSpans.length - 1];
  if (!lastSpan) {
    return null;
  }
  const text = lastSpan.innerText.trim();
  return text || null;
}

注入文本的函数 #

function setInputText(text) {
  // 选择WhatsApp网页版的消息输入框
  const messageBox = document.querySelectorAll("[contenteditable='true']")[1];
  if (!messageBox) {
    return;
  }
  // 将文本注入输入框（按需替换空格）
  messageBox.innerHTML = text.replace(/ /gm, ''); 
}

遇到的具体问题 #

获取文本的部分完全正常，能准确拿到输入框里最后一条消息的内容，但注入操作的效果非常不稳定：用innerHTML写入文本后，文本很快就消失了，应该是被WhatsApp网页版的动态DOM逻辑给覆盖了。

我已经尝试过的解决思路 #

• 直接修改输入框元素的innerHTML注入文本（基础尝试，但文本留不住）
• 用MutationObserver监听输入框的DOM变化，试图在页面自动修改DOM时重新注入文本，但没有达到预期效果
• 手动修改输入框内部子元素的内容，但这对输入框的实际可编辑内容没有影响

求助方向 #

我现在需要一个可靠的方案，能把处理后的文本稳定注入到WhatsApp网页版的消息输入框中，并且文本能保留在输入框里，不会被页面的动态特性清空。如果有朋友遇到过类似的问题，或者对WhatsApp网页版的DOM结构、内部逻辑有了解，欢迎分享你的解决思路！

内容来源于stack exchange