Sam Comments - Answer Overflow

Topics

Sam

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

Now if you use something that has to be compiled that can get a little tricky. But if you follow best practices it should be very portable. For example I always pin my dependencies. It might be a little more management but it will provide consistent results.

13 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 use nvm or a similar node management tool you can configure your shell to auto switch.

13 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

Using Docker is quite heavy IMO. You have a lot of ports to forward and you won't get the build output in your console.

13 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

I feel as though the JS ecosystem has achieved a high level of portability. This project uses PNPM by default which I always recommend. I think if you add an .nvmrc and use the packageManager property in the package.json that should make it portable.

13 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

Is there a particular reason you're trying to do the development work within docker?

13 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

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

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

13 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