Chrome扩展Manifest V3中能否使用FCM？迁移技术咨询

可以在Manifest V3中使用FCM，但需要调整原有代码结构——V3不允许扩展注册额外的Service Worker，因此你需要把原firebase-messaging-sw.js中的逻辑合并到扩展自身的后台Service Worker中。

1. 更新Manifest.json配置 #

确保添加必要的权限和后台Service Worker配置：

{
  "manifest_version": 3,
  "name": "你的扩展名称",
  "version": "1.0",
  "permissions": ["gcm", "storage"],
  "host_permissions": ["https://*.firebase.googleapis.com/*"],
  "background": {
    "service_worker": "background.js"
  },
  "action": {
    "default_popup": "popup.html"
  },
  "icons": {
    "48": "icons/icon-48.png"
  }
}

2. 重构后台Service Worker（background.js） #

将原firebase-messaging-sw.js和旧background.js的逻辑整合到同一个Service Worker文件中：

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

const firebaseConfig = {
  apiKey: "<api-key>",
  authDomain: "<auth-domain>",
  projectId: "<project-id>",
  storageBucket: "<storage-bucket>",
  messagingSenderId: "<messaging-sender-id>",
  appId: "<app-id>",
};

// 初始化Firebase
const app = initializeApp(firebaseConfig);
const messaging = getMessaging(app);

// 获取并保存FCM令牌
getToken(messaging, { vapidKey: "<vapid-key>" })
  .then((registrationToken) => {
    console.log("FCM令牌已获取:", registrationToken);
    // 可将令牌存储到chrome.storage或发送至你的后端服务
  })
  .catch((error) => {
    console.error("获取FCM令牌失败:", error);
  });

// 处理后台消息（扩展未激活时收到的消息）
onBackgroundMessage(messaging, async (payload) => {
  console.log("[后台SW] 收到FCM消息:", payload);
  
  // 向用户显示通知
  await self.registration.showNotification("新消息提醒", {
    body: payload.notification?.body || "收到一条新消息",
    icon: "/icons/icon-48.png",
    data: payload
  });

  // 将消息转发给所有打开的扩展客户端（如Popup、内容脚本）
  const allClients = await self.clients.matchAll({ includeUncontrolled: true, type: "all" });
  allClients.forEach(client => {
    client.postMessage({ type: "msg_type", payload });
  });
});

// 监听来自客户端的消息
self.addEventListener("message", (event) => {
  if (event.data.type === "client_action") {
    // 处理来自Popup或内容脚本的请求
  }
});

3. 前台客户端（如Popup）处理消息 #

在Popup或内容脚本中初始化FCM，处理前台消息和来自后台SW的转发消息：

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

const firebaseConfig = {
  // 与后台一致的Firebase配置
  apiKey: "<api-key>",
  authDomain: "<auth-domain>",
  projectId: "<project-id>",
  storageBucket: "<storage-bucket>",
  messagingSenderId: "<messaging-sender-id>",
  appId: "<app-id>",
};

// 初始化Firebase
const app = initializeApp(firebaseConfig);
const messaging = getMessaging(app);

// 监听前台消息（扩展激活时收到的消息）
onMessage(messaging, (payload) => {
  console.log("[Popup] 收到前台FCM消息:", payload);
  // 在这里更新Popup UI或执行其他逻辑
});

// 监听来自后台SW的消息
navigator.serviceWorker.addEventListener("message", (event) => {
  if (event.data.type === "msg_type") {
    console.log("[Popup] 收到后台转发的消息:", event.data.payload);
    // 处理转发的消息
  }
});

// 请求通知权限（首次打开Popup时调用）
async function requestNotificationPermission() {
  const permission = await Notification.requestPermission();
  if (permission === "granted") {
    console.log("通知权限已获取");
  }
}
requestNotificationPermission();

关键注意事项 #

• 不要单独使用firebase-messaging-sw.js：Manifest V3只允许扩展注册一个后台Service Worker，所有SW相关逻辑必须合并到这个文件中。
• 使用Firebase 9.x+模块化SDK：旧版命名空间SDK可能无法适配V3的Service Worker环境。
• 权限配置：必须添加gcm权限和Firebase API的host_permissions，否则FCM请求会被Chrome拦截。
• 通知权限：扩展需要主动请求用户的通知权限才能显示消息通知。

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