[Enhance] Add messaging example

[Jonghakseo]

* Please fill in the required items.

Priority*

• [ ] High: This PR needs to be merged first for other tasks.
• [x] Middle: This PR should be merged quickly to prevent conflicts due to common changes. (default)
• [ ] Low: This PR does not affect other tasks, so it can be merged later.

Purpose of the PR*

Adds a simple implementation for easy use of the Messages API.

Changes*

• Add the messaging package
• Separate ready from prepare, a ready command that runs only once

How to check the feature

Use messaging api :)

Reference

[Jonghakseo]

README.md preview

---

Messaging Package

This package contains code messaging api. To use the code in the package, you need to add the following to the package.json file.

{
  "dependencies": {
    "@extension/messaging": "workspace:*"
  }
}

Messaging API

You can use messaging api to send/receive messages between context.

Usage

import { messaging } from '@extension/messaging';

// Send message
messaging.send('message', { data: 'data' });

// Receive message
messaging.on('message', (payload) => {
  console.log(payload.data); // 'data'
  return 'response';
});

Message Types

You should define message types in the type.ts file.

export interface PayloadAndResponse<P = unknown, D = unknown> {
  payload: P;
  response: D;
}
/**
 * Define the type of messages
 * If you want to add a new message type, you can add it here.
 */
export interface Messages {
  greeting: PayloadAndResponse<string, string>;
  //...
}

Then you can take advantage of the message types in the messaging api.

import { messaging } from '@extension/messaging';

messaging.send('greeting', "Hello").then((response) => {
  console.log(response); // Hi
});

import { messaging } from '@extension/messaging';

messaging.on('greeting', (payload) => {
  console.log(payload); // Hello
  return 'Hi'; // response
});

SendToCurrentTab

You can use sendToCurrentTab to send a message to the current tab.

import { messaging } from '@extension/messaging';

messaging.sendToCurrentTab('message', "this is current tab!");

You can receive the message in the current tabs content script. (e.g. content or content-ui)

import { messaging } from '@extension/messaging';

messaging.on('message', (payload) => {
  // Do something
});

---

[Jonghakseo]

• https://github.com/Jonghakseo/chrome-extension-boilerplate-react-vite/pull/747

This might be a better alternative, I'll look into it.