Use FCM in Chrome Manifest version 3

Question

I was wondering if it was possible to use FCM in chrome extension Manifest version 3? And by calling the getToken function in the background.js script.

I tried to use it but I keep getting the following error:

FirebaseError: Messaging: We are unable to register the default service worker.

Even though the firebase-messaging-sw.js is in the extension root. And I see on the Chrome Extension API it has a gcm entry but not a fcm entry.

I did find a github repo where fcm worked with the V3 but in that repo they opened a new window and used the service worker registration function in there and the getToken function. That won't work for my case because I need the getToken function to be called in the background.js without user interaction.

Any suggestions?

Attached the modified background.js code:

import { initializeApp } from "./firebase-app.js";
import { getMessaging, onBackgroundMessage } from './firebase-messaging-sw.js';
import { getToken, onMessage } from "./firebase-messaging.js";
import { firebaseConfig, vapidKey } from './firebaseConfig.js';
    
// Initialize Firebase
const firebaseApp = initializeApp(firebaseConfig);
const messaging = getMessaging(firebaseApp);
    
    
onBackgroundMessage(messaging, (payload) => {
      console.log('[background.js] Received background message ', payload);
    
      self.registration.showNotification(payload.notification.title, {
        body: payload.notification.body,
      });
});
    
chrome.runtime.onInstalled.addListener(() => {
      console.log('installed');
});
    
getToken(messaging, {
      vapidKey,
    }).then((currentToken) => {
      if (currentToken) {
        // Send the token to your server to send push notifications.
        registrationTokenElement.textContent = currentToken;
        console.log(currentToken);
      } else {
        // Show permission request UI
        console.log('No registration token available. Request permission to generate one.');
        // ...
      }
    }).catch((err) => {
      console.log('An error occurred while retrieving token. ', err);
      // ...
});
    
async function openPopupWindow() {
      console.log('open popup');
      const { popupWindowId } = await chrome.storage.local.get('popupWindowId');
      if (popupWindowId) {
        try {
          await chrome.windows.update(popupWindowId, { focused: true });
          return;
        } catch (e) {
          // ignore
        }
      }
      const popup = await chrome.windows.create({
        url: 'popup.html',
        type: 'popup',
        width: 300,
        height: 500,
      });
      await chrome.storage.local.set({
        popupWindowId: popup.id,
      });
}
chrome.action.onClicked.addListener(() => {
      console.log('click icon');
      openPopupWindow();
});
    
self.onnotificationclick = function(event) {
      console.log('On notification click: ', event.notification.tag);
      event.notification.close();
      event.waitUntil(openPopupWindow());
};
    
chrome.windows.onRemoved.addListener(async (windowId) => {
      const { popupWindowId } = await chrome.storage.local.get('popupWindowId');
      if (popupWindowId === windowId) {
        console.log('close popup');
        await chrome.storage.local.remove('popupWindowId');
      }
});