Chrome扩展Manifest V3：注入的window.tabId值在内容脚本运行后消失

1. 上下文隔离限制：Chrome扩展的内容脚本运行在隔离上下文（ISOLATED World），而你通过world: "MAIN"执行的脚本属于页面自身的上下文（MAIN World）。这两个上下文拥有完全独立的window对象，因此内容脚本中访问的window.tabId和你在MAIN世界设置的window.tabId并非同一属性，自然返回undefined。
2. 页面上下文属性被重置：页面加载完成后控制台能读取到window.tabId，但后续变为undefined，大概率是页面自身的JavaScript代码（如路由跳转、页面刷新、脚本重置全局属性）清除了该值。

以下是几种可靠的持久化tabId的方案，按需选择：

方案一：内容脚本直接获取tabId（最简便） #

内容脚本可直接调用chrome.tabs.getCurrent()获取当前标签页信息，无需依赖背景页注入MAIN世界的脚本。

修改内容脚本代码：

chrome.runtime.onMessage.addListener(async (request, sender, sendResponse) => {
  const currentTab = await chrome.tabs.getCurrent();
  sendResponse({
    tabId: currentTab.id,
    info: 'other stuff'
  });
});

需在manifest.json中声明tabs权限：

{
  "permissions": ["tabs"]
}

方案二：注入内容脚本时直接传递tabId #

在背景页注入内容脚本时，通过args参数直接传递tabId，内容脚本接收后保存为自身上下文的变量，彻底规避隔离问题。

背景页代码修改： #

chrome.tabs.onUpdated.addListener(async (tabId, changeInfo, tab) => {
  if (tab.url?.startsWith("chrome://")) return;

  await chrome.scripting.executeScript({
    target: { tabId: tabId },
    args: [tabId],
    func: (tabId) => {
      // 在内容脚本的隔离上下文里保存tabId
      window.contentTabId = tabId;
    }
  });
});

内容脚本代码修改： #

chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
  sendResponse({
    tabId: window.contentTabId,
    info: 'other stuff'
  });
});

此处的window是内容脚本隔离上下文的全局对象，不会与页面上下文混淆，也不会被页面脚本篡改。

方案三：使用会话存储持久化（跨脚本共享场景） #

若需在多个脚本（包括MAIN世界和内容脚本）间共享tabId，可使用chrome.storage.session（标签页级会话存储，关闭标签页后自动清除）。

背景页代码修改： #

chrome.tabs.onUpdated.addListener(async (tabId, changeInfo, tab) => {
  if (tab.url?.startsWith("chrome://")) return;

  // 将tabId存入会话存储，键名关联tabId避免冲突
  await chrome.storage.session.set({ [`tabId_${tabId}`]: tabId });
});

内容脚本代码修改： #

chrome.runtime.onMessage.addListener(async (request, sender, sendResponse) => {
  const currentTab = await chrome.tabs.getCurrent();
  const storedData = await chrome.storage.session.get(`tabId_${currentTab.id}`);
  sendResponse({
    tabId: storedData[`tabId_${currentTab.id}`],
    info: 'other stuff'
  });
});

需在manifest.json中声明storage和tabs权限：

{
  "permissions": ["storage", "tabs"]
}

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