Chrome扩展chrome.webRequest.onBeforeRequest切换标签后进程未终止如何解决

• 你当前的requestArray、resourcesCategories等状态都存储在全局作用域，所有标签的请求数据都会写入同一份全局变量，切换标签后旧标签的异步请求回调仍会修改该全局变量，导致不同标签的数据混淆
• 没有按标签ID隔离状态，也没有监听标签切换事件同步视图展示的内容

1. 按标签ID隔离存储状态 #

不要用全局变量存储单份状态，用对象映射存储每个标签对应的独立状态：

// 全局存储各标签的独立状态，键为标签ID
const tabStateMap = {}
// 获取指定标签的状态，不存在则初始化
function getTabState(tabId) {
  if (!tabStateMap[tabId]) {
    tabStateMap[tabId] = {
      requestArray: [],
      resourcesCategories: [],
      mywebsiteCategories: []
    }
  }
  return tabStateMap[tabId]
}
// 清理指定标签的状态，释放内存
function clearTabState(tabId) {
  delete tabStateMap[tabId]
}

2. 监听标签切换和关闭事件 #

动态更新当前激活的标签ID，切换标签时同步视图为当前标签的对应数据，标签关闭时清理无效状态：

let currentActiveTabId = null
// 监听标签切换事件
chrome.tabs.onActivated.addListener((activeInfo) => {
  currentActiveTabId = activeInfo.tabId
  // 切换后直接把视图更新为当前标签的对应数据
  const currentState = getTabState(currentActiveTabId)
  setResources(currentState.requestArray)
  setResourcesCategories(currentState.resourcesCategories)
  setWebsiteCategories(currentState.mywebsiteCategories)
})
// 监听标签关闭事件，清理无效状态
chrome.tabs.onRemoved.addListener((tabId) => {
  clearTabState(tabId)
})

3. 改造webRequest监听器逻辑 #

所有请求数据写入对应标签的独立状态，仅当请求所属标签为当前激活标签时，才更新视图：

chrome.webRequest.onBeforeRequest.addListener(
  async (details) => {
    const reqTabId = details.tabId
    // 忽略非标签页发出的请求
    if (reqTabId === -1) return
    const tabState = getTabState(reqTabId)
    // 处理请求域名
    const domain = details.url.split('/')[2]
    if (domain && !tabState.requestArray.includes(domain)) {
      tabState.requestArray.push(domain)
      apiCheck(
        tabState.requestArray,
        reqTabId,
        tabState.mywebsiteCategories,
        tabState.resourcesCategories
      )
    }
    // 处理host
    const host = await getURL()
    if (host && !tabState.requestArray.includes(host)) {
      tabState.requestArray.push(host)
      apiCheck(
        tabState.requestArray,
        reqTabId,
        tabState.mywebsiteCategories,
        tabState.resourcesCategories
      )
    }
    // 只有当前请求的标签是正在激活的标签，才更新视图
    if (reqTabId === currentActiveTabId) {
      setResources(tabState.requestArray)
    }
  },
  { urls: ['<all_urls>'] }
)

4. 移除冗余逻辑 #

删除原来的全局清空数组逻辑，现在状态按标签隔离，无需全局重置。

• webRequest的监听器全局仅需注册一次，不要重复调用addListener，避免逻辑重复执行
• 如果你的扩展是popup类型，popup关闭后上下文会销毁，需要持久化状态可以将tabStateMap存入chrome.storage.local，仍以标签ID为键存储即可

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