Chrome扩展如何监听Gmail撰写窗口打开及解决脚本失效问题

嘿，这个问题我太熟了——Gmail是典型的单页应用（SPA），页面首次加载后只会触发一次DOMContentLoaded，后续打开撰写窗口都是通过JavaScript动态渲染DOM元素的，所以你原来的监听方案自然抓不到新窗口的出现。下面给你两个靠谱的解决思路：

1. 用MutationObserver监听DOM变化（推荐） #

这是最稳定的方案，因为它是浏览器标准API，不依赖Gmail的内部实现。核心思路是监听页面DOM的动态变化，当检测到撰写窗口的特征元素被添加时，再执行你的addUpdateButton函数。

示例代码：

// 替换原来的DOMContentLoaded监听逻辑
function setupComposeObserver() {
  // 创建观察者实例
  const observer = new MutationObserver((mutations) => {
    mutations.forEach((mutation) => {
      // 检查是否有新的撰写窗口被添加（请根据实际Gmail DOM结构调整选择器）
      const composeWindow = document.querySelector('div[role="dialog"][aria-label*="撰写"]');
      // 避免重复添加按钮
      if (composeWindow && !composeWindow.querySelector('.your-custom-update-button')) {
        addUpdateButton();
      }
    });
  });

  // 配置监听选项：监听body下所有子树的节点添加/移除
  observer.observe(document.body, {
    childList: true,
    subtree: true,
    attributes: false
  });
}

// 页面首次加载时先执行一次，再启动观察者
addUpdateButton();
setupComposeObserver();

小贴士：你可以用Chrome DevTools的Elements面板，找到Gmail撰写窗口的特征元素（比如特定的role、aria-label或class），调整上面的选择器，确保能精准匹配到撰写窗口。

2. 监听Gmail的自定义内部事件（可选） #

Gmail会在动态内容切换时触发一些自定义事件（比如view_changed），你可以尝试监听这些事件来捕获撰写窗口的打开动作。不过这个方法依赖Gmail的内部实现，可能会随着Gmail更新而失效，所以作为备选方案：

document.addEventListener('view_changed', () => {
  // 检查当前是否是撰写窗口状态
  if (document.querySelector('div[role="dialog"][aria-label*="撰写"]')) {
    addUpdateButton();
  }
});

补充说明 #

你的manifest配置里run_at: document_end是没问题的，它能保证Content Script在初始DOM加载完成后执行，但因为Gmail是SPA，后续动态内容还是得靠上面的监听方案来处理。

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