如何在谷歌Chrome扩展后台监听FCM消息？含GCM迁移适配问题

我之前帮团队处理过Chrome扩展从GCM迁移到FCM的需求，踩了不少坑，给你整理一套可行的迁移方案——核心思路是弃用旧的chrome.gcm API，改用FCM Web SDK + Web Push API，这也是Chrome官方推荐的现代方案，完全兼容FCM的新基础设施。

一、升级扩展后台到Service Worker（关键前提） #

旧的chrome.gcm API依赖页面型后台，但FCM的Web推送需要Service Worker环境。如果你的扩展还在使用Manifest V2的页面型后台（比如background.html），建议直接升级到Manifest V3的Service Worker后台（V2即将被Chrome弃用，早升级早省心）。

修改manifest.json：

{
  "manifest_version": 3,
  "background": {
    "service_worker": "background.js"
  },
  "permissions": ["notifications", "storage"],
  "host_permissions": ["https://fcm.googleapis.com/"],
  "content_security_policy": {
    "extension_pages": "script-src 'self' https://www.gstatic.com; object-src 'self'"
  }
}

• content_security_policy必须允许加载Firebase的CDN脚本，否则会被拦截。
• 如果暂时无法升级到V3，V2的Service Worker配置可以参考Chrome官方文档，但还是强烈建议迁移到V3。

二、集成FCM Web SDK到后台Service Worker #

在background.js中导入并初始化FCM SDK，监听后台消息：

// 导入FCM兼容版SDK（适配Service Worker环境）
importScripts('https://www.gstatic.com/firebasejs/9.23.0/firebase-app-compat.js');
importScripts('https://www.gstatic.com/firebasejs/9.23.0/firebase-messaging-compat.js');

// 初始化Firebase应用（配置从Firebase控制台获取）
firebase.initializeApp({
  apiKey: "YOUR_API_KEY",
  authDomain: "YOUR_AUTH_DOMAIN",
  projectId: "YOUR_PROJECT_ID",
  storageBucket: "YOUR_STORAGE_BUCKET",
  messagingSenderId: "YOUR_MESSAGING_SENDER_ID",
  appId: "YOUR_APP_ID"
});

const messaging = firebase.messaging();

// 监听FCM后台消息
messaging.onBackgroundMessage((payload) => {
  console.log('[FCM] 收到后台消息:', payload);
  
  // 自定义通知展示逻辑
  const notificationTitle = payload.notification?.title || '新消息';
  const notificationOptions = {
    body: payload.notification?.body || '您有一条新通知',
    icon: '/icons/icon-128.png' // 替换成你的扩展图标路径
  };

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

三、获取FCM推送Token并同步到服务器 #

你需要让扩展获取用户的FCM Token，然后把Token同步到你的业务服务器，这样服务器就能通过这个Token给扩展发送FCM消息。

在扩展的交互页面（比如popup.js或options.js）中添加Token获取逻辑：

// 导入FCM模块化SDK
import { initializeApp } from "firebase/app";
import { getMessaging, getToken } from "firebase/messaging";

// Firebase配置和后台保持一致
const firebaseConfig = {
  apiKey: "YOUR_API_KEY",
  authDomain: "YOUR_AUTH_DOMAIN",
  projectId: "YOUR_PROJECT_ID",
  storageBucket: "YOUR_STORAGE_BUCKET",
  messagingSenderId: "YOUR_MESSAGING_SENDER_ID",
  appId: "YOUR_APP_ID"
};

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

// 请求通知权限并获取Token
async function getFCMToken() {
  const permission = await Notification.requestPermission();
  if (permission === 'granted') {
    // VAPID密钥从Firebase控制台的「Cloud Messaging」>「Web配置」中获取
    const token = await getToken(messaging, { vapidKey: "YOUR_VAPID_KEY" });
    if (token) {
      // 把Token发送到你的业务服务器存储
      await fetch('https://your-server.com/api/save-fcm-token', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ token, userId: '当前用户ID' })
      });
    }
  }
}

// 页面加载时调用
document.addEventListener('DOMContentLoaded', getFCMToken);

四、调整FCM消息的发送格式 #

FCM发送到Chrome扩展的消息需要符合Web Push规范，示例请求格式如下（你可以用Firebase Admin SDK直接发送，或者调用FCM的REST API）：

{
  "message": {
    "token": "用户的FCM Token",
    "notification": {
      "title": "扩展通知标题",
      "body": "通知内容"
    },
    "data": {
      "custom_data": "自定义业务数据，会在payload.data中拿到"
    }
  }
}

常见注意事项 #

• 确保Firebase项目已启用Cloud Messaging服务，并且正确配置了Web应用。
• 测试时需要安装打包后的扩展（开发者模式临时加载也可，但要确保通知权限已授予）。
• 如果Service Worker没有触发消息监听，可以在Chrome的扩展管理页面（chrome://extensions/）打开后台页面的控制台查看日志。
• 旧的chrome.gcm API已经被Chrome标记为弃用，不再接收FCM的消息，所以必须完成迁移。

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