Messaging from background to popup stuck

[ChxGuillaume]

Whenever my popup is closed, and I use sendMessage it is stuck and waiting for the popup to open

I can't find any fix on my side to check if the tab is contactable or not, any solution ? Is it a bug ?

[zikaari]

Messages get queued for the destination if it is not immediately available.

What behavior were you expecting?

[ChxGuillaume]

My case is maybe somehow not usual, but it is to send updates to the Popup window.
However, every time I load the Popup, it already refreshes everything from API calls and the queued messages kinda get in the way and mess everything up.

Would have liked to find a way to send messages to my Popup tab only if it is actually ready to received (Active or Able to execute what it receives)

I tried to make a subscribe system for tabs who wanna received those messages, but can't find a solution to unsubscribe from the Popup whenever it unloads.

[zikaari]

I see. Have you tried fixing this by having the senders wait for the "wake" signal from popup before they send any messages?

Also use [email protected], its better in every way (see the CHANGELOG in the next branch of this repo)

[ChxGuillaume]

Using [email protected] it seems like I am losing auto complete (which is fine)

But I am now having three problems (one I had before and now)

• the "sender" object from onMessage doesn't give any tabId (see Pic 1) In my case the message is coming from a popup page, this issue i had with both 5.0.5 and 6.0.0-rc3
• even tho I am using a tabId I sent from my popup page, I get an error (first error in Pic 2)
• whenever the popup page closes now an error pops in console (second error in Pic 2)

Pic 1:

Pic 2:

[zikaari]

popup destination is a tabId agnostic destination, I don't think it is tied to any tab in particular, it just exists, standalone.

Can you please share a minimal repro for the errors you are getting that I can test against?

[ChxGuillaume]

For my background job, I would have:

onMessage('setting-update', async ({ data }) => {
  await database.settings.updateSetting(data)
})

onMessage('settings-fetch', async ({ sender, data }) => {
  console.log('test', sender, data)

  await sendMessage('settings-fetch-response', await database.settings.getSettings(), { ...sender, tabId: data.tabId })
})

and for the popup:

onMessage('settings-fetch-response', ({ data }) => {
  settingsStore.loadSettings(data)
})

browser.tabs.query({ currentWindow: true, active: true })
  .then((data) => {
    tabId.value = data[0]?.id

    if (tabId.value) {
      sendMessage('settings-fetch', { tabId: tabId.value }, 'background')
    }
  })

PS: it works, just sends errors in console

[zikaari]

onMessage('settings-fetch', async ({ sender, data }) => {
  console.log('test', sender, data)

  await sendMessage('settings-fetch-response', await database.settings.getSettings(), { ...sender, tabId: data.tabId })
})

You don't have to use sendMessage inside onMessage if you want to respond with a value. Just return the value from the callback and it'll be available to in the sender by awaiting the sendMessage.

[JTInfinite]

I'm having this same issue. I can get the message to popup from background but I have to use the sendMessage function from background

onMessage('settings-fetch', async ({ sender, data }) => {
  console.log('test', sender, data)

  await sendMessage('settings-fetch-response', await database.settings.getSettings(), { ...sender, tabId: data.tabId })
})

You don't have to use sendMessage inside onMessage if you want to respond with a value. Just return the value from the callback and it'll be available to in the sender by awaiting the sendMessage.

returning the value does not work.

[zikaari]

Can you please install [email protected] and report me any new observations?

[vabatta]

I get the same issue, with both 6.0.1 and 6.0.0-rc4.

Checking the parameter of onMessage when a job is sent from a content script returns sender : {context: 'content-script', tabId: null, frameId: null}.

[zikaari]

I don't have too much experience with popups and the challenges that come with them. I'm also unable to allocate resources to this task, can someone please take on this problem?

[vabatta]

@zikaari Can you point in the code where the wrapping from the underlaying runtime.onMessage to Sender type happens?
It would help for taking a look :)

[scarletczen]

I'm having this same issue. I can get the message to popup from background but I have to use the sendMessage function from background

onMessage('settings-fetch', async ({ sender, data }) => {
  console.log('test', sender, data)

  await sendMessage('settings-fetch-response', await database.settings.getSettings(), { ...sender, tabId: data.tabId })
})

You don't have to use sendMessage inside onMessage if you want to respond with a value. Just return the value from the callback and it'll be available to in the sender by awaiting the sendMessage.

returning the value does not work.

I was having a similar issue where I was having problems with returning the values. On carefully reading the documentation, I figured it out. You have to return the PROMISE in case the callback is async, example

onMessage("settings-fetch", async ({ sender, data }) => {
    return database.settings.getSettings(); // returning the promise, not the awaited value
};