Use zustand to share state between pages and background in web extensions.
MIT License
Use zustand to share state between pages and background in web extensions.
npm install webext-zustand
wrapStore
. Import the store from 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
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<BearState>()((set) => ({
bears: 0,
increase: (by) => set((state) => ({ bears: state.bears + by })),
}))
export const storeReadyPromise = wrapStore(useBearStore);
export default useBearStore;
background.ts
import store from "./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 { useBearStore, storeReadyPromise } 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>
);
};
storeReadyPromise.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 { useBearStore, storeReadyPromise } 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>
);
};
storeReadyPromise.then(() => {
const root = document.createElement("div");
document.body.prepend(root);
createRoot(root).render(
<React.StrictMode>
<Content />
</React.StrictMode>
);
});
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.
MIT License © 2023 Sinan Bekar