Chrome扩展（Manifest V3）消息传递功能异常求助

业务场景 #

点击扩展程序图标后，background遍历所有标签页并存入数组发送给content；content在当前页面查找特定ID，若该ID存在于某标签页标题中则执行发送邮件逻辑，否则通知background打开对应新标签页，之后background再次遍历所有标签页并将数组回传给content，重新检查标题并触发邮件发送。

原代码核心问题 #

1. 异步操作顺序错误：chrome.tabs.query是异步API，原代码在回调未执行时就发送空的allTabs数组。
2. 全局变量污染：循环变量i未用let/const声明，引发逻辑异常。
3. 标签页创建后查询时机过早：新标签创建后立即查询，此时标签可能未完成初始化，无法获取正确标题。
4. 端口连接时机不匹配：background注入content script后立即建立端口，可能因content script未加载完成导致消息丢失。

修正后的代码 #

Manifest.json（无需修改，确认权限） #

{
  "permissions": [
    "activeTab",
    "scripting",
    "tabGroups",
    "tabs",
    "storage"
  ],
  "background": {
    "service_worker": "background.js"
  },
  "options_ui": {
    "page": "options.html",
    "open_in_tab": false
  },
  "action": {}
}

Background.js #

chrome.action.onClicked.addListener(async (activeTab) => {
  try {
    // 先异步获取所有标签页，确保拿到数据后再执行后续操作
    const allTabs = await chrome.tabs.query({});
    
    // 注入content script，等待注入完成
    await chrome.scripting.executeScript({
      target: { tabId: activeTab.id },
      files: ['content.js']
    });

    // 建立端口并发送标签页数据
    const port = chrome.tabs.connect(activeTab.id, { name: "emailrelease" });
    port.postMessage({ tabs: allTabs });

    // 监听content传来的消息
    port.onMessage.addListener(async (request) => {
      if (request.action === "update") {
        // 创建新标签，等待标签创建完成
        const newTab = await chrome.tabs.create({
          url: request.link,
          selected: false,
          active: false
        });

        // 等待新标签加载完成（确保标题已更新）
        await new Promise(resolve => {
          chrome.tabs.onUpdated.addListener(function listener(tabId, info) {
            if (tabId === newTab.id && info.status === 'complete') {
              chrome.tabs.onUpdated.removeListener(listener);
              resolve();
            }
          });
        });

        // 再次获取所有标签页并发送
        const updatedTabs = await chrome.tabs.query({});
        port.postMessage({ tabs: updatedTabs });
      }
    });
  } catch (err) {
    console.error('Background error:', err);
  }
});

Content.js #

// 等待页面加载完成后再执行逻辑
document.addEventListener('DOMContentLoaded', async () => {
  // 建立与background的端口连接
  const port = chrome.runtime.connect({ name: "emailrelease" });

  port.onMessage.addListener((request) => {
    let qa = "";
    let qaTitle = "";
    let buildUrl = "";
    const tabs = request.tabs;

    // 提取页面中的特定ID
    const mainPane = document.getElementById("MainPane");
    if (mainPane) {
      const desc = mainPane.innerHTML;
      const idIndex = desc.indexOf("$id");
      if (idIndex > 0) {
        const start = idIndex + 18;
        const end = desc.indexOf("<", start);
        if (end > start) {
          qa = desc.substring(start, end);
        }
      }
    }

    // 检查标签页标题是否包含目标ID
    if (qa && tabs) {
      tabs.forEach(tab => {
        if (tab.title.includes(qa)) {
          qaTitle = tab.title;
        }
        if (tab.active) {
          buildUrl = tab.url;
        }
      });
    }

    // 未找到对应标签页，通知background创建新标签
    if (!qaTitle && qa) {
      port.postMessage({ 
        action: "update",
        link: `https://website${qa}`
      });
    } else if (qaTitle) {
      // 执行发送邮件逻辑
      console.log('准备发送邮件，目标标签页:', qaTitle);
      // ------- mail ----------------------
      // 此处添加邮件发送代码
    }
  });
});

关键修改说明 #

• 使用async/await处理异步API，保证操作顺序正确，避免回调地狱。
• 等待新标签页加载完成（status === 'complete'）后再查询标签列表，确保能获取到正确的标题。
• 给循环变量添加let/const声明，避免全局变量污染。
• 让content script等待页面加载完成后再执行，确保能正确获取DOM元素。
• 优化端口消息监听逻辑，确保消息传递的可靠性。

内容的提问来源于stack exchange，提问作者J.Doe