npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@webext-pegasus/store-zustand

v0.3.6

Published

Zustand adapter to share state between pages and background in web extensions.

Downloads

2,368

Readme

webext-pegasus Logo

@webext-pegasus/store-zustand

License GitHub Actions Workflow Status Package version

Zustand adapter to share state between pages (content script, injected script, popup, devtools, etc..) and background in web extensions.

Supports

  • Runtime contexts: window (injected script), popup, devtools, content script, background, options, sidepanel (planned)
  • Browsers: Chrome, Firefox, Safari, Opera, Edge + others supported by webextension-polyfill

🚀 Quick Start

npm install -S @webext-pegasus/transport @webext-pegasus/store-zustand
  • Create a store based on https://github.com/pmndrs/zustand.
  • You can create a store either reactive way or vanilla.
  • Wrap the store with initPegasusZustandStoreBackend. Import the store from the background or any other extension context.
  • Wait for the store to be ready (connected to background) via pegasusZustandStoreReady.

That's it! Now your store is available from everywhere.

[!TIP] Refer to ./packages/example-extension for more examples.

store.ts

import { create } from 'zustand'
// or import { createStore } from 'zustand/vanilla'
import { initPegasusZustandStoreBackend, pegasusZustandStoreReady } from 'webext-zustand'

interface BearState {
  bears: number
  increase: (by: number) => void
}

export const useBearStore = create<BearState>()((set) => ({
  bears: 0,
  increase: (by) => set((state) => ({ bears: state.bears + by })),
}))

export const STORE_NAME = 'GlobalBearStore';

export const bearStoreBackendReady = () =>
  initPegasusZustandStoreBackend(STORE_NAME, useBearStore);
export const bearStoreReady = () =>
  pegasusZustandStoreReady(STORE_NAME, useBearStore);

background.ts

import { initPegasusTransport } from '@webext-pegasus/transport/background';
import { initPegasusZustandStoreBackend } from '@webext-pegasus/store-zustand';

import {bearStoreBackendReady} from './store';

initPegasusTransport();

bearStoreBackendReady().then(store => {
  // listen state changes
  store.subscribe((state) => {
    // console.log(state);
  });

  // dispatch
  // store.getState().increase(2);
});

popup.tsx

import React from 'react';
import { createRoot } from 'react-dom/client';
import {initPegasusTransport} from '@webext-pegasus/transport/popup';

import { useBearStore, bearStoreReady } from './store';

const Popup = () => {
  const bears = useBearStore((state) => state.bears);
  const increase = useBearStore((state) => state.increase);

  return (
    <div>
      Popup
      <div>
        <span>Bears: {bears}</span>
        <br />
        <button onClick={() => increase(1)}>Increment +</button>
      </div>
    </div>
  );
};

// Init surface specific APIs
initPegasusTransport();

bearStoreReady().then(() => {
  createRoot(document.getElementById("root") as HTMLElement).render(
    <React.StrictMode>
      <Popup />
    </React.StrictMode>
  );
});

content-script.tsx

import React from 'react';
import { createRoot } from 'react-dom/client';
import {initPegasusTransport} from '@webext-pegasus/transport/content-script';

import { useBearStore, bearStoreReady } from './store';

const Content = () => {
  const bears = useBearStore((state) => state.bears);
  const increase = useBearStore((state) => state.increase);

  return (
    <div>
      Content
      <div>
        <span>Bears: {bears}</span>
        <br />
        <button onClick={() => increase(1)}>Increment +</button>
      </div>
    </div>
  );
};

// Init surface specific APIs
initPegasusTransport();

bearStoreReady().then(() => {
  const root = document.createElement("div");
  document.body.prepend(root);

  createRoot(root).render(
    <React.StrictMode>
      <Content />
    </React.StrictMode>
  );
});

Special use case: Manifest V3 service worker

In MV3 extensions A service worker replaces the extension's background or event page to ensure that background code stays off the main thread. This enables extensions to run only when needed, saving resources.

However this also means that on the contrary to the constantly running background script MV3 SW terminates when not in use, you'll need to persist application states rather than rely on global variables.

Fortunately this library provides a simple solution for this problem! You only need to do couple of changes to your extension:

  1. Enable storage permission for your extension. State for your Pegasus Stores will be persisted via browser.storage API

  2. Pass and additional storageStrategy parameter to witin your background script:

    initPegasusZustandStoreBackend(STORE_NAME, store, {
      storageStrategy: 'session' // use "local" to persist store across browser sessions or "sync" for store used for extension settings
    });

Credits

This library is based on the Sinan Bekar's implementation of the webext-zustand. However it adds support of the injected scripts & utilizes newer, simplified transport layer.