[BUG] Multiple Content Scripts trigger on `sendToContentScript`

What happened?

Multiple Content Scripts are triggering on sendToContentScript. I want just one of them to trigger and I don't understand why multiple are triggering.

When I run the extension, the popup opens successfully. I can see two buttons:

But when I press either button, the console logs from BOTH content scripts are printed. The console logs from only the expected function is printed to the extension log.

Example:

Click "Get Suggestions" button

tab console prints:

HIGHLIGHTED TEXT: ", highlightedText, "BODY: ", req.body
"PASTE CONTENT: ", req, "DATA: ", req.body

Extension console prints:

highlighted text
res is success! // This comes from the second content script

I have 3 files that I'm editing. Everything else is the default from the initial creation of my Plasmo project. Here are the files:

popup.tsx

import { useState } from "react"
import { sendToContentScript } from "@plasmohq/messaging"

function PopupForm(data) {
  // I don't want both buttons to trigger on button press, so I'm trying to keep track of which button is pressed
  const [copyContent, setCopyContent] = useState(false);
  let currentCopyStatus = copyContent;

  function updateCopyBool(bool){
    currentCopyStatus = bool;
    setCopyContent(bool);
  }

  async function getHighlightedText() {
    console.log("highlighted text")
    if (currentCopyStatus){
      const res = await sendToContentScript({ name: "getHighlightedContent"});
      console.log("result is", res);
      // Returns the highlighted text back to the parent component
      data.setUserData(res);
    }
  }

  async function writeHighlightedText() {
    console.log("WRITE")
    if (!currentCopyStatus){
      const res = await sendToContentScript({ name: "pasteContent", body: data });
      console.log("result is", res);
    }
  }

  return (
    <>
    <button onClick={() => {updateCopyBool(true); getHighlightedText();}}>
      Get Suggestions
    </button>
    <button onClick={() => {updateCopyBool(false); writeHighlightedText();}}>
      Paste Suggestions
    </button>
    </>
  );
}

function IndexPopup() {
  const [userData, setUserData] = useState("")

  return (
    <div style={{}}>
      <h2>Extension</h2>

        <PopupForm 
          data = {userData}
          setUserData = {setUserData}
        />
    </div>
  )
}

export default IndexPopup

First content script: contents/getHighlightedContent.tsx

import { useMessage } from "@plasmohq/messaging/hook"

export default function getHighlightedContent() {
    useMessage<string, string>(async (req, res) => {
            const highlightedText = window.getSelection().toString();
            console.log("HIGHLIGHTED TEXT: ", highlightedText, "BODY: ", req.body);
            res.send(highlightedText);
    })
}

Second content script: contents/pasteContent.tsx

import { useMessage } from "@plasmohq/messaging/hook"

export default function pasteContent() {
    useMessage<string, string>(async (req, res) => {
        console.log("PASTE CONTENT: ", req, "DATA: ", req.body)
        res.send("success!");
    })
}

Version

Latest

What OS are you seeing the problem on?

MacOSX

What browsers are you seeing the problem on?

Chrome

Relevant log output

No response

(OPTIONAL) Contribution

[ ] I would like to fix this BUG via a PR

Code of Conduct

[X] I agree to follow this project's Code of Conduct
[X] I checked the current issues for duplicate problems.

PlasmoHQ / plasmo