Messaging API

Plasmo's Messaging API makes communication between different parts of your extension easy. Add a file to your messages directory, and Plasmo will handle all the rest. Plasmo Messaging is a declarative, type-safe, functional, promise-based API for sending, relaying, and receiving messages between your extension components.

Installation

1. Install dependency

The @plasmohq/messaging library is kept in a separate repository. You will first have to install it with your package manager.

pnpm install @plasmohq/messaging

2. Create background folder & file

The @plasmohq/messaging library requires the background service worker to live inside a background/index.ts folder, and all message handlers to live inside background/* folders.

If you already have a background.ts or background.js file, you will have to create a background folder and move your script to background/index.ts or background/index.js.

If you don't already have a background folder, create a background folder and create a new, empty background/index.ts or background/index.js file.

You will now be able to create new handlers inside the background/ subfolder. For example, to create a messages handler with the name ping, you would create a background/messages/ping.ts. See the rest of the documentation to learn about the different types of handlers available to you, and how to configure them.

At this point, your folder structure might look like this.

.
├── background
│   ├── index.ts
│   └── messages
│       └── ping.ts

3. Generate static types

On compilation, Plasmo will generate static types for all of your message handlers. This will happen automatically if you have the dev server running; it will also happen automatically each time you build. The sendToBackground and relayMessage functions both take a name field as part of their params object; this name field will be statically typed with the names of all of your message handlers.

4. That's all

You have now successfully installed Plasmo's messaging library.

TL;DR

Examples

• with-messaging (opens in a new tab)

Message Flow

Use the Message Flow to initiate one-time messages between extension pages, tab pages or content scripts with the background service worker. This flow is useful to offload heavy computation to the background service worker or to bypass CORS.

The background service worker is a message hub with REST-style API handlers. To create a message handler, create a ts module in the background/messages directory. The file name should be the message name, and the default export should be the handler function:

import type { PlasmoMessaging } from "@plasmohq/messaging"
 
const handler: PlasmoMessaging.MessageHandler = async (req, res) => {
  const message = await querySomeApi(req.body.id)
 
  res.send({
    message
  })
}
 
export default handler

Extension pages, content scripts, or tab pages can send messages to these handlers using the @plasmohq/messaging library. Since Plasmo Framework orchestrates your handlers behind the scenes, the message names are typed and will enable IntelliSense in your editor:

import { sendToBackground } from "@plasmohq/messaging"
 
...
const resp = await sendToBackground({
  name: "ping",
  body: {
    id: 123
  }
})
 
console.log(resp)

To send a message from a content script thats in the main world you'll have to include your extension's id in the request. Your extension's id can be found in chrome's extension manager window once you've built and added it to your browser.

import { sendToBackground } from "@plasmohq/messaging"
import type { PlasmoCSConfig } from "plasmo"
 
export const config: PlasmoCSConfig = {
  matches: ["<all_urls>"],
  world: "MAIN"
}
...
const resp = await sendToBackground({
  name: "ping",
  body: {
    id: 123
  },
  extensionId: 'llljfehhnoeipgngggpomjapaakbkyyy' // find this in chrome's extension manager
})
 
console.log(resp)

Relay Flow

Use the Relay Flow to communicate between a target webpage and the background service worker. A relay is a lightweight message handler registered using a content script. It listens for messages from the target webpage and pipes them down to the Message Flow's handlers.

Create a relay inside a content script. The relayMessage function takes a message name. A content script can have multiple relays. Given the ping message handler from the previous example, and the website www.plasmo.com:

import type { PlasmoCSConfig } from "plasmo"
 
import { relayMessage } from "@plasmohq/messaging"
 
export const config: PlasmoCSConfig = {
  matches: ["http://www.plasmo.com/*"] // Only relay messages from this domain
}
 
relayMessage({
  name: "ping"
})

• On the plasmo.com web page, you can send messages via the relay:

 
import { sendToBackgroundViaRelay } from "@plasmohq/messaging"
...
 
const resp = await sendToBackgroundViaRelay({
  name: "ping"
})
 
console.log(resp)

To relay messages from contexts where chrome.runtime is unavailable, you can use the relay function:

import { relayMessage } from "@plasmohq/messaging/relay"
 
relayMessage(
  {
    name: "ping"
  },
  async (req) => {
    console.log("some message was relayed:", req)
 
    return {
      message: "Hello from sandbox"
    }
  }
)

Ports

The Messaging Ports API is a high-level abstraction over the chrome runtime's port API (opens in a new tab) to establish long-lived connections with the background service worker.

The current implementation focuses on establishing connections to a port listener in the background service worker:

To create a BGSW port handler, create a ts module in the background/ports directory. The file name will be the port name, and the default export will be the handler function:

import type { PlasmoMessaging } from "@plasmohq/messaging"
 
const handler: PlasmoMessaging.PortHandler = async (req, res) => {
  console.log(req)
 
  res.send({
    message: "Hello from port handler"
  })
}
 
export default handler

In your extension page, get the port using the getPort utility under the @plasmohq/messaging/port, OR use the usePort hook, keep in mind that usePort currently relies on React hooks so you will need to use it within a React component. This example shows the usage of getPort within a Svelte component:

<script lang="ts">
  import { getPort } from "@plasmohq/messaging/port"
  import { onMount, onDestroy } from "svelte"
 
  let output = ""
 
  const mailPort = getPort("mail")
 
  onMount(() => {
    mailPort.onMessage.addListener((msg) => {
      output = msg
    })
  })
 
  onDestroy(() => {
    mailPort.onMessage.removeListener((msg) => {
      output = msg
    })
  })
 
  function handleSubmit() {
    mailPort.postMessage({
      body: {
        hello: "world"
      }
    })
  }
</script>
 
<div>{output}</div>

Here's an example of usePort in React, the data will always reflect the latest response from the port handler:

import { usePort } from "@plasmohq/messaging/hook"
 
function DeltaTab() {
  const mailPort = usePort("mail")
 
  return (
    <div>
      {mailPort.data?.message}
      <button
        onClick={async () => {
          mailPort.send({
            hello: "world"
          })
        }}>
        Send Data
      </button>
    </div>
  )
}
 
export default DeltaTab

E2E Type Safety (WIP)

End-to-end request/response body type-safety is in progress at #334 (opens in a new tab). In the meantime, you can use the provided generic types:

import type { PlasmoMessaging } from "@plasmohq/messaging"
 
export type RequestBody = {
  id: number
}
 
export type ResponseBody = {
  message: string
}
 
const handler: PlasmoMessaging.MessageHandler<
  RequestBody,
  ResponseBody
> = async (req, res) => {
  console.log(req.body.id)
 
  res.send({
    message: "Hello from background"
  })
}
 
export default handler

import { sendToBackground } from "@plasmohq/messaging"
 
import type { RequestBody, ResponseBody } from "~background/messages/ping"
 
...
 
const resp = await sendToBackground<RequestBody, ResponseBody>({
  name: "ping",
  body: {
    id: 123
  }
})
 
console.log(resp)