🧩 Plasmo Developers•12mo 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 })
    }
  })
}

11 Replies

samsonOP•12mo ago

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

Brandon•12mo 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•12mo ago

Gave +1 Rep to @samson

Arcane•12mo ago

@Brandon has reached level 1. GG!

nayrbhpdf5D•12mo ago

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

Arcane•12mo ago

@nayrbhpdf5D has reached level 3. GG!

Jude Lee•10mo ago

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

Omen•10mo ago

Couldn't agree more

Arcane•10mo ago

@Omen has reached level 1. GG!

SeanMI•4mo 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.

siegerts•3mo ago

Return true from the handler That way the background script gets an ack and the content script can continue async

Gaming

Programming

Receiving end does not exist.