Messaging API compatibility

Hi is @plasmohq/messaging works on every web browser or only in chrome? I need to work in safari and firefox.

25 Replies

lab•2y ago

Should work on Safari (tested it before). For Firefox, PR to make it compat is welcome :)

wybranOP•2y ago

On firefox sendToBackground works well in content script but in popup I dont getting return value from backgruond function messages/login.ts

import type { PlasmoMessaging } from "@plasmohq/messaging"
import { fetchAPI } from "~utils/fetchAPI"

const handler: PlasmoMessaging.MessageHandler = async (req, res) => {
  const { email, password } = req.body

  const response = await fetchAPI('https://MY_API/api/login', {
    method: 'POST', body: JSON.stringify({ email, password }) 
  })
  console.log(response)
  res.send(response)

}

export default handler

import type { PlasmoMessaging } from "@plasmohq/messaging"
import { fetchAPI } from "~utils/fetchAPI"

const handler: PlasmoMessaging.MessageHandler = async (req, res) => {
  const { email, password } = req.body

  const response = await fetchAPI('https://MY_API/api/login', {
    method: 'POST', body: JSON.stringify({ email, password }) 
  })
  console.log(response)
  res.send(response)

}

export default handler

Popup/index.tsx:

import { sendToBackground } from "@plasmohq/messaging"

function IndexPopup() {

const login = async () => {
  const resp = await sendToBackground({
    name: "login",
    body: { email: "email", password: "pass" }
  })
 console.log(resp)
  return resp
}
  return (
    <div>
      XDD
      <button
        onClick={login}>
        Login
      </button>
)}

import { sendToBackground } from "@plasmohq/messaging"

function IndexPopup() {

const login = async () => {
  const resp = await sendToBackground({
    name: "login",
    body: { email: "email", password: "pass" }
  })
 console.log(resp)
  return resp
}
  return (
    <div>
      XDD
      <button
        onClick={login}>
        Login
      </button>
)}

When I click login in popup the request is send but console.log(resp) is undefind

Arcane•2y ago

@wybran has reached level 1. GG!

lab•2y ago

is there any bgsw error logging? tho iirc, bgsw is not yet a thing in ff?...

wybranOP•2y ago

there are no errors so why is working in content script but not in popup 🙃

lab•2y ago

oh it works with CS but not with popup?

wybranOP•2y ago

yes

lab•2y ago

the one thing I know about firefox popup is that you can't open its inspect lol...

wybranOP•2y ago

in popup only send message but not getting return data

lab•2y ago

try doing it manually and see what's the diff :d.... it could be that ff's popup runtime is behind cs runtime xd so popup might be using the callback api meanwhile cs is using the promise api lol that'd be messed up

wybranOP•2y ago

console.log in popup useEffect triggers faster than console.log in background script

lab•2y ago

hmm, that indicates the API on ff is using callback I suspect that's the case :d.....

wybranOP•2y ago

on chrome and safari it is working

lab•2y ago

yeah since chrome and safari aligns well on that API but firefox... kinda do their own thing nowaday

wybranOP•2y ago

do you have any ideas how can I fix it?

Arcane•2y ago

@wybran has reached level 2. GG!

lab•2y ago

try manually call the message handler with a browser.runtime.sendMessage and see if that API works (you will need to dig a bit into ff's message API)

wybranOP•2y ago

how can i access browser in react?

lab•2y ago

oh you can just do globalThis.browser see the source code for messaging API for the detail of how it works internally but basically we wrap the sendMessage calls

wybranOP•2y ago

this code works in firefox but not in chrome:

  const getData = async () => {
    const data = await globalThis.browser.runtime.sendMessage({ name: "user" })
    return data
  }

  const getData = async () => {
    const data = await globalThis.browser.runtime.sendMessage({ name: "user" })
    return data
  }

oh i found couse: For Firefox:

  const getData = async () => {
    const data = await globalThis.browser.runtime.sendMessage({ name: "user" })
    return data
  }

  const getData = async () => {
    const data = await globalThis.browser.runtime.sendMessage({ name: "user" })
    return data
  }

For chrome and safari:

  const getData = async () => {
    const data = await globalThis.chrome.runtime.sendMessage({ name: "user" })
    return data
  }

  const getData = async () => {
    const data = await globalThis.chrome.runtime.sendMessage({ name: "user" })
    return data
  }

how can i detect in the code that it should use browser, not chrome in firefox

lab•2y ago

does browser.runtime.sendMessage works in FF?

wybranOP•2y ago

yes

lab•2y ago

cool beans, let me make a hotfix Just released 0.3.2 @wybran can you try it out and see if it fix the issue (the version is for messaging API)

wybranOP•2y ago

omg thanks a lot working on chrome and firefox now safari also work

lab•2y ago

cool beans

Gaming

Programming

Messaging API compatibility