PD
🧩 Plasmo DevelopersPallas

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.
Joshua Perk
Joshua Perk•317d ago
!question onMessage is not a function of @plasmohq/messaging. How do I listen for a message in a content script?
Pallas
Pallas•317d 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.
Want results from more Discord servers?
Add your server
More Posts
Yes you can pass a variable from theYes, you can pass a variable from the `getInlineAnchorList` function to the CSUI component itself. Iyoutube videos need to refresh when clicked from youtubethis is my content.tsx file: ` import type { PlasmoCSConfig, PlasmoCSUIJSXContainer, PlasmoCSUAs a browser extension developer usingAs a browser extension developer using Plasmo, you can change the display page in `popup.tsx` on cliWhy isn't React router dom working in my popup.tsx?``` return ( <> <BrowserRouter> <Routes> <Route path="/" element={<TableIs plasmo forcing my vs code to use double quotes?I wonder if my prettier plugin is managed automatically by plasmo.Yes you can use the normal ` style ` tagYes, you can use the normal `<style>` tag in Vue with Plasmo. Plasmo offers first-class support for