Messaging

Overview

Follow Chrome's message passing guide to understand how message passing works in web extensions. In Google's examples, just replace chrome with browser, and it will work in WXT.

Here's a basic request/response example:

// popup/main.ts
const res = await browser.runtime.sendMessage('ping');

console.log(res); // "pong"

// background.ts
export default defineBackground(() => {
  browser.runtime.onMessage.addListener((message, sender, sendResponse) => {
    console.log(message); // "ping"

    // Wait 1 second and respond with "pong"
    setTimeout(() => sendResponse('pong'), 1000);
    return true;
  });
});

Third Party Libraries

There are a number of message passing libraries you can use to improve the message passing experience.

• @webext-core/messaging - "A light-weight, type-safe wrapper around the browser.runtime messaging APIs"
• @webext-core/proxy-service - "Create RPC-like services that can be called from anywhere but run in the background"
• webext-bridge - "Messaging in Web Extensions made super easy. Out of the box."
• trpc-chrome - "tRPC adapter for Web Extensions 🧩"