Messaging Between Contexts Easily (background, content, popup, sidepanel)

[hareltus]

Idea: Messaging Between Contexts Easily (background, content, popup, sidepanel)

I’m considering creating a utility to facilitate messaging between different contexts such as background, content, popup, and sidepanel, similar to what TanStack's createServerFn does.

The core idea is to create a pattern for handling messages in a structured way. For example:

export const greet = createMessage({
  key: 'GREET',
})
  .validator((data: string) => data)
  .handler(async (ctx) => {
    return `Hello, ${ctx.data}!`
  })

The greet message would provide two functions:

• listen – listens for the message (this would be transformed by Vite into browser.runtime.onMessage.addListener).
• call – sends the message (this would be transformed by Vite into browser.runtime.sendMessage).

Additionally, all types would be automatically generated to ensure type safety and prevent errors.

I’m still refining the concept, but it seems like a great fit for WXT. Would love to hear thoughts on this idea!

---

Link to tanstack start server function https://tanstack.com/start/latest/docs/framework/react/server-functions

[aklinker1]

Check out https://github.com/jlalmes/trpc-chrome

[hareltus]

I don't want to use the extra overhead of trpc-chrome. I only need to use onMessage and sendMessage.