Chrome MV3扩展设置userVisibleOnly:false仍出现后台更新通知问题

问题现象 #

我们将扩展迁移至MV3后使用WebPush实现后台更新功能，已在订阅时设置userVisibleOnly: false，但部分用户反馈仍会收到「Site has updated in the background」通知。复现步骤如下：

• 在某Chrome配置文件中安装扩展并开启设置同步
• 重启Chrome，不打开安装该扩展的配置文件，转而打开其他配置文件
• 静默推送到达时，上述通知就会出现
• 一旦打开扩展所在的配置文件，这类通知就停止出现

问题原因 #

这是Chrome配置文件隔离与MV3 Service Worker生命周期机制共同导致的：

• 当扩展所在的配置文件未被激活时，扩展的后台Service Worker处于未运行状态
• 此时静默推送到达，Chrome无法确认扩展是否能正常处理静默推送（因为Service Worker没启动），就会触发默认的 fallback 通知
• 当配置文件激活后，Service Worker正常运行，Chrome能验证扩展的静默推送处理能力，就不会再弹出该通知

解决方案 #

1. 确保Push事件被正确处理 #

在Service Worker中添加Push事件监听，即使不需要展示通知，也要明确调用event.waitUntil()来保证Service Worker完成处理逻辑，让Chrome确认扩展能处理静默推送：

self.addEventListener('push', (event) => {
  // 处理后台更新逻辑，比如同步数据、更新缓存等
  const processingPromise = async () => {
    console.log('处理静默推送');
    // 此处添加你的后台业务代码
  };

  // 必须调用waitUntil，保证Service Worker不被提前终止
  event.waitUntil(processingPromise());
});

2. 优化订阅逻辑，避免不必要的重复订阅 #

原代码在onStartup和onInstalled时无条件重新订阅，可能导致订阅状态异常。修改installWebPush函数，先检查已有订阅是否有效：

export async function installWebPush() {
  // 先获取已有订阅
  const existingSubscription = await registration.pushManager.getSubscription();
  
  if (existingSubscription) {
    // 检查已有订阅的applicationServerKey是否匹配
    const existingKey = existingSubscription.options.applicationServerKey;
    const expectedKey = urlB64ToUint8Array(PUBLIC_KEY);
    
    if (existingKey && areUint8ArraysEqual(existingKey, expectedKey)) {
      // 订阅有效，直接同步即可
      await syncWebPushToken(JSON.stringify(existingSubscription));
      return;
    }
    // 订阅无效，先取消旧订阅
    await existingSubscription.unsubscribe();
  }

  // 没有有效订阅时再创建新订阅
  const pushData = await registration.pushManager.subscribe({
    userVisibleOnly: false,
    applicationServerKey: urlB64ToUint8Array(PUBLIC_KEY),
  });

  if (pushData) {
    await syncWebPushToken(JSON.stringify(pushData));
  }
}

// 辅助函数：比较两个Uint8Array是否相等
function areUint8ArraysEqual(a, b) {
  if (a.length !== b.length) return false;
  for (let i = 0; i < a.length; i++) {
    if (a[i] !== b[i]) return false;
  }
  return true;
}

3. 处理配置文件激活状态 #

监听chrome.runtime.onStartup时，结合配置文件的活跃状态调整订阅逻辑，或者在扩展被激活时重新同步订阅状态：

chrome.runtime.onStartup.addListener(() => {
  // 可通过存储标识判断当前是否为扩展所在的活跃配置文件
  chrome.storage.local.get(['isActiveProfile'], (result) => {
    if (result.isActiveProfile !== false) {
      installWebPush();
    }
  });
});

// 可选：监听扩展图标点击，用户激活配置文件时同步订阅状态
chrome.action.onClicked.addListener(() => {
  installWebPush();
});

4. 提示用户更新Chrome #

部分旧版Chrome对MV3的WebPush静默推送支持存在bug，建议用户升级到最新稳定版Chrome，避免兼容性问题。

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