Renasue Comments - Answer Overflow

Renasue

•Created by Renasue on 3/28/2025 in #🔰newbie

Best way to send a message from popup to content and get a response in Plasmo?

I decided to define chrome.runtime.onMessage.addListener in the content script and use chrome.tabs.sendMessage to send messages. It always responds with the result from the content script to the popup. Previously, I created the extension using pure JavaScript without any framework. Now, I’m trying to use Plasmo, but I’ve encountered this issue. I resolved the issue, and it now works as expected. However, I have a question: why doesn’t Plasmo support this by default? My Solution content/plasmo.ts

const actions = {
  'action-name': ({ callback }) => callback(getImages())
} as Record<TMessageName, TActionFunc<unknown, unknown>>

chrome.runtime.onMessage.addListener((message: TMessage, _, sendResponse) => {
  const callback = actions[message.name]
  if (!callback) return
  callback({ body: message.body, callback: sendResponse })
})

const actions = {
  'action-name': ({ callback }) => callback(getImages())
} as Record<TMessageName, TActionFunc<unknown, unknown>>

chrome.runtime.onMessage.addListener((message: TMessage, _, sendResponse) => {
  const callback = actions[message.name]
  if (!callback) return
  callback({ body: message.body, callback: sendResponse })
})

popup.tsx

...
useEffect(() => {
  sendMessage({
    name: "action-name",
    callback: ({ tabs, response }) => {
      console.log(":rocket: ~ useEffect ~ tabs, response:", tabs, response)
    }
  })
}, [])
...

...
useEffect(() => {
  sendMessage({
    name: "action-name",
    callback: ({ tabs, response }) => {
      console.log(":rocket: ~ useEffect ~ tabs, response:", tabs, response)
    }
  })
}, [])
...

Custom send message function:

export const sendMessage = <D, R>({
  name,
  body,
  callback
}: {
  name: TMessageName
  body?: D
  callback?: (props: { tabs: chrome.tabs.Tab[]; response: R }) => void
}) => {
  if (!chrome.tabs) return
  chrome.tabs.query({ active: true, currentWindow: true }, (tabs) => {
    chrome.tabs.sendMessage(tabs[0].id ?? 0, { name, body }, (response) =>
      callback?.({ tabs, response })
    )
  })
}

export const sendMessage = <D, R>({
  name,
  body,
  callback
}: {
  name: TMessageName
  body?: D
  callback?: (props: { tabs: chrome.tabs.Tab[]; response: R }) => void
}) => {
  if (!chrome.tabs) return
  chrome.tabs.query({ active: true, currentWindow: true }, (tabs) => {
    chrome.tabs.sendMessage(tabs[0].id ?? 0, { name, body }, (response) =>
      callback?.({ tabs, response })
    )
  })
}

5 replies

Gaming

Programming