Struggling with Plasmo Messaging API: Sending Message from CSUI to BGSW Issue

useEffect

useEffect

content.tsx

content.tsx

useEffect(() => {
//extensionId is defined as the CSUI injected in the main world
    sendToBackground({name:"clipboards", extensionId: 'kceanhfnepllnfmbdmdppmefbhmhlpie'}).then((response) => {
      if (response && !response.error) {
        setClipboards(response.clipboards || []);
      } else {
        console.error("Error:", response.error);
        message.error("Error retrieving clipboards data.");
      }
    }).catch((error) => {
      console.error("Error", error);
      message.error("Communication error with background.");
    });
  }, []);

useEffect(() => {
//extensionId is defined as the CSUI injected in the main world
    sendToBackground({name:"clipboards", extensionId: 'kceanhfnepllnfmbdmdppmefbhmhlpie'}).then((response) => {
      if (response && !response.error) {
        setClipboards(response.clipboards || []);
      } else {
        console.error("Error:", response.error);
        message.error("Error retrieving clipboards data.");
      }
    }).catch((error) => {
      console.error("Error", error);
      message.error("Communication error with background.");
    });
  }, []);

/background
L/messages
  L clipboards.ts
L index.ts

/background
L/messages
  L clipboards.ts
L index.ts

index.ts

index.ts

clipboards.ts

clipboards.ts

// Importez axios ou une autre bibliothèque HTTP si vous effectuez des requêtes HTTP dans ce gestionnaire de message
import axios from "axios";
import type { PlasmoMessaging } from "@plasmohq/messaging"


const API_URL = "http://localhost:3000/clipboards";

// La fonction exportée par défaut est le gestionnaire de message
const handler: PlasmoMessaging.MessageHandler = async (req, res) => {
  try {
    console.log("Request received");
    const response = await axios.get(API_URL, { withCredentials: true });
    if (response.status === 200) {
      res.send({
        success: true,
        data: response.data,
      });
    }
    res.send({
        success: false,
        error: "Non-200 response",
      });
  } catch (error) {
    res.send({
        success: false,
        error: error.message,
      });
  }
}

export default handler

// Importez axios ou une autre bibliothèque HTTP si vous effectuez des requêtes HTTP dans ce gestionnaire de message
import axios from "axios";
import type { PlasmoMessaging } from "@plasmohq/messaging"


const API_URL = "http://localhost:3000/clipboards";

// La fonction exportée par défaut est le gestionnaire de message
const handler: PlasmoMessaging.MessageHandler = async (req, res) => {
  try {
    console.log("Request received");
    const response = await axios.get(API_URL, { withCredentials: true });
    if (response.status === 200) {
      res.send({
        success: true,
        data: response.data,
      });
    }
    res.send({
        success: false,
        error: "Non-200 response",
      });
  } catch (error) {
    res.send({
        success: false,
        error: error.message,
      });
  }
}

export default handler