如何在使用Inbox SDK的Chrome扩展中移除回复邮件里的旧追踪像素

我之前在做类似的Gmail追踪扩展时也碰到过这个折叠内容里旧像素残留的问题，刚好可以给你几个实用的解决思路：

方案1：直接监听DOM变化，清理折叠内容中的旧像素 #

Inbox SDK虽然没法直接拿到未展开的折叠内容，但这些内容其实已经存在于页面DOM中（只是被CSS隐藏了）。我们可以用MutationObserver监听邮件编辑区域的DOM变动，一旦检测到折叠的引用内容加载完成，就遍历里面的元素移除旧的追踪像素。

具体代码示例：

// 创建DOM变化监听器
const pixelCleanupObserver = new MutationObserver((mutations) => {
  mutations.forEach((mutation) => {
    // 只处理新增节点的情况
    if (!mutation.addedNodes.length) return;
    
    // 定位Gmail的折叠引用内容块（类名可能随Gmail版本调整，需要测试）
    const quoteBlocks = document.querySelectorAll('.gmail_quote, .ii.gt');
    quoteBlocks.forEach(block => {
      // 移除所有属于你的追踪像素（这里用src包含你的追踪域名做标识）
      const oldTrackingPixels = block.querySelectorAll('img[src*="your-tracking-domain.com/track"]');
      oldTrackingPixels.forEach(pixel => pixel.remove());
    });
  });
});

// 启动监听，绑定到当前邮件编辑器的内容区域
const currentComposeView = inboxSDK.Compose.getCurrentView();
const editorBody = currentComposeView.getBodyElement();
pixelCleanupObserver.observe(editorBody, { childList: true, subtree: true });

// 记得在编辑器关闭时断开监听器，避免内存泄漏
currentComposeView.on('destroy', () => {
  pixelCleanupObserver.disconnect();
});

方案2：给追踪像素加专属标识，全局清理旧像素 #

给每个你添加的追踪像素加上一个唯一的CSS类（比如my-custom-tracking-pixel），这样不管像素在展开还是折叠内容里，都能精准定位并移除旧的，再添加新的。这种方法更稳定，不用依赖Gmail的DOM类名变化。

代码示例：

function addNewTrackingPixel() {
  const composeView = inboxSDK.Compose.getCurrentView();
  const editorBody = composeView.getBodyElement();
  
  // 第一步：移除所有旧的追踪像素
  const oldPixels = editorBody.querySelectorAll('.my-custom-tracking-pixel');
  oldPixels.forEach(pixel => pixel.remove());
  
  // 第二步：创建并添加新的追踪像素
  const newPixel = document.createElement('img');
  newPixel.src = 'https://your-tracking-domain.com/track?tp=TP2';
  newPixel.className = 'my-custom-tracking-pixel';
  newPixel.style.display = 'none'; // 隐藏像素，不影响邮件内容
  editorBody.appendChild(newPixel);
}

// 在发送邮件或回复时调用这个函数
composeView.on('send', () => {
  addNewTrackingPixel();
});

方案3：临时展开折叠内容再清理（体验略差但有效） #

如果前面的DOM监听方法失效，还可以尝试先触发Gmail的“展开”按钮，把所有折叠内容展开，然后用Inbox SDK拿到完整内容后清理旧像素，再折叠回去（可选）。这种方法要注意延迟时间，确保内容完全展开后再操作。

代码示例：

const composeView = inboxSDK.Compose.getCurrentView();

composeView.on('reply', () => {
  // 点击所有展开按钮，显示折叠内容
  const expandButtons = document.querySelectorAll('.gE.gt');
  expandButtons.forEach(btn => btn.click());
  
  // 等待内容展开（时间可以根据实际情况调整）
  setTimeout(() => {
    // 清理旧像素
    const oldPixels = composeView.getBodyElement().querySelectorAll('img[src*="your-tracking-domain.com/track"]');
    oldPixels.forEach(pixel => pixel.remove());
    
    // 可选：重新折叠内容
    const collapseButtons = document.querySelectorAll('.gE.gt');
    collapseButtons.forEach(btn => btn.click());
    
    // 添加新像素
    addNewTrackingPixel();
  }, 600);
});

注意事项 #

• Gmail的DOM类名可能会更新，建议在不同Gmail主题/版本下测试你的选择器；
• 操作DOM时要确保只针对当前编辑的邮件，避免影响其他标签页或邮件；
• 记得及时断开MutationObserver，防止内存泄漏。

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