Shubham Kadam Posts - Answer Overflow

Shubham Kadam

•Created by Shubham Kadam on 12/10/2024 in #🔰newbie

Issue: "Extension runtime is not available" with PlasmoCSConfig in Content Script

Hi everyone,
I’m encountering an issue while working with a framework extension. My goal is to inject a content script on a specific website and enable communication between the content script and the background script. Here's the flow I want to achieve:
1. When the user visits https://xyz.com/abc/*, the content script is injected.
2. The script adds a button to the page.
3. On clicking the button:
- A request is sent to the background script.
- The background script processes the request and sends back a response.
- The response is then displayed on the page.
Here’s my current setup:
Content Script (contents/test/testing.tsx):

export const config: PlasmoCSConfig = {
  matches: ["https://xyz.com/abc/*"],
  world: "MAIN"
}
const Button = () => {
  const Run = async () => {
    const resp = await sendToBackground({
      name: "ping",
      body: { id: 123 },
      extensionId: EXTENSION_ID 
    });
    console.log("Response from background:", resp);
    toast.success("Operation completed successfully!");
  };

  return <button onClick={Run}>Click Me</button>;
};
export default Button;

export const config: PlasmoCSConfig = {
  matches: ["https://xyz.com/abc/*"],
  world: "MAIN"
}
const Button = () => {
  const Run = async () => {
    const resp = await sendToBackground({
      name: "ping",
      body: { id: 123 },
      extensionId: EXTENSION_ID 
    });
    console.log("Response from background:", resp);
    toast.success("Operation completed successfully!");
  };

  return <button onClick={Run}>Click Me</button>;
};
export default Button;

Background Script (background/messages/ping.ts):

import type { PlasmoMessaging } from "@plasmohq/messaging";
 
const handler: PlasmoMessaging.MessageHandler = async (req, res) => {
  const message = "Message from background";
  res.send({ message });
};
export default handler;

import type { PlasmoMessaging } from "@plasmohq/messaging";
 
const handler: PlasmoMessaging.MessageHandler = async (req, res) => {
  const message = "Message from background";
  res.send({ message });
};
export default handler;

Issue:
When I click the button, I get the following error:
Error: Extension runtime is not available.
If I remove the config part from the content script, everything works as expected, but the button is then injected on pages it shouldn’t appear on.
Questions:
1. Why does adding the PlasmoCSConfig configuration result in this error?
2. Is there a way to restrict the content script to the specific page (https://xyz.com/abc/*) without encountering this issue?

2 replies

Gaming

Programming