tetec1 Posts - Answer Overflow

tetec1

Posts Comments

PD🧩 Plasmo Developers

•Created by tetec1 on 6/25/2023 in #🔰newbie

Where can I see the key/value pairs saved by Plasmo's storage API in the dev tools?

I checked in the the "Application" tab, but there is nothing in storage there. Thank you!

18 replies

PD🧩 Plasmo Developers

•Created by tetec1 on 6/4/2023 in #🔰newbie

useStorage between two content script components in React

Hi! I’m trying to figure out how to use the useStorage hook. In one component, I do:

const SubtitlesContainer = () => {

  const [storedLanguage, setStoredLanguage] = useStorage<string>("language", "No language selected.")

  const { isSubtitlesActive, selectedSubtitlesLanguage } = useSelectedSubtitlesLanguage();
  useEffect(() => {
    console.log("selectedSubtitleLanguage changed.")
    setStoredLanguage(selectedSubtitlesLanguage);
  }, [selectedSubtitlesLanguage]);  
// rest of the component  
}

const SubtitlesContainer = () => {

  const [storedLanguage, setStoredLanguage] = useStorage<string>("language", "No language selected.")

  const { isSubtitlesActive, selectedSubtitlesLanguage } = useSelectedSubtitlesLanguage();
  useEffect(() => {
    console.log("selectedSubtitleLanguage changed.")
    setStoredLanguage(selectedSubtitlesLanguage);
  }, [selectedSubtitlesLanguage]);  
// rest of the component  
}

And in a different component, I tried doing this to log the updated value:  

function Settings() {

  const [storedLanguage] = useStorage<string>("language");
  useEffect(() => {
    if (storedLanguage !== null && typeof storedLanguage !== "undefined") {
      console.log(storedLanguage);
    }
  }, [storedLanguage]);  
// rest of the component
}

function Settings() {

  const [storedLanguage] = useStorage<string>("language");
  useEffect(() => {
    if (storedLanguage !== null && typeof storedLanguage !== "undefined") {
      console.log(storedLanguage);
    }
  }, [storedLanguage]);  
// rest of the component
}

I do get the console.log updates in the first component when my custom hook “useSelectedSubtitlesLanguage” is triggered, but in the second component the state “storedLanguage” is initially undefined, and then null.   The two components are in separate content scripts that are injected inline.   What I am doing wrong?   I also cloned the -with-storage example, which does work, but I can’t figure out what I’m doing differently.   Thank you!

8 replies

PD🧩 Plasmo Developers

•Created by tetec1 on 6/4/2023 in #🔰newbie

How do I share state variables between two anchored React components?

I understand well how to inject independent React components as described here: https://docs.plasmo.com/framework/content-scripts-ui However, I don't understand how to share state variables between those two components. In a regular React application you'd typically "lift the state up", but here I don't understand how that would work. Do I have to create an ancestor component without an anchor that would wrap the two components? I thought about using the messaging system, but it seems to be mainly to communicate between content scripts and the background service worker. It seems that the storage API: https://docs.plasmo.com/framework/storage might be a good fit, but maybe this is overkill and there is a simpler way to do this? Thank you for your help! 🚀

2 replies

PD🧩 Plasmo Developers

•Created by tetec1 on 6/2/2023 in #🔰newbie

What exactly invalidates the context?

29 replies

PD🧩 Plasmo Developers

•Created by tetec1 on 5/11/2023 in #🔰newbie

Hot reloading a CSS file not working

Hi! When I modify a css file in my project, the app reloads automatically and I get the "Extension re-packaged" as in my .tsx files, but the web page where my extension is running doesn't reload. Reloading the web page doesn't do anything, and I have to restart the development server to be able to see the new style. Is this something I can configure somewhere? In general, I did not see where I could configure Plasmo to see or modify which folders it observes when hot-reloading. Thank you for your help!

10 replies

PD🧩 Plasmo Developers

•Created by tetec1 on 5/10/2023 in #🔰newbie

Injection and styling a button into the YouTube player

138 replies

Gaming

Programming