Chrome Manifest V3扩展chrome.tabs.remove误删标签页及监听失效问题

问题背景 #

开发支持关闭用户指定标签页的Chrome扩展，后台脚本遵循Manifest V3规范，核心逻辑为调用chrome.tabs.remove接口，关闭URL包含用户配置待屏蔽站点字符串的标签页。

异常表现 #

• 扩展配置选项页后，通过扩展弹窗设置按钮、扩展图标右键“选项”菜单打开选项页时，偶发Ctrl+T新建标签页、点击超链接打开的新标签页被瞬间自动删除，控制台抛出报错：Uncaught (in promise) Error: No tab with id: xxxx，扩展已声明tabs、activeTab权限。
• 误删问题偶发消失时，chrome.tabs.remove接口完全失效，标签关闭逻辑无响应，预期打印的调试日志无输出，表现为事件监听器随机停止工作。

根因分析 #

原有代码存在以下确定性缺陷，直接导致两类异常：

• 全局变量竞态：使用全局变量holdURL、tabit在多个异步回调间传递数据，异步操作执行顺序不可控，会读取到其他事件覆盖的过期值，直接引发误删、操作不存在标签的报错。
• 异步时序错误：chrome.tabs.onActivated回调中，chrome.tabs.query为异步操作，未等查询结果完成对holdURL、tabit的赋值就提前调用loopInfo，此时读取的全局变量为上一次事件残留的旧值。
• 无效参数传递：onActivated触发时传入loopInfo的标签ID为占位符1，并非真实标签ID；loopInfo内部不区分触发场景，只要匹配规则就会删除tabit对应标签，即使当前是onUpdated触发场景，极易误删无关激活标签。
• 边界校验缺失：未判断chrome.storage.sync.get返回的list是否存在、是否为合法数组，存储未初始化、用户未配置屏蔽列表时遍历逻辑直接报错，中断后续执行，表现为监听器失效。
• 未做页面过滤：未跳过Chrome内置页、扩展自身页面的检测逻辑，容易将新标签页、扩展选项页纳入检测范围触发误操作。

修复方案 #

修复逻辑遵循以下原则：

• 废弃全局变量传值，所有上下文参数通过函数入参传递，每个事件触发的检测逻辑上下文独立，彻底避免竞态问题。
• 所有异步操作按顺序执行，获取到完整标签信息、屏蔽列表配置后再执行规则匹配，不提前调用检测逻辑。
• 增加全链路边界校验：校验标签ID合法性、屏蔽列表格式有效性，跳过Chrome内置页、扩展自有页面。
• 不同触发场景仅操作对应关联的标签，不跨场景删除无关标签。
• 为chrome.tabs.remove增加异常捕获，避免标签已被关闭时抛出未捕获的Promise错误。

修复后可直接使用的后台脚本代码：

// 标签检测与关闭逻辑，所有参数通过入参传递，无全局状态依赖
async function checkAndCloseTab(targetTabId) {
  try {
    // 过滤非法标签ID
    if (!Number.isInteger(targetTabId) || targetTabId <= 0) return;

    // 获取目标标签详情
    const [targetTab] = await chrome.tabs.query({ tabId: targetTabId });
    if (!targetTab || !targetTab.url) return;

    // 跳过Chrome内置页、扩展自身页面，避免误删系统/扩展页面
    if (targetTab.url.startsWith('chrome://') || targetTab.url.startsWith('chrome-extension://')) return;

    // 读取用户配置的屏蔽站点列表
    const { list: websiteList = [] } = await chrome.storage.sync.get('list');
    if (!Array.isArray(websiteList) || websiteList.length === 0) return;

    const currentTabUrl = String(targetTab.url);
    // 匹配屏蔽规则
    const matchBlockRule = websiteList.some(blockKeyword => {
      if (typeof blockKeyword !== 'string' || !blockKeyword.trim()) return false;
      return currentTabUrl.includes(blockKeyword) || blockKeyword.includes(currentTabUrl);
    });

    if (matchBlockRule) {
      // 执行关闭，捕获标签不存在的异常
      await chrome.tabs.remove(targetTabId).catch(err => console.debug('目标标签已不存在，跳过关闭操作'));
      console.log('已关闭匹配屏蔽规则的标签:', currentTabUrl);
    }
  } catch (err) {
    console.error('标签屏蔽逻辑执行异常:', err);
  }
}

// 监听标签切换激活事件
chrome.tabs.onActivated.addListener((event) => {
  // 延迟100ms等待标签URL初始化完成
  setTimeout(() => {
    checkAndCloseTab(event.tabId);
  }, 100);
});

// 监听标签加载更新事件
chrome.tabs.onUpdated.addListener((tabId, changeInfo, tab) => {
  // 仅在标签加载完成、URL有效时触发检测
  if (changeInfo.status === 'complete' && tab.url) {
    checkAndCloseTab(tabId);
  }
});

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