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.
NOTE: Initial Type Error
If you're receiving a type error such as "name" is never
, this is because Plasmo needs to compile your handler types. To resolve:
- Run the dev server
- Restart the TypeScript server in your editor
4. That's all
You have now successfully installed Plasmo's messaging library.
TL;DR
Messaging API | From | To | One-time | Long-lived |
---|---|---|---|---|
Message Flow | Ext-Pages/CS | BGSW | Yes | No |
Relay Flow | Website | CS/BGSW | Yes | No |
Ports | Ext-Pages/CS | BGSW | No | Yes |
Ports | BGSW | Ext-Pages/CS | No | Yes |
Ports + Relay | BGSW | WebPage | Yes | Yes |
Examples
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
NOTE: The Relay messaging API is in public alpha preview: expects bugs, incomplete/leaky abstractions, and future API changes. Please report any issues you encounter to us via this link.
The Relay Flow enables communication between a target webpage and a background service worker using a lightweight message handler called a relay. This relay is registered with the relayMessage
function in a content script.
The relayMessage
function abstracts the window.postMessage
mechanism, registering a listener that checks for messages matching the same origin and forwards them to the background service worker. These messages are then processed by the appropriate message flow handlers registered under background/messages
.
The sendToBackgroundViaRelay
function sends messages through the relay and waits for a response. It generates a unique instance ID for each message to ensure proper handling and response tracking.
You may view the implementation of these functions in the GitHub repository (opens in a new tab).
This method provides an alternative to the "externally_connectable" (opens in a new tab) method described in the Chrome extension documentation.
Setting Up a Relay
To set up a relay, use the relayMessage
function in a content script. 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"
})
In the code of the target webpage (e.g., plasmo.com
), you can send messages using the registered relay using sendToBackgroundViaRelay
as follows:
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"
relayMessage(
{
name: "ping"
},
async (req) => {
console.log("some message was relayed:", req)
return {
message: "Hello from sandbox"
}
}
)
Ports
The Port messaging API is in public alpha preview: expects bugs, incomplete/leaky abstractions, and future API changes. Please report any issues you encounter to us via this link.
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)