Charles de Dreuille Posts - Answer Overflow

Charles de Dreuille

Explore posts from servers

•Created by Charles de Dreuille on 8/17/2023 in #🔰newbie

Create confirmation as CS after clicking on context menu

I created a context menu that save an image after clicking on the menu item. I would like to create a nice confirmation as CS. What would be the best way to send a message from the BGSW to CS? Here the code I have in BGSW in background/index.ts:

chrome.contextMenus.create({
  id: "kapture",
  title: "Kapture",
  contexts: ["image"]
});

chrome.contextMenus.onClicked.addListener(async function (info) {
  const { pageUrl, srcUrl } = info;

  if (!srcUrl || !pageUrl) return;

  const response = await fetch("https://kapture.so/api/save-image", {
    method: "POST",
    headers: {
      "Content-Type": "application/json"
    },
    body: JSON.stringify({
      srcUrl,
      pageUrl
    })
  });

  const result = await response.json();
  console.log(result);
});

chrome.contextMenus.create({
  id: "kapture",
  title: "Kapture",
  contexts: ["image"]
});

chrome.contextMenus.onClicked.addListener(async function (info) {
  const { pageUrl, srcUrl } = info;

  if (!srcUrl || !pageUrl) return;

  const response = await fetch("https://kapture.so/api/save-image", {
    method: "POST",
    headers: {
      "Content-Type": "application/json"
    },
    body: JSON.stringify({
      srcUrl,
      pageUrl
    })
  });

  const result = await response.json();
  console.log(result);
});

And just to confirm, I would like a message to send some data from the context menu listener to CS as well as a message so I can open the confirmation modal. Should I use Porta for that? And how to send data from my contextMenu listener to CS?

2 replies

PD🧩 Plasmo Developers

•Created by Charles de Dreuille on 2/3/2023 in #👾extension

🔴 ERROR | import() is not allowed in service workers.

I'm trying to import Supabase in a service worker to push save some images but I got this error in the console and I have no idea what I'm doing wrong. Any idea? Here is my background.tsx code:

import { supabase } from "~store";

chrome.action.onClicked.addListener(async tab => {
  chrome.tabs.query({ active: true, currentWindow: true }, tabs => {
    chrome.tabs.sendMessage(tabs[0].id, { type: "openKapture" });
  });
});

async function getBase64(blob: Blob): Promise<string> {
  return new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.readAsDataURL(blob);
    reader.onload = () => resolve(reader.result as string);
    reader.onerror = error => reject(error);
  });
}

chrome.runtime.onMessage.addListener(async request => {
  switch (request.action) {
    case "save-image":
      {
        const res = await fetch(request.url);
        const blob = await res.blob();
        const base64 = await getBase64(blob);
        await supabase.storage.from("images").upload("test.png", base64);
      }
      break;
  }
});

export {};

import { supabase } from "~store";

chrome.action.onClicked.addListener(async tab => {
  chrome.tabs.query({ active: true, currentWindow: true }, tabs => {
    chrome.tabs.sendMessage(tabs[0].id, { type: "openKapture" });
  });
});

async function getBase64(blob: Blob): Promise<string> {
  return new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.readAsDataURL(blob);
    reader.onload = () => resolve(reader.result as string);
    reader.onerror = error => reject(error);
  });
}

chrome.runtime.onMessage.addListener(async request => {
  switch (request.action) {
    case "save-image":
      {
        const res = await fetch(request.url);
        const blob = await res.blob();
        const base64 = await getBase64(blob);
        await supabase.storage.from("images").upload("test.png", base64);
      }
      break;
  }
});

export {};

13 replies

Gaming

Programming