Chrome扩展消息通信问题：onMessage回调中tabs[0].id报错

报错原因解析 #

你碰到的TypeError: Cannot read property 'id' of undefined，本质是chrome.tabs.query({currentWindow: true, active: true})返回的tabs数组为空，导致访问tabs[0].id失败。

为什么会时好时坏？

• 正常工作场景：打开popup后未切换窗口，tabs.query能精准定位到当前活跃标签页，tabs[0]存在，消息发送正常。
• 报错场景：popup打开后切换了其他Chrome窗口，此时currentWindow: true会指向你切换到的新窗口——如果这个窗口的活跃标签是Chrome内置页面（比如设置页、新标签页），或者窗口内无有效标签，tabs数组就会为空，自然触发报错。

修复方案 #

核心思路是固定目标标签ID：在popup与background建立连接时，直接获取并保存popup所属的标签ID，后续消息都通过这个固定ID发送，避免每次查询可能出现的偏差。

修改后的代码示例 #

popup.js

// 先获取当前标签ID，再建立连接
chrome.tabs.query({currentWindow: true, active: true}, (tabs) => {
  const currentTabId = tabs[0].id;
  // 给连接设置明确名称，避免混淆
  let port = chrome.extension.connect({name: 'text-sync-channel'});

  port.postMessage({query: true});

  port.onMessage.addListener(textMsg => {
    mytext.value = textMsg;
  });

  function postMyMessage() {
    port.postMessage({input: mytext.value});
  }

  mytext.oninput = postMyMessage;
});

background.js

let popup_port;
let targetTabId; // 保存popup所属的标签ID

chrome.extension.onConnect.addListener(port => {
  popup_port = port;
  // 直接从port.sender获取发起连接的标签ID，比查询更可靠
  targetTabId = port.sender.tab.id;

  popup_port.onMessage.addListener(msg => {
    // 确保标签ID存在再发送消息
    if (targetTabId) {
      chrome.tabs.sendMessage(targetTabId, msg);
    }
    return true;
  });
});

chrome.runtime.onMessage.addListener(msg => {
  // 确保popup连接存在再转发消息
  if (popup_port) {
    popup_port.postMessage(msg);
  }
});

额外优化点 #

• 给连接设置明确的name（比如text-sync-channel），避免和扩展内其他可能的连接冲突。
• 增加存在性判断（if (targetTabId)、if (popup_port)），避免因意外情况（比如popup突然关闭）导致的报错。

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