🧩 Plasmo Developers�PD
🧩 Plasmo Developers•3y ago•
1 reply
Pallas

To send a message from one content

To send a message from one content script UI to another in a browser extension using Plasmo, you can utilize the Plasmo Messaging API. Here's a step-by-step guide on how to achieve this:

1. Import the necessary functions from the @plasmohq/messaging library in both content script UI files:

import { sendToContentScript } from "@plasmohq/messaging";


2. In the sending content script UI file, use the sendToContentScript function to send a message to the receiving content script UI:

const sendMessage = async () => {
  const message = {
    text: "Hello from sending content script UI!"
  };

  await sendToContentScript({
    name: "messageFromSendingContentScriptUI",
    body: message
  });
};


3. In the receiving content script UI file, create a message handler to listen for the incoming message:

import { onMessage } from "@plasmohq/messaging";

onMessage("messageFromSendingContentScriptUI", (message) => {
  console.log(`Received message: ${message.text}`);
});


4. Make sure both content script UI files are injected into the desired web pages by specifying them in the content_scripts section of your manifest.json file:

"content_scripts": [
  {
    "matches": ["https://example.com/*"],
    "js": ["sending-content-script-ui.js"]
  },
  {
    "matches": ["https://example.com/*"],
    "js": ["receiving-content-script-ui.js"]
  }
]


5. When the sending content script UI wants to send a message, call the sendMessage function:

sendMessage();


6. The receiving content script UI will then log the received message in the console:

Received message: Hello from sending content script UI!


By following these steps, you can successfully send a message from one content script UI to another in your browser extension using Plasmo's Messaging API.
Was this page helpful?