如何在指定Gmail邮件列表中注入图标（Chrome扩展开发）

1. 配置扩展清单文件（manifest.json） #

首先在manifest.json中声明内容脚本，匹配Gmail收件箱URL，并配置必要资源：

{
  "manifest_version": 3,
  "name": "Gmail自定义图标注入工具",
  "version": "1.0",
  "content_scripts": [
    {
      "matches": ["https://mail.google.com/mail/u/*/#inbox"],
      "js": ["content.js"],
      "css": ["styles.css"]
    }
  ],
  "web_accessible_resources": [
    {
      "resources": ["icons/*"],
      "matches": ["https://mail.google.com/*"]
    }
  ]
}

2. 编写内容脚本（content.js） #

核心逻辑是定位目标邮件、注入图标，并处理Gmail的动态加载特性：

// 替换为你的目标邮件thread ID列表
const targetThreadIds = ["thread-id-1", "thread-id-2"];

// 注入图标的核心函数
function injectIcons() {
  // 遍历所有带有data-legacy-thread-id属性的邮件行
  document.querySelectorAll('tr[data-legacy-thread-id]').forEach(row => {
    const threadId = row.getAttribute('data-legacy-thread-id');
    // 仅处理目标邮件且未注入过图标的行
    if (targetThreadIds.includes(threadId) && !row.querySelector('.custom-mail-icon')) {
      // 定位复选框所在的单元格
      const checkboxCell = row.querySelector('td[role="gridcell"]:first-child');
      if (checkboxCell) {
        // 创建图标元素
        const icon = document.createElement('img');
        icon.src = chrome.runtime.getURL('icons/your-icon.png');
        icon.className = 'custom-mail-icon';
        // 将图标插入到复选框下方
        checkboxCell.appendChild(icon);
      }
    }
  });
}

// 页面初始加载后执行一次
document.addEventListener('DOMContentLoaded', injectIcons);

// 监听DOM变化，处理滚动加载的新邮件
const observer = new MutationObserver(() => injectIcons());
const mailContainer = document.querySelector('div[role="main"]');
if (mailContainer) {
  observer.observe(mailContainer, { childList: true, subtree: true });
}

3. 编写样式文件（styles.css） #

调整图标位置，确保显示在复选框正下方：

.custom-mail-icon {
  display: block;
  margin: 4px auto 0;
  width: 16px;
  height: 16px;
}

关键注意事项 #

• Gmail的DOM结构可能会更新，需要定期验证邮件行、复选框容器的选择器是否有效；
• 如果目标thread ID需要从后台获取，可通过chrome.runtime.sendMessage与后台脚本通信获取；
• 图标文件需放在扩展目录的icons文件夹下，确保web_accessible_resources配置正确。

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