Chrome扩展侧边栏面板中如何获取Tab ID？

之前在Chrome扩展中，通过内容脚本注入的iframe加载React应用，React应用通过chrome.runtime.sendMessage向后台脚本请求Tab ID，后台通过sender?.tab?.id可以正常获取。现在改用Side Panel后，React渲染正常，但后台收到的sender对象仅包含id、url、origin，没有tab属性，导致Tab ID获取为undefined。

方案1：侧边栏直接调用chrome.tabs.query获取当前激活Tab ID #

需要在manifest.json中添加tabs权限，然后在侧边栏的React代码中直接查询当前激活的Tab：

步骤1：更新manifest权限 #

"permissions": [
  "storage",
  "sidePanel",
  "tabs"
]

步骤2：在React组件中获取Tab ID #

async function getCurrentTabId() {
  const [activeTab] = await chrome.tabs.query({
    active: true,
    currentWindow: true
  });
  return activeTab?.id;
}

// 使用示例
const tabId = await getCurrentTabId();

方案2：利用chrome.sidePanel API获取关联Tab ID（无需额外权限） #

Chrome 114及以上版本支持chrome.sidePanel.getPanelOptions API，可以直接获取当前侧边栏关联的Tab ID，无需添加tabs权限：

async function getAssociatedTabId() {
  const panelOptions = await chrome.sidePanel.getPanelOptions({});
  return panelOptions.tabId;
}

// 使用示例
const tabId = await getAssociatedTabId();

方案3：修改后台消息处理逻辑（兼容旧方式） #

如果仍希望通过消息传递获取Tab ID，可以在后台脚本中主动查询当前激活Tab的ID，替代依赖sender.tab的方式：

后台脚本修改： #

chrome.runtime.onMessage.addListener(async (request, sender, sendResponse) => {
  const { message } = request;
  if (message === MSG_GET_TAB_ID) {
    // 若sender无tab属性（来自侧边栏），则查询当前激活Tab
    let tabId = sender?.tab?.id;
    if (!tabId) {
      const [activeTab] = await chrome.tabs.query({ active: true, currentWindow: true });
      tabId = activeTab?.id;
    }
    sendResponse(tabId);
  }
});

注意：此方法仍需要在manifest中添加tabs权限。

内容脚本是注入到目标网页中的，属于网页上下文，因此chrome.runtime.onMessage的sender对象会包含tab属性；而Side Panel是扩展自身的页面，属于扩展上下文，sender对象不会携带tab信息，因此原逻辑失效。

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