Chrome扩展点击Gmail撰写按钮无法插入自定义签名的问题排查

问题描述 #

开发一款Chrome扩展，目标是点击Gmail的撰写按钮时在邮件正文插入自定义签名，但点击撰写按钮后无任何效果。相关代码如下：

Manifest文件（manifest.json） #

{
  "manifest_version": 3,
  "name": "Cutom Email",
  "version": "1.0",
  "description": "Insert Signature.",
  "permissions": ["activeTab", "storage", "scripting"],
  "background": {
    "service_worker": "background.js"
  },
  "icons": {
    "16": "xxx.png",
    "48": "uyy.png",
    "128": "zzz.png"
  },
  "content_scripts": [
    {
      "matches": ["*://mail.google.com/*"],
      "js": ["content.js"]
    }
  ]
}

background.js #

chrome.tabs.onUpdated.addListener((tabId, changeInfo, tab) => {
  if (changeInfo.status === 'complete' && tab.url.includes('mail.google.com')) {
    chrome.scripting.executeScript({
      target: { tabId: tabId },
      files: ['content.js']
    });
  }
});

内容脚本（content.js） #

function injectMessage() {
  const message = "Your static message here.";
  
  const composeButton = document.querySelector('div[gh="cm"]');
  if (composeButton) {
    composeButton.addEventListener('click', () => {
      const observer = new MutationObserver((mutationsList, observer) => {
        for (let mutation of mutationsList) {
          if (mutation.type === 'childList') {
            const composeBody = document.querySelector('div[aria-label="Message Body"]');
            if (composeBody) {
              composeBody.focus();
              composeBody.innerHTML += `<br><br>${message}`;
              observer.disconnect();
            }
          }
        }
      });

      observer.observe(document.body, { childList: true, subtree: true });
    });
  }
}

window.addEventListener('load', injectMessage);

问题分析 #

1. 重复注入content.js：manifest中已配置content_scripts自动匹配Gmail页面注入content.js，同时background.js又通过chrome.scripting.executeScript手动注入，导致脚本重复加载，可能引发事件绑定冲突或逻辑异常。
2. DOM元素定位时机与选择器问题：Gmail是单页应用，window.load触发时部分DOM元素（如撰写按钮）可能尚未动态生成；且邮件正文的选择器div[aria-label="Message Body"]可能因Gmail版本更新而失效。
3. MutationObserver效率与准确性低：监听整个document.body的子树变化，会捕获大量无关DOM操作，可能遗漏目标元素的生成事件。
4. 直接修改innerHTML的兼容性问题：Gmail的编辑器有内部状态管理，直接修改innerHTML可能破坏编辑器结构，导致签名无法正确插入。

修复方案 #

1. 移除重复注入逻辑 #

删除background.js中的chrome.tabs.onUpdated监听代码，保留manifest.json中的content_scripts配置即可自动注入content.js，避免重复加载。若不需要其他后台逻辑，可直接移除manifest中的background配置。

2. 优化content.js代码 #

调整DOM监听逻辑，适配Gmail的动态加载特性，使用更兼容的方式插入签名：

function setupSignatureInjection() {
  const signature = "<br><br>Your static message here.";

  // 监听撰写按钮的动态出现
  const buttonObserver = new MutationObserver(() => {
    const composeButton = document.querySelector('div[gh="cm"]');
    // 避免重复绑定事件
    if (composeButton && !composeButton.dataset.hasSignatureListener) {
      composeButton.dataset.hasSignatureListener = 'true';
      composeButton.addEventListener('click', () => {
        // 监听撰写窗口的生成
        const composeObserver = new MutationObserver((mutations) => {
          for (const mutation of mutations) {
            if (mutation.addedNodes.length) {
              // 更可靠的邮件正文选择器，兼容Gmail版本
              const composeBody = document.querySelector('div[role="textbox"][aria-label*="Message Body"]');
              if (composeBody) {
                // 使用execCommand插入HTML，适配编辑器内部逻辑
                composeBody.focus();
                document.execCommand('insertHTML', false, signature);
                composeObserver.disconnect();
                break;
              }
            }
          }
        });

        // 监听页面主体区域的DOM变化
        composeObserver.observe(document.body, { childList: true, subtree: true });
      });
    }
  });

  // 监听Gmail主内容区域的动态更新
  const targetNode = document.querySelector('div.nH') || document.body;
  buttonObserver.observe(targetNode, { childList: true, subtree: true });
}

// 适配SPA加载时机
document.addEventListener('DOMContentLoaded', setupSignatureInjection);
window.addEventListener('hashchange', setupSignatureInjection);

3. 额外注意事项 #

• 测试前需重新加载扩展，并刷新Gmail页面，清除缓存。
• 若选择器仍失效，可通过Chrome开发者工具直接查看当前Gmail页面的撰写按钮、邮件正文元素的属性，调整选择器字符串。
• 确保扩展权限配置正确，当前manifest中的permissions已满足需求。

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