Chrome扩展获取打开标签页数量 实现按钮点击差异化逻辑

你现有代码存在3个核心问题，会导致拿不到标签数、逻辑执行异常：

• 后台脚本推送消息时错误使用tabs[0].id作为接收方，固定给窗口第一个标签页发消息，当前加载完成的标签页无法收到数据
• content.js的按钮绑定逻辑是同步执行的，没有等待异步消息返回就运行if判断，此时tabcount还未赋值
• 仅监听了标签页更新事件，用户新建、关闭标签时不会触发计数更新，数据存在滞后

第一步：修正background.js逻辑 #

不要硬编码消息接收方的tabId，同时覆盖标签新建、关闭的场景，计数变化时给所有有效页面推送最新值，还要响应content脚本的主动查询请求：

// 统一推送最新标签数到所有可通信页面
function pushLatestTabCount() {
  chrome.tabs.query({ windowType: 'normal' }, (tabs) => {
    const tabCount = tabs.length;
    tabs.forEach(tab => {
      // 跳过chrome内置页面，避免发消息报错
      if (tab.url?.startsWith('http')) {
        chrome.tabs.sendMessage(tab.id, {
          type: 'TAB_COUNT_UPDATE',
          count: tabCount
        }, () => {
          // 静默接收方不存在的报错（比如未注入content脚本的旧页面）
          chrome.runtime.lastError;
        })
      }
    })
  })
}

// 响应content脚本主动发起的计数查询
chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
  if (request?.type === 'GET_TAB_COUNT') {
    chrome.tabs.query({ windowType: 'normal' }, (tabs) => {
      sendResponse({ count: tabs.length })
    })
    // 异步返回必须return true，保持消息通道不提前关闭
    return true;
  }
})

// 页面加载完成时推送计数
chrome.tabs.onUpdated.addListener((tabId, changeInfo) => {
  if (changeInfo.status === 'complete') {
    pushLatestTabCount()
  }
  return true;
})

// 新建、关闭标签时同步更新计数
chrome.tabs.onCreated.addListener(pushLatestTabCount)
chrome.tabs.onRemoved.addListener(pushLatestTabCount)

第二步：修正content.js逻辑 #

所有依赖标签数的逻辑都要放到拿到异步返回值之后执行，每次计数更新时重新绑定按钮事件，避免重复绑定导致逻辑冲突：

// 存储当前标签数
let currentTabCount = 0;

// 统一绑定返回按钮事件
function bindBackButtonAction() {
  const $backBtn = $("#Back");
  // 先解绑旧事件，防止重复触发
  $backBtn.off('click');

  $backBtn.on('click', (e) => {
    e.preventDefault();
    if (currentTabCount < 2) {
      window.history.back();
      console.log("single tab, execute history back");
    } else {
      window.location.href = 'exit';
      console.log("multiple tabs, execute exit redirect");
    }
  })
}

// 监听后台主动推送的计数更新
chrome.runtime.onMessage.addListener((request) => {
  if (request?.type === 'TAB_COUNT_UPDATE') {
    currentTabCount = request.count;
    console.log(`current open tab count: ${currentTabCount}`);
    // 等DOM加载完成再绑定事件
    $(bindBackButtonAction);
  }
})

// 页面初始化时主动拉取一次计数，避免等待推送的延迟
$(function() {
  chrome.runtime.sendMessage({ type: 'GET_TAB_COUNT' }, (res) => {
    if (res?.count !== undefined) {
      currentTabCount = res.count;
      bindBackButtonAction();
    }
  })
})

配置注意事项 #

• 确保manifest.json中已经申请tabs权限，同时content_scripts的匹配规则覆盖你需要生效的页面域名
• 不要在异步消息回调外部直接使用依赖返回值的变量，所有相关逻辑都要放到拿到数据之后执行

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