PD
🧩 Plasmo Developers•7d ago
Renasue

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

Hi everyone, I'm working on a Plasmo extension and trying to send a message from the popup to the content script and receive a response back in the popup. I read that one approach is to use storage as an intermediary—where the content script updates the storage and the popup listens for changes. However, since storage has limitations, I'd like to explore other options. Would chrome.runtime.sendMessage or chrome.tabs.sendMessage be a better approach for direct communication? Or is there another recommended method in Plasmo for handling this? Thanks in advance!
2 Replies
gmasid
gmasid•5d ago
i replace messaging + storage with zustand to communicate between content script for example. mostly because is synchronous. maybe you can try it for your problem. it’s working pretty well can you give an example of what you’re trying to achieve to see if we find a good approach?
Renasue
RenasueOP•23h ago
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 })
    )
  })
}

Did you find this page helpful?