Sam Comments - Answer Overflow

Sam

Posts Comments

PD🧩 Plasmo Developers

•Created by sharkeatbear on 11/19/2024 in #🔰newbie

Is there anyway to get the plasmo dev server working in a docker container? pnpm dev works on host

and even then I'm not sure if you'll be able to connect to the Docker container VIA localhost.

4 replies

PD🧩 Plasmo Developers

•Created by sharkeatbear on 11/19/2024 in #🔰newbie

Is there anyway to get the plasmo dev server working in a docker container? pnpm dev works on host

If you're running the extension built in Docker from the host machine you'll need to expose the port from within docker.

4 replies

PD🧩 Plasmo Developers

•Created by tatsumaru on 11/5/2024 in #👾extension

Nested Background Messages?

Unfortunetly I'm not a maintainer and don't really have any free time right now. I'm only a user of the framework that likes to help when I can.

5 replies

PD🧩 Plasmo Developers

•Created by RandomJay on 10/30/2024 in #🔰newbie

sendToBackground in MAIN world doesn't work even with extensionId provided

Yeah @filthytone has a ton of knowledge around core extension development.

73 replies

PD🧩 Plasmo Developers

•Created by RandomJay on 10/30/2024 in #🔰newbie

sendToBackground in MAIN world doesn't work even with extensionId provided

OK so in my example I have a file at src/background/messages/export.ts. To use that message from a MAIN world content script I "register" it in an isolated world script. src/contents/main-world-handlers.ts

import type { PlasmoCSConfig } from 'plasmo';

import { relayMessage } from '@plasmohq/messaging';

export const config: PlasmoCSConfig = {
  all_frames: true,
  run_at: 'document_start',
};

relayMessage({
  name: 'export',
  body: {},
});

import type { PlasmoCSConfig } from 'plasmo';

import { relayMessage } from '@plasmohq/messaging';

export const config: PlasmoCSConfig = {
  all_frames: true,
  run_at: 'document_start',
};

relayMessage({
  name: 'export',
  body: {},
});

Then inside my MAIN work script I can call it with

import { sendToBackgroundViaRelay } from '@plasmohq/messaging';
...
void sendToBackgroundViaRelay<ExportRequest>({
      name: 'export',
      body: {
        action: 'imageData',
        payload: {
          id,
          imageMetadataMap,
        },
      },
    });

import { sendToBackgroundViaRelay } from '@plasmohq/messaging';
...
void sendToBackgroundViaRelay<ExportRequest>({
      name: 'export',
      body: {
        action: 'imageData',
        payload: {
          id,
          imageMetadataMap,
        },
      },
    });

73 replies

PD🧩 Plasmo Developers

•Created by RandomJay on 10/30/2024 in #🔰newbie

sendToBackground in MAIN world doesn't work even with extensionId provided

To get the relay working though I had to register it... 1 sec I'm getting the code.

73 replies

PD🧩 Plasmo Developers

•Created by RandomJay on 10/30/2024 in #🔰newbie

sendToBackground in MAIN world doesn't work even with extensionId provided

I don't believe so. I do have my extension configured with host_permissions. Not sure if that is even needed though.

73 replies

PD🧩 Plasmo Developers

•Created by RandomJay on 10/30/2024 in #🔰newbie

sendToBackground in MAIN world doesn't work even with extensionId provided

I didn't want to discount any of the work and discussion you've done so far.

73 replies

PD🧩 Plasmo Developers

•Created by RandomJay on 10/30/2024 in #🔰newbie

sendToBackground in MAIN world doesn't work even with extensionId provided

That is how I do it, sorry for jumping in so late.

73 replies

PD🧩 Plasmo Developers

•Created by RandomJay on 10/30/2024 in #🔰newbie

sendToBackground in MAIN world doesn't work even with extensionId provided

Have you tried sendToBackgroundViaRelay?

73 replies

PD🧩 Plasmo Developers

•Created by ortutay on 10/30/2024 in #👟framework

Is there a way to watch storage changes for all keys, or keys matching a prefix?

The 2nd method won't work for your wild card scenario unfortunetly.

9 replies

PD🧩 Plasmo Developers

•Created by ortutay on 10/30/2024 in #👟framework

Is there a way to watch storage changes for all keys, or keys matching a prefix?

Not sure if there is a generic watch all that you can use there. Might have access to the chrome.storage API there too.

9 replies

PD🧩 Plasmo Developers

•Created by ortutay on 10/30/2024 in #👟framework

Is there a way to watch storage changes for all keys, or keys matching a prefix?

In my CSUI component I have a singleton setup like this.

import { Storage } from '@plasmohq/storage';

const chromeLocalStorage = new Storage({
  area: 'local',
});

export { chromeLocalStorage };

import { Storage } from '@plasmohq/storage';

const chromeLocalStorage = new Storage({
  area: 'local',
});

export { chromeLocalStorage };

which I then import across different components. Honestly not sure if its needed, it's just kind of part of the code now. Either way in my CSUI component I then create a useEffect hook like this

useEffect(() => {
    const storageWatchCallbacks: StorageCallbackMap = {
      ['storageKeyYouWantToObserver']: (storageChange) => {
        console.log(storageChange.newValue);
      },
    };
    chromeLocalStorage.watch(storageWatchCallbacks);
    return () => {
      chromeLocalStorage.unwatch(storageWatchCallbacks);
    };
  }, []);

useEffect(() => {
    const storageWatchCallbacks: StorageCallbackMap = {
      ['storageKeyYouWantToObserver']: (storageChange) => {
        console.log(storageChange.newValue);
      },
    };
    chromeLocalStorage.watch(storageWatchCallbacks);
    return () => {
      chromeLocalStorage.unwatch(storageWatchCallbacks);
    };
  }, []);

9 replies

PD🧩 Plasmo Developers

•Created by ortutay on 10/30/2024 in #👟framework

Is there a way to watch storage changes for all keys, or keys matching a prefix?

If you want to get access to that in a CSUI component I believe it would be a similar callback.

9 replies

PD🧩 Plasmo Developers

•Created by ortutay on 10/30/2024 in #👟framework

Is there a way to watch storage changes for all keys, or keys matching a prefix?

I put that in a message handler or port then look at the dev tools for the service worker.

9 replies

PD🧩 Plasmo Developers

•Created by ortutay on 10/30/2024 in #👟framework

Is there a way to watch storage changes for all keys, or keys matching a prefix?

Yep. This is a snippet I use to observe and log all changes to local storage. You can just update the areaName filter to your needs.

chrome.storage.onChanged.addListener((changes, areaName) => {
  if (areaName === 'local') {
    for (const [key, { oldValue, newValue }] of Object.entries(changes)) {
      console.log(
        `Storage key "${key}" in namespace "${areaName}" changed.`,
        `Old value was "${oldValue}", new value is "${newValue}".`,
      );
    }
  }
});

chrome.storage.onChanged.addListener((changes, areaName) => {
  if (areaName === 'local') {
    for (const [key, { oldValue, newValue }] of Object.entries(changes)) {
      console.log(
        `Storage key "${key}" in namespace "${areaName}" changed.`,
        `Old value was "${oldValue}", new value is "${newValue}".`,
      );
    }
  }
});

9 replies

PD🧩 Plasmo Developers

•Created by Tikaï on 10/23/2024 in #🔰newbie

Custom MutationObserver

I would assume the promise needs to return either undefined or an array of elements.

10 replies

PD🧩 Plasmo Developers

•Created by Tikaï on 10/23/2024 in #🔰newbie

Custom MutationObserver

That will return a promise which causes Plasmo to wait. In this case it'll wait 1 second then look for that selector. If it returns a valid element then Plasmo mounts the component. If I want to just stop the built in obserer you can just not resolve the promise.

10 replies

PD🧩 Plasmo Developers

•Created by Tikaï on 10/23/2024 in #🔰newbie

Custom MutationObserver

If you're talking about a CSUI component I created my own observer by returning a promise from getInlineAnchor. I haven't tested this code but it should work and at least get you going.

const getInlineAnchor:
  | PlasmoGetInlineAnchor
  | (() => Promise<Element | undefined>) = async () => {
  await new Promise((resolve) => {
    setTimeout(() => {
      resolve(document.getElementById('exampleId'));
    }, 1000);
  });
};

const getInlineAnchor:
  | PlasmoGetInlineAnchor
  | (() => Promise<Element | undefined>) = async () => {
  await new Promise((resolve) => {
    setTimeout(() => {
      resolve(document.getElementById('exampleId'));
    }, 1000);
  });
};

10 replies

PD🧩 Plasmo Developers

•Created by Vishal on 10/19/2024 in #👾extension

AI stream to content script

Awesome! Yeah I saw the message in the main chat and someone provided with a code snippet.

7 replies

Gaming

Programming