1 reply

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

@plasmohq/messaging

library in both content script UI files:

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

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

2. In the sending content script UI file, use the

sendToContentScript

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
  });
};

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}`);
});

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

content_scripts

section of your

manifest.json

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"]
  }
]

"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

sendMessage

function:

sendMessage();

sendMessage();

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

Received message: Hello from sending content script UI!

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.

�PD

🧩 Plasmo Developers•3y ago•

1 reply

Pallas

To send a message from one content

@plasmohq/messaging

@plasmohq/messaging

library in both content script UI files:

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

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

2. In the sending content script UI file, use the

sendToContentScript

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
  });
};

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}`);
});

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

content_scripts

section of your

manifest.json

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"]
  }
]

"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

sendMessage

function:

sendMessage();

sendMessage();

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

Received message: Hello from sending content script UI!

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.

To send a message from one content

Similar Threads

To send a message from one content

Similar Threads

Similar Threads

Similar Threads