Closed Jonghakseo closed 1 month ago
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:*"
}
}
You can use messaging api to send/receive messages between context.
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';
});
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
});
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
});
This might be a better alternative, I'll look into it.
Priority*
Purpose of the PR*
Adds a simple implementation for easy use of the Messages API.
Changes*
How to check the feature
Use messaging api :)
Reference