How to use Ports + Relay to send messages from BGSW to Webpage (CS that world:main)

[sainthardrock]

I read in docs Ports + Relay can use for this purpose but i didn't see anything about how you can achieve this ? Is there anyone tried it ?

[flexchar]

I'm also wondering if relay is bidirectional. I got it working from MAIN to BGJS (with relay) but not the other way around.

[robertsamarji]

Has anyone figured this out?

I can send a message from the background.ts to a CSUI using ports but I cannot seem to send a message from a background/messages/message-handler.ts to a CS using ports. I get a port connection error.

[OahMada]

It seems there isn't an implementation for this yet.

The following method worked for me, but for send messages from webpage to BGSW.

Webpage:

window.postMessage(
	{
		type: 'sync',
		payload: data,
	},
	window.origin
);

Content:

import { getPort } from '@plasmohq/messaging/port';

interface PageMessage {
  type: 'sync';
  payload: AppData[];
}

window.addEventListener('message', (event: MessageEvent<PageMessage>) => {
  if (event.source !== window) return; // only accept messages from the same page
  if (event.data.type === 'sync') {
    let syncPort = getPort('sync');
    syncPort.postMessage({
      body: event.data.payload,
    });
  }
});

BackgroundSW sync.ts:

import type { PlasmoMessaging } from '@plasmohq/messaging';

var handler: PlasmoMessaging.PortHandler = async (req, res) => {
  let data = JSON.parse(req.body);
 // do something with the data
  res.send('');
};

export default handler;