1 reply

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/*

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
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
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

Error: Extension runtime is not available

.

If I remove the

config

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

PlasmoCSConfig

configuration result in this error?
2. Is there a way to restrict the content script to the specific page (

https://xyz.com/abc/*

https://xyz.com/abc/*

) without encountering this issue?

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

https://xyz.com/abc/*

https://xyz.com/abc/*

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
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

Error: Extension runtime is not available

.

If I remove the

config

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

PlasmoCSConfig

configuration result in this error?
2. Is there a way to restrict the content script to the specific page (

https://xyz.com/abc/*

https://xyz.com/abc/*

) without encountering this issue?

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

Similar Threads

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

Similar Threads

Similar Threads

Similar Threads