Chrome扩展Manifest V3：onCreated事件下后台向内容脚本传参失败

核心问题 #

报错的根本原因是：chrome.tabs.onCreated事件触发时，新创建的标签页还处于加载初期，内容脚本还未被注入到页面中，此时调用chrome.tabs.sendMessage自然找不到接收端。

另外你的代码还存在两个逻辑错误：

• tabsArray.find((obj) => obj.id === tabs.id) 这里的tabs是chrome.tabs.query返回的数组，应该用tabs[0].id
• 你在新标签创建时，却给当前激活的标签（tabs[0]）添加记录，然后又往新创建的标签（tab.id）发消息，逻辑混乱

修复步骤 #

1. 确保内容脚本正确注入 #

在manifest.json中配置内容脚本的注入时机，确保页面加载时能及时注入：

{
  "manifest_version": 3,
  "content_scripts": [
    {
      "matches": ["<all_urls>"], // 根据你的需求调整匹配规则
      "js": ["contentScript.js"],
      "run_at": "document_start" // 尽早注入，可选document_end或document_idle
    }
  ]
}

2. 修改后台脚本逻辑 #

调整事件监听逻辑，等待新标签页加载完成后再发送消息，同时修正数组判断的错误：

// background.js
let tabsArray = []; // 确保tabsArray已初始化

chrome.tabs.onCreated.addListener(function(tab) {
  // 等待标签页加载完成后再操作
  chrome.tabs.onUpdated.addListener(function listener(tabId, changeInfo) {
    if (tabId === tab.id && changeInfo.status === 'complete') {
      // 移除临时的onUpdated监听，避免重复触发
      chrome.tabs.onUpdated.removeListener(listener);

      // 修正：用当前新标签的信息添加到数组
      const existingTab = tabsArray.find(obj => obj.id === tab.id);
      if (!existingTab) {
        tabsArray.push({
          id: tab.id,
          url: tab.url,
          title: tab.title
        });
      }

      console.log(tabsArray);
      // 给新创建的标签页发送消息
      chrome.tabs.sendMessage(tab.id, { tabsArray: tabsArray }, function(response) {
        // 捕获可能的错误，避免控制台报错
        if (chrome.runtime.lastError) {
          console.warn('发送消息失败:', chrome.runtime.lastError.message);
          return;
        }
        console.log(response);
      });
    }
  });
});

3. 内容脚本保持现有逻辑即可 #

// contentScript.js
chrome.runtime.onMessage.addListener(function(message, sender, sendResponse) {
  if (message.tabsArray) {
    console.log('收到tabsArray:', message.tabsArray);
    // 如果需要回复消息，可以调用sendResponse
    sendResponse({ status: 'success' });
  }
  // 注意：如果要异步回复，需要返回true
  // return true;
});

额外提示 #

• 如果你的扩展不需要在所有页面注入内容脚本，可修改manifest.json中的matches字段，指定具体的网站规则
• 发送消息时建议始终捕获chrome.runtime.lastError，避免未处理的错误提示
• 若需要在多个标签页间同步tabsArray，也可以考虑用chrome.storage.local来存储，内容脚本直接读取存储数据，无需实时发送消息

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