如何让chrome.tabs.onCreate的openerTabId在webRequest.onBeforeRequest触发前可用？

这个问题我之前也碰到过！Chrome的事件触发顺序确实有点反直觉——当通过链接打开新标签时，webRequest.onBeforeRequest会先于tabs.onCreated触发，这就导致你在请求回调里拿不到刚创建标签的openerTabId。

下面给你一个简单可靠的解决方案，核心思路是用缓存暂存等待处理的请求，等标签创建完成拿到openerTabId后再执行逻辑：

解决方案代码 #

首先，我们需要用两个Map替代全局变量来管理状态（避免多标签场景下的变量覆盖问题）：

• tabOpenerMap：存储每个tabId对应的openerTabId
• pendingRequests：暂存等待openerTabId的web请求

修改后的完整代码如下：

// 用Map替代全局变量，避免多标签冲突
const tabOpenerMap = new Map();
const pendingRequests = new Map();

async function checkNewTab(tab) {
  // 存储当前tab的openerTabId
  tabOpenerMap.set(tab.id, tab.openerTabId);
  
  // 检查有没有等待这个tab的请求
  if (pendingRequests.has(tab.id)) {
    const resolvePromises = pendingRequests.get(tab.id);
    // 逐个resolve，让对应的web请求回调继续执行
    resolvePromises.forEach(resolve => resolve());
    // 清理缓存
    pendingRequests.delete(tab.id);
  }
}

async function checkRedirects(details) {
  const tabId = details.tabId;
  
  // 先检查是否已经拿到了当前tab的openerTabId
  if (tabOpenerMap.has(tabId)) {
    const openerTabId = tabOpenerMap.get(tabId);
    // 这里写你的业务逻辑，现在可以正常使用openerTabId了
    console.log("Opener tab ID:", openerTabId);
    // 可选：如果不需要再保留这个映射，可以清理掉
    tabOpenerMap.delete(tabId);
    return;
  }
  
  // 如果还没拿到，就把当前请求挂起，等待tabs.onCreate触发
  await new Promise((resolve) => {
    if (!pendingRequests.has(tabId)) {
      pendingRequests.set(tabId, []);
    }
    pendingRequests.get(tabId).push(resolve);
    
    // 加个超时保护，防止请求一直挂着（比如标签创建失败的情况）
    setTimeout(() => {
      if (pendingRequests.has(tabId) && pendingRequests.get(tabId).includes(resolve)) {
        resolve(); // 超时后继续执行，此时openerTabId可能为undefined，你可以在逻辑里处理这种情况
        const updated = pendingRequests.get(tabId).filter(r => r !== resolve);
        if (updated.length === 0) {
          pendingRequests.delete(tabId);
        } else {
          pendingRequests.set(tabId, updated);
        }
      }
    }, 3000); // 3秒超时，可根据需求调整
  });
  
  // 等待结束后，再次尝试获取openerTabId（可能是超时或者标签创建完成）
  const openerTabId = tabOpenerMap.get(tabId);
  // 这里写你的业务逻辑，注意处理openerTabId为undefined的情况
  if (openerTabId) {
    console.log("Opener tab ID after wait:", openerTabId);
    tabOpenerMap.delete(tabId);
  } else {
    console.log("No opener tab ID found (timeout or tab creation failed)");
  }
}

function setupNewTabListener() {
  chrome.tabs.onCreated.addListener(checkNewTab);
}

function setUpRedirectListener() {
  chrome.webRequest.onBeforeRequest.removeListener(checkRedirects);
  const filter = createFilter(redirects); // 假设createFilter是你已有的函数
  // 注意：因为用了async，Chrome会自动处理异步的blocking回调
  chrome.webRequest.onBeforeRequest.addListener(checkRedirects, filter, ["blocking"]);
}

function setupInitial() {
  setupNewTabListener();
  setUpRedirectListener();
}

// 修复原代码里的语法错误，正确调用chrome.storage.local.get
chrome.storage.local.get(['someKey'], (result) => {
  setupInitial();
});

关键细节说明 #

• 为什么用Map而不是全局变量：如果用户同时打开多个新标签，全局变量会被覆盖，Map可以通过tabId精准关联每个标签的openerTabId，避免逻辑冲突。
• 异步等待与超时保护：利用Promise让checkRedirects暂停执行，直到tabs.onCreate触发后再继续；同时加入超时逻辑，防止因为异常情况（比如标签创建失败）导致请求一直挂起。
• 缓存清理：处理完请求或超时后及时清理Map里的条目，避免内存泄漏。

另外，我已经修正了原代码中chrome.storage.local.get的语法错误，确保初始化逻辑能正确执行。

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