Skip to content

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:

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

console.log(res); // "pong"
ts
// 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.