🧩 Plasmo Developers•2y ago

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";

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

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

"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();

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.

2 Replies

Joshua Perk•2y ago

!question onMessage is not a function of @plasmohq/messaging. How do I listen for a message in a content script?

PallasOP•2y ago

To listen for a message in a content script using the @plasmohq/messaging library, you need to use the relayMessage function instead of the onMessage function. Here's how you can do it: 1. Import the relayMessage function from the @plasmohq/messaging library in your content script file:

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

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

2. Use the relayMessage function to listen for messages in your content script. The relayMessage function takes a message name and a callback function as parameters. The callback function will be called whenever a message with the specified name is received:

relayMessage("ping", (message) => {
  console.log("Received message:", message);
  // Handle the received message here
});

relayMessage("ping", (message) => {
  console.log("Received message:", message);
  // Handle the received message here
});

In the above example, the content script is listening for messages with the name "ping". Whenever a message with the name "ping" is received, the callback function will be called, and the received message will be logged to the console. 3. Make sure to include the content script file in your extension's manifest file. For example, if your content script file is named "content.js", you can include it in the manifest file like this:

{
  "manifest_version": 2,
  "name": "Your Extension",
  "version": "1.0",
  "content_scripts": [
    {
      "matches": ["http://www.example.com/*"],
      "js": ["content.js"]
    }
  ],
  "permissions": [
    "tabs"
  ]
}

{
  "manifest_version": 2,
  "name": "Your Extension",
  "version": "1.0",
  "content_scripts": [
    {
      "matches": ["http://www.example.com/*"],
      "js": ["content.js"]
    }
  ],
  "permissions": [
    "tabs"
  ]
}

In the above example, the content script is set to run on web pages that match the URL pattern "http://www.example.com/*". By following these steps, you should be able to listen for messages in your content script using the @plasmohq/messaging library. Remember to adjust the message name and URL pattern according to your specific use case.

Gaming

Programming

To send a message from one content