Manifest V3下Chrome扩展关闭时如何更新工具栏通知角标

核心机制澄清 #

• 不存在“扩展关闭仍持续运行的常驻进程”：Manifest V3 废弃了MV2时代的持久后台页，后台Service Worker为事件驱动模型，空闲30秒左右会被浏览器自动回收，不允许也不需要常驻内存。
• Lastpass、Traitsniper等扩展在未弹出popup（即用户感知到的“未打开”状态）时更新角标，完全依赖事件唤醒机制：浏览器/网页/系统触发对应事件时，会自动唤醒休眠的Service Worker，执行完角标更新逻辑后SW会再次进入休眠，不需要一直运行。
• 角标（Badge）状态由浏览器本地持久化存储，哪怕SW休眠、浏览器重启，之前设置的角标文字、颜色、标题都会保留，不需要SW常驻维持状态。

常见的SW唤醒触发源包含三类，覆盖绝大多数角标更新场景：

1. 内容脚本触发：配置了注入对应站点的内容脚本后，用户打开匹配网页时内容脚本自动运行，检测到未读数变化后通过消息通信唤醒SW执行更新。
2. 定时任务触发：通过chrome.alarmsAPI设置周期任务，到期后浏览器自动唤醒SW拉取最新未读数更新角标，最小支持1分钟间隔。
3. 服务端推送触发：通过Web Push/chrome.gcm通道接收服务端新消息推送，浏览器收到推送后自动唤醒SW处理更新。

现有代码问题 #

你的角标更新逻辑没有绑定到上述可唤醒SW的事件上，仅在SW已经处于运行状态时才会执行，SW被回收后没有触发源唤醒，自然不会自动更新角标。

修复步骤 #

1. 补充必要权限，在manifest.json的permissions数组中添加alarms权限，用于创建定时唤醒任务：

"permissions": ["contextMenus", "notifications", "storage", "tabs", "alarms"],

2. 重构background.js逻辑，将角标更新封装为独立函数，绑定到所有唤醒事件上：

// 抽离角标更新为可复用逻辑
async function updateUnreadBadge() {
  // 替换为你自己的未读数获取逻辑：可从本地存储读取、或请求业务接口拉取
  const { unreadCount = 0 } = await chrome.storage.local.get('unreadCount');

  switch (unreadCount) {
    case 0:
      chrome.action.setBadgeBackgroundColor({ color: [110, 140, 180, 255] })
      chrome.action.setTitle({ title: 'No unread messages' })
      chrome.action.setBadgeText({ text: '' })
      break
    case 1:
      chrome.action.setBadgeBackgroundColor({ color: '#F00' })
      chrome.action.setTitle({ title: `${unreadCount} unread message` })
      chrome.action.setBadgeText({ text: unreadCount.toString() })
      break
    default:
      chrome.action.setBadgeBackgroundColor({ color: '#F00' })
      chrome.action.setTitle({ title: `${unreadCount} unread messages` })
      chrome.action.setBadgeText({ text: unreadCount.toString() })
      break
  }
}

// 扩展安装、更新、浏览器启动时，初始化定时任务并执行一次角标更新
chrome.runtime.onInstalled.addListener(() => {
  chrome.alarms.create('refreshUnreadBadge', { periodInMinutes: 1 });
  updateUnreadBadge();
});
chrome.runtime.onStartup.addListener(updateUnreadBadge);

// 定时任务触发时更新角标
chrome.alarms.onAlarm.addListener((alarm) => {
  if (alarm.name === 'refreshUnreadBadge') updateUnreadBadge();
});

// 收到内容脚本/其他扩展页面的消息时更新角标
chrome.runtime.onMessage.addListener((msg) => {
  if (msg?.type === 'UNREAD_UPDATED') {
    // 若消息携带最新未读数，先写入存储再更新
    if (typeof msg.unreadCount === 'number') {
      chrome.storage.local.set({ unreadCount: msg.unreadCount }).then(updateUnreadBadge);
    } else {
      updateUnreadBadge();
    }
  }
  return true;
});

注意事项 #

• 不要通过循环定时器、debugger断点等hack手段尝试让Service Worker常驻，Chrome会主动检测这类违规行为，可能导致扩展下架。
• 如果业务场景对实时性要求高，可在内容脚本中直接监听网页内的未读变化，拿到最新数值后通过chrome.runtime.sendMessage发送给后台触发更新，比定时轮询的延迟更低。
• 不需要每次SW唤醒都重新设置角标，仅在未读数实际发生变化时调用setBadge相关接口即可，减少不必要的资源消耗。

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