https://github.com/drewalth/chrome-extension-zustand
Vanilla Zustand and the Storage API as a single source of truth in Chrome Extensions
https://github.com/drewalth/chrome-extension-zustand
chrome-extension react reactjs storage typescript zustand
Last synced: 11 months ago
JSON representation
Vanilla Zustand and the Storage API as a single source of truth in Chrome Extensions
- Host: GitHub
- URL: https://github.com/drewalth/chrome-extension-zustand
- Owner: drewalth
- License: mit
- Created: 2023-07-01T20:20:51.000Z (about 3 years ago)
- Default Branch: main
- Last Pushed: 2025-03-12T15:21:47.000Z (over 1 year ago)
- Last Synced: 2025-06-25T03:05:10.330Z (about 1 year ago)
- Topics: chrome-extension, react, reactjs, storage, typescript, zustand
- Language: TypeScript
- Homepage:
- Size: 1.13 MB
- Stars: 4
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
Awesome Lists containing this project
README
# chrome-extension-zustand
A proof-of-concept for using [Zustand](https://zustand.docs.pmnd.rs/) and
the [Storage API](https://developer.chrome.com/docs/extensions/reference/storage/) as a single source of truth
in [Chrome Extensions](https://developer.chrome.com/docs/extensions/).
This demo extension fetches data from [pokeapi.co](https://pokeapi.co/) and displays it in a popup.
## Getting Started
Clone the repository:
```bash
gh repo clone drewalth/chrome-extension-zustand
```
Install dependencies:
```bash
npm install
```
Run the development server:
```bash
npm run dev
```
Load the extension in Chrome:
1. Open Chrome and navigate to `chrome://extensions/`.
2. Enable "Developer mode" if it is not already enabled.
3. Click on "Load unpacked" and select the `dist` directory of this repository. For convenience, you can pin the extension to your toolbar.
4. The extension should now be loaded and ready to use.
#### Built with
- [Vite](https://vitejs.dev/)
- [@crxjs/vite-plugin](https://crxjs.dev/vite-plugin) ⭐
- [React](https://react.dev/)
- [TypeScript](https://www.typescriptlang.org/)
- [Zustand](https://zustand.docs.pmnd.rs/)
- [Immer](https://immerjs.github.io/immer/)