`browser.runtime.onMessage.addListener` callback's 3rd argument `sendResponse` has incorrect type

[bnn1]

trafficstars

Describe the bug

The third callback argument sendResponse of browser.runtime.onMessage.addListener has incorrect signature:

sendResponse: () => void

To Reproduce

Reproduction

Steps to reproduce the behavior:

1. Open entrypoints>background.ts
2. See TS error "Expected 0 arguments, but got 1.ts(2554)"

OR

1. add onMessage listener:

browser.runtime.onMessage.addListener((message, sender, sendResponse) => {
  console.log("Message!:", message)
  sendResponse("Sup brother?")
})

2. See TS error "Expected 0 arguments, but got 1.ts(2554)"
3. But response is actually send back

Expected behavior

sendMessage should accept any, unknown or generic data type

sendResponse: <T>(data?: T) => void

Screenshots

Environment

  System:
    OS: Linux 6.6 EndeavourOS
    CPU: (12) x64 AMD Ryzen 5 4600H with Radeon Graphics
    Memory: 17.76 GB / 30.73 GB
    Container: Yes
    Shell: 5.9 - /usr/bin/zsh
  Binaries:
    Node: 18.14.2 - ~/.nvm/versions/node/v18.14.2/bin/node
    Yarn: 1.22.21 - ~/.nvm/versions/node/v18.14.2/bin/yarn
    npm: 9.6.0 - ~/.nvm/versions/node/v18.14.2/bin/npm
    pnpm: 8.12.1 - ~/.nvm/versions/node/v18.14.2/bin/pnpm
    bun: 1.0.0 - ~/.bun/bin/bun
  npmPackages:
    wxt: ^0.12.0 => 0.12.5 

Contribution

• [x] I would like to fix this BUG via a PR

[aklinker1]

Thanks for the report @bnn1! This is likely an upstream issue with @types/webextension-polyfill.

In the meantime, you could use the promise API without sendResponse.

https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/API/runtime/sendMessage#examples

browser.runtime.onMessage.addListener(() => {
  return Promise.resolve("greetings");
});

// or use an async callback

browser.runtime.onMessage.addListener(async () => {
  return "greetings";
});

[nonwip]

Can someone explain to me why message listener can return something? On Chrome API I clearly see that it can return only boolean or undefined but on FF it says return Promise...

What is the return for?

[aklinker1]

@dvlden maybe you want to make a fetch request from a content script, but it's blocked by CORS. To get around this, you can send a message to the background and perform the fetch request there instead, where CORS is disabled. So the background, the message receiver, needs to be able to send the response back to the content script.

If you need to do async work, like a fetch request, then:

• On Chrome, you return true from the message listener, informing the browser a response will be sent. Then you use callbacks to call sendResponse once the async work has finished
• On Firefox, you just return a promise of the response

The polyfill supports both ways of sending a response on both browsers. I think promises are simpler, so I use the Firefox approach in my code.

That said, if you're doing anything complex, I would recommend using a library over doing it yourself. WXT will include a messaging library in the future, simplifying all this.

[aklinker1]

Was gonna open a PR to webextension-polyfill-ts, but this was already taken care of, see https://github.com/Lusito/webextension-polyfill-ts/pull/96. Just hasn't been released to @types/webextension-polyfill yet.

Pinged the maintainer and offered to help

[aklinker1]

Just released an experiment feature in [email protected] to switch to @types/chrome, which has this type fixed. Try it out and let me know how it goes: https://github.com/wxt-dev/wxt/issues/868

[0x7a7a]

No more errors in my project, finally! Good job