Chrome扩展能否接收推送通知？调用getToken()遇FCM注册错误

Chrome扩展完全支持接收FCM推送通知，但FCM在扩展环境下的配置逻辑和普通网页不同，你遇到的错误是因为FCM默认的Service Worker注册机制不适用于Chrome扩展。

错误原因 #

普通网页中FCM会自动查找并注册firebase-messaging-sw.js，但Chrome扩展的Service Worker是通过manifest.json声明加载的，无法通过网页端的navigator.serviceWorker.register()方法动态注册，因此触发了failed-service-worker-registration错误。

具体解决步骤 #

1. 修正manifest.json配置 #

必须使用Manifest V3（MV2即将被Chrome废弃），并正确声明后台Service Worker和必要权限：

{
  "manifest_version": 3,
  "name": "你的扩展名称",
  "version": "1.0",
  "background": {
    "service_worker": "firebase-messaging-sw.js"
  },
  "permissions": ["notifications", "gcm", "storage"],
  "host_permissions": ["https://fcm.googleapis.com/"]
}

2. 调整Service Worker文件（firebase-messaging-sw.js） #

使用兼容模式的FCM脚本，避免使用DOM相关API：

importScripts('https://www.gstatic.com/firebasejs/9.2.0/firebase-app-compat.js');
importScripts('https://www.gstatic.com/firebasejs/9.2.0/firebase-messaging-compat.js');

firebase.initializeApp({
  apiKey: "你的API_KEY",
  authDomain: "你的AUTH_DOMAIN",
  projectId: "你的PROJECT_ID",
  storageBucket: "你的STORAGE_BUCKET",
  messagingSenderId: "你的MESSAGING_SENDER_ID",
  appId: "你的APP_ID"
});

const messaging = firebase.messaging();

// 处理后台推送通知
messaging.onBackgroundMessage((payload) => {
  const notificationTitle = payload.notification.title;
  const notificationOptions = {
    body: payload.notification.body,
    icon: "/icons/icon-128.png" // 替换为你的扩展图标路径
  };

  self.registration.showNotification(notificationTitle, notificationOptions);
});

3. 前端页面正确获取FCM Token #

不要依赖FCM自动注册Service Worker，直接使用扩展已注册的后台Service Worker实例：

import { initializeApp } from "firebase/app";
import { getMessaging, getToken } from "firebase/messaging";

const firebaseConfig = {
  // 同上的Firebase配置信息
};

const app = initializeApp(firebaseConfig);
const messaging = getMessaging(app);

// 通过navigator.serviceWorker.ready获取已注册的Service Worker
navigator.serviceWorker.ready.then(async (registration) => {
  try {
    const token = await getToken(messaging, {
      serviceWorkerRegistration: registration,
      vapidKey: "你的VAPID密钥" // 从Firebase控制台Web配置中获取
    });
    console.log("FCM Token:", token);
    // 可将token发送至你的服务器存储
  } catch (error) {
    console.error("获取Token失败:", error);
  }
});

注意事项 #

• firebase-messaging-sw.js必须放在扩展根目录，与manifest.json同级
• VAPID密钥需从Firebase控制台「云消息传递」→「Web配置」中生成获取
• 测试时需通过Chrome「加载已解压的扩展程序」安装，不能直接打开本地HTML文件
• MV3的Service Worker无法访问DOM，如需与前端页面交互，需使用chrome.runtime.sendMessage进行消息通信

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