javascriptgoogle-chrome-extensionchrome-extension-manifest-v3web-extension

Should a MV3 extension use chrome.runtime.sendMessage() or serviceWorker.controller.postMessage() for messaging?


The Chrome docs mention chrome.runtime.sendMessage and chrome.runtime.onMessage:

const response = await chrome.runtime.sendMessage({greeting: "hello"});
chrome.runtime.onMessage(messageHandler)

To communicate between a service worker and a content script.

However I already have messaging working within my Manifest V3 extension, between my service worker and a popup, using a different API.

In my service worker:

self.addEventListener("message", (event) => {
  handleMessage(event.data);
});

and in my popup:

const SERVICE_WORKER = globalThis?.navigator?.serviceWorker || null;
SERVICE_WORKER.controller.postMessage({
  topic: "getSecretKey",
});

Which of chrome.runtime.sendMessage() and serviceWorker.controller.postMessage() is preferable for messaging between extension components (service workers, popups, and content scripts)?

Do they have similar use cases or different limits?

Some investigation seems to be chrome.runtime.sendMessage() is designed for messaging specifically for extensions, whereas serviceWorker.controller.postMessage() is for general purpose webapps with service workers. But I suspect there may be more to it.


Solution

  • Data types

    Targeting

    P.S. No need for ?. because SW is always usable in a context from its own origin, i.e. you can just use navigator.serviceWorker.controller.