Alix Posts - Answer Overflow

Alix

•Created by Alix on 2/16/2024 in #👾extension

Messaging best practices

Do you recommend using Plasmo Messaging API instead of Chrome Messaging API ? Is a combination of both possible ? Thank you for your time!

3 replies

PD🧩 Plasmo Developers

•Created by Alix on 2/6/2024 in #🔰newbie

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

Hey guys, I've tried so far to understand how Plasmo Messaging API works (from CSUI to BGSW) and although I read through the whole Doc again and again I still miss some key understanding. Long story short, I try to send to the background a message 'clipboards' via a

useEffect

useEffect

from

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.");
    });
  }, []);

The structure of my background folder is the following:

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

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

index.ts

index.ts

is left empty. The code of

clipboards.ts

clipboards.ts

is the following:

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

` Your help would be highly appreciated!

18 replies

Gaming

Programming