a preact hook for webextension storage

useStorage.js

function useStorage() {
  const [storage, setStorage] = useState(null)
  useEffect(() => {
    const listener = async () => {
      const { storage } = await browser.storage.sync.get("storage")
      setStorage(storage)
    }
    browser.storage.sync.onChanged.addListener(listener)
    listener()
    return () => {
      browser.storage.sync.onChanged.removeListener(listener)
    }
  }, [])
  return [storage, (value) => browser.storage.sync.set({ storage: value })]
}