🧩 Plasmo Developers•9mo ago

Receiving end does not exist.

Hey there, new Plasmo user here. I'm trying to pull some information from the DOM (of the currently active tab) and display it in my extension. Should be simple... I'm getting Error: Could not establish connection. Receiving end does not exist. when calling sendToContentScript. I couldn't find any documentation for this function, so hoping you can point me to the right direction. I refreshed all tabs/ reloaded the extension, so I think the error is due to me not understanding how messaging in Plasmo works.. popup.tsx

  const handleClick = async () => {
     //call function inside content script
    const res = await sendToContentScript({ name: "getFields" })
    console.log("result is", res)
  }

  const handleClick = async () => {
     //call function inside content script
    const res = await sendToContentScript({ name: "getFields" })
    console.log("result is", res)
  }

contents/getFields.ts

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

export default function getFields() {
  useMessage<string, string[]>(async (req, res) => {
    const { name } = req
    if (name === "getFields") {
      const fields = Array.from(document.body.querySelectorAll("input")).map(
        (input) => {
          return input.name
        }
      )
      res.send({ ...fields })
    }
  })
}

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

export default function getFields() {
  useMessage<string, string[]>(async (req, res) => {
    const { name } = req
    if (name === "getFields") {
      const fields = Array.from(document.body.querySelectorAll("input")).map(
        (input) => {
          return input.name
        }
      )
      res.send({ ...fields })
    }
  })
}

10 Replies

samson•9mo ago

Turns out it had to be getFields.tsx not .ts

Brandon•9mo ago

I'm getting this same error right now as well. I tried copying what you posted, I also tried changing my content/getContent.ts to .tsx like you suggested. Any other suggestions for getting this to work? contents/getContent.tsx

import { useMessage } from "@plasmohq/messaging/hook"
export default function getContent() {
    useMessage<string, string>(async (req, res) => {
        const { name } = req;
        console.log("TEST");
        res.send("content");
    })
}

import { useMessage } from "@plasmohq/messaging/hook"
export default function getContent() {
    useMessage<string, string>(async (req, res) => {
        const { name } = req;
        console.log("TEST");
        res.send("content");
    })
}

popup.tsx

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

function IndexPopup() {
  const [data, setData] = useState("")

  const handleClick = async () => {
    //call function inside content script
    const res = await sendToContentScript({ name: "getContent" })
    console.log("result is", res)
  }

  return (
    <div>
      <button onClick={handleClick}>Click again</button>
    </div>
  )
}

export default IndexPopup

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

function IndexPopup() {
  const [data, setData] = useState("")

  const handleClick = async () => {
    //call function inside content script
    const res = await sendToContentScript({ name: "getContent" })
    console.log("result is", res)
  }

  return (
    <div>
      <button onClick={handleClick}>Click again</button>
    </div>
  )
}

export default IndexPopup

I figured it out... Apparently you need new tabs, not just a refresh of old tabs.. OOF. Thanks for the code and suggestion of using .tsx @samson

YAGPDB.xyz•9mo ago

Gave +1 Rep to @samson

Arcane•9mo ago

@Brandon has reached level 1. GG!

nayrbhpdf5D•9mo ago

Hey there, I was wondering if you encountered the error where the console.log("result is", res) returns a "result is" undefined?

Arcane•9mo ago

@nayrbhpdf5D has reached level 3. GG!

Jude Lee•7mo ago

This post deserves gold medal. We need more info on the doc for future users 🙂

Omen•7mo ago

Couldn't agree more

Arcane•7mo ago

@Omen has reached level 1. GG!

SeanMI•7d ago

Anyone have the latest 2024 solution to this? Error during analysis: Error: Could not establish connection. Receiving end does not exist. src/components/pageSelector.tsx This is a similar function to the ones above, where a button is clicked to trigger the contentScript. The only difference is I'm doing this from a different component and not the popup.tsx:

   try {
      const response = await sendToContentScript({
        name: "analyzePage"
      })

src/contents/analyzePage.tsx

const handler: PlasmoMessaging.MessageHandler = async (req, res) => {
  const {name} = req
  if (name === "analyzePage") {
    console.log("AnalyzePage message received, starting analysis.")
    const patientLabel = await analyzePage()
    console.log("patient label:", patientLabel)
    res.send({ patientLabel })
  }
}

I just get the error 'receiving end does not exist', can anyone shed some light.

Gaming

Programming

Receiving end does not exist.