Help to figure out Firebase event trigger integration with WXT

[skwsccss]

Describe the bug

With following code, I can receive the command from firebase properly but chrome.runtime is undefined as I am using it outside of function defineBackground.
But if I move the onSnapshot function into defineBackground function side, snapshot doesn't receive the trigger events anymore.

import { db } from '../firebase'
import {
  collection,
  query,
  where,
  onSnapshot,
  addDoc,
  updateDoc,
  doc
} from 'firebase/firestore'


// Listen for commands from master
const commandsQuery = query(
  collection(db, 'commands'),
  where('status', '==', 'pending')
)

onSnapshot(commandsQuery, (snapshot) => {
  snapshot.docChanges().forEach(async (change) => {
    if (change.type === 'added') {
      const command = change.doc.data()
      console.log('Received command from master:', command)

      // Process command
      const result = await processCommand(command)

      // Send response back to master
      const responsesRef = collection(db, 'responses')
      await addDoc(responsesRef, {
        commandId: change.doc.id,
        result,
        timestamp: new Date(),
        status: 'pending',
        sender: 'slave'
      })

      // Mark command as processed
      await updateDoc(doc(db, 'commands', change.doc.id), {
        status: 'processed'
      })
    }
  })
})

async function processCommand(command: any) {
  // Implement your command processing logic here
  chrome.runtime.sendMessage({ type: 'COMMAND_RECEIVED', payload: command })
  return `Processed command: ${command.command}`

}
export default defineBackground(() => {
  console.log('Hello background!', { id: browser.runtime.id });
});

Reproduction

https://github.com/skwsccss/wxt-issue-with-firebase

you can reproduce the bugs using this repo
They have 2 folder master and slave, the goal is to send message from one extension to others using firebase event triggering.

At first you can use current code and test to send message from master to slave, then it will get the message in firebase but not able to send message to the pop up using chrome.runtime.
Looking forward to hearing from you soon. @aklinker1 or All Devs

Steps to reproduce

No response

System Info

System:
    OS: Windows 11 10.0.26100
    CPU: (12) x64 Intel(R) Core(TM) i7-8700 CPU @ 3.20GHz
    Memory: 23.37 GB / 47.80 GB
  Binaries:
    Node: 22.14.0 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.17 - ~\AppData\Roaming\npm\yarn.CMD
    npm: 10.9.2 - C:\Program Files\nodejs\npm.CMD
    pnpm: 10.4.1 - ~\AppData\Roaming\npm\pnpm.CMD
  Browsers:
    Edge: Chromium (131.0.2903.86)
    Internet Explorer: 11.0.26100.1882
  npmPackages:
    wxt: ^0.19.13 => 0.19.27

Used Package Manager

npm

Validations

• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
• The provided reproduction is a minimal reproducible example of the bug.

[aklinker1]

Did you try browser.runtime?

Also, this should definitely go inside defineBackground, no clue why moving it there would cause it to no work...

[skwsccss]

@aklinker1 Thank you for your response.
Yes, the issue is causing when I move all functions go inside defineBackground function.
The onSnapshot function can't receive inside the defineBackground.
And I tried with browser.runtime, in this case I am getting Failed to send message: Error: No listeners available.
Can you please reproduce the issues pulling my repository? it's simple, no complex logic.
Looking forward to getting help from you soon.
Thank again