Gmail Chrome扩展开发：点击发送后更新DOM再发送的问题排查

问题1：插入内容后邮件不发送 #

你通过event.stopPropagation()阻断了Gmail原生的发送事件逻辑，所以修改完正文后必须手动触发发送。两种可行方案：

方案1：修改后重新触发按钮点击

先移除监听，再模拟点击按钮，让原生发送逻辑执行：

window.addEventListener("click", handler, true);

function handler(event) {
  const sendBtn = event.target;
  if (sendBtn.matches('div[role="button"]') && sendBtn.textContent.trim() === "Send") {
    event.stopPropagation();
    event.preventDefault();

    // 更新邮件正文
    const msgBody = document.querySelector('div[aria-label="Message Body"]');
    if (msgBody) {
      msgBody.insertAdjacentHTML("beforeend", `<div>Hello World</div>`);
    }

    // 移除监听后触发原生点击
    window.removeEventListener("click", handler, true);
    sendBtn.click();
  }
}

方案2：异步修改DOM，不阻断事件

利用setTimeout把DOM修改放到异步队列，Gmail发送时会读取最新的DOM内容：

window.addEventListener("click", handler, true);

function handler(event) {
  if (event.target.matches('div[role="button"]') && event.target.textContent.trim() === "Send") {
    setTimeout(() => {
      const msgBody = document.querySelector('div[aria-label="Message Body"]');
      if (msgBody) {
        msgBody.insertAdjacentHTML("beforeend", `<div>Hello World</div>`);
      }
      window.removeEventListener("click", handler, true);
    }, 0);
  }
}

问题2：无法移除EventListener #

移除失效的核心原因是在捕获阶段的事件处理流程中，立即执行移除操作时，浏览器还未完成当前事件的传播处理。解决方式：

• 用setTimeout异步执行移除操作（如方案2所示），让移除逻辑在当前事件循环结束后运行。
• 确保移除监听的参数和添加时完全一致：第三个参数必须传true（和添加监听时的捕获阶段对应），且函数引用为同一个（你的代码满足这一点）。
• 若需要适配Gmail动态生成的按钮（比如新撰写窗口），可以不用一次性移除监听，而是在每次处理完成后根据场景判断是否保留。

额外提示 #

Gmail的DOM结构会频繁更新，依赖aria-label或role的选择器可能失效，建议结合按钮的父容器特征编写更稳定的选择器；同时要注意适配全屏撰写窗口和弹窗撰写窗口两种场景。

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