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!

4 Replies

tetec1•16mo ago

@louis

tetec1•16mo ago

@louis

Arcane•16mo ago

@tetec1 has reached level 5. GG!

tetec1•16mo ago

okay, I think I figured it out, for some reason pnpm didn't install the correct version of the package, and putting it in the devDependencies in my package.json didn't work. so yes, ""@plasmohq/storage" must be in the dependencies, not the devDependencies.

Gaming

Programming

useStorage between two content script components in React