https://github.com/sinanbekar/webext-zustand

Use zustand to share state between pages and background in web extensions.
https://github.com/sinanbekar/webext-zustand

chrome-extension state-management web-extension zustand

Last synced: 3 months ago
JSON representation

Use zustand to share state between pages and background in web extensions.

• Host: GitHub
• URL: https://github.com/sinanbekar/webext-zustand
• Owner: sinanbekar
• License: mit
• Created: 2023-09-06T12:46:34.000Z (over 1 year ago)
• Default Branch: main
• Last Pushed: 2024-06-09T20:38:11.000Z (8 months ago)
• Last Synced: 2024-10-01T15:07:32.875Z (4 months ago)
• Topics: chrome-extension, state-management, web-extension, zustand
• Language: TypeScript
• Homepage: https://www.npmjs.com/package/webext-zustand
• Size: 42 KB
• Stars: 13
• Watchers: 3
• Forks: 4
• Open Issues: 3
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# webext-zustand

Use zustand to share state between pages and background in web extensions.

## 🚀 Quick Start

```bash

npm install webext-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 `wrapStore`. Import the store from the background.

- You should await for the store to connect to the background.

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

> You can try out the basic example app in the `examples` folder.

`store.ts`

```js

import { create } from 'zustand'

// or import { createStore } from 'zustand/vanilla'

import { wrapStore } from 'webext-zustand'

interface BearState {

  bears: number

  increase: (by: number) => void

}

export const useBearStore = create()((set) => ({

  bears: 0,

  increase: (by) => set((state) => ({ bears: state.bears + by })),

}))

export const storeReadyPromise = wrapStore(useBearStore);

export default useBearStore;

```

`background.ts`

```js

import store from "./store";

// listen state changes

store.subscribe((state) => {

  // console.log(state);

});

// dispatch

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

```

`popup.tsx`

```js

import React from "react";

import { createRoot } from "react-dom/client";

import { useBearStore, storeReadyPromise } from "./store";

const Popup = () => {

  const bears = useBearStore((state) => state.bears);

  const increase = useBearStore((state) => state.increase);

  return (

    


      Popup

      


        Bears: {bears}

        


         increase(1)}>Increment +

      

    

  );

};


storeReadyPromise.then(() => {

  createRoot(document.getElementById("root") as HTMLElement).render(

    

      

    

  );

});

```

`content-script.tsx`

```js

import React from "react";

import { createRoot } from "react-dom/client";

import { useBearStore, storeReadyPromise } from "./store";

const Content = () => {

  const bears = useBearStore((state) => state.bears);

  const increase = useBearStore((state) => state.increase);

  return (

    


      Content

      


        Bears: {bears}

        


         increase(1)}>Increment +

      

    

  );

};


storeReadyPromise.then(() => {

  const root = document.createElement("div");

  document.body.prepend(root);

  createRoot(root).render(

    

      

    

  );

});

```

## Architecture

Current implementation is based on the

https://github.com/eduardoacskimlinks/webext-redux (which is a fork of `tshaddix/webext-redux`)

This library adds a minimal layer to support `zustand` and automatic runtime environment detection.

You can find more information on the `webext-redux` package.

## License

[MIT](./LICENSE) License © 2023 [Sinan Bekar](https://github.com/sinanbekar)