https://github.com/cresvin/crxjs-react-starter
CRXJS React Chrome extension starter + TypeScript + TailwindCSS
https://github.com/cresvin/crxjs-react-starter
chrome chrome-extension crxjs extension react starter tailwindcss template ts typescript vite
Last synced: about 1 year ago
JSON representation
CRXJS React Chrome extension starter + TypeScript + TailwindCSS
- Host: GitHub
- URL: https://github.com/cresvin/crxjs-react-starter
- Owner: cresvin
- License: mit
- Created: 2024-05-09T17:59:26.000Z (about 2 years ago)
- Default Branch: main
- Last Pushed: 2024-05-09T20:54:59.000Z (about 2 years ago)
- Last Synced: 2025-03-31T02:41:19.013Z (about 1 year ago)
- Topics: chrome, chrome-extension, crxjs, extension, react, starter, tailwindcss, template, ts, typescript, vite
- Language: TypeScript
- Homepage:
- Size: 70.3 KB
- Stars: 9
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# ⚡ CRXJS React starter + TypeScript + TailwindCSS
This template is for creating Chrome extension, using [Vite](https://vitejs.dev/), [CRX](https://crxjs.dev/vite-plugin/) plugin, [React](https://react.dev/), [TailwindCSS](https://tailwindcss.com/) and [TypeScript](https://www.typescriptlang.org/).
## What this template contains?
- Extension popup
- Content scripts
- Extension background
- New tab page
- Welcome page
## How to use
- Click the use [Use this template](https://github.com/cresvin/crxjs-react-starter/generate) button or clone this repo.
```bash
# Install dependencies
npm install
# Run extension as dev mode
npm run dev
# Build extension
npm run build
```
## Example Usage
**To use the popup**:
1. Navigate to the `src/pages/popup/popup.tsx` directory.
2. Modify the files as needed.
3. Run npm run dev to see changes in real-time.
4. Once satisfied, build the extension using npm run build.
## Useful Links
- [Vite Documentation](https://vitejs.dev/)
- [CRX Documentation](https://crxjs.dev/vite-plugin/)
- [React Documentation](https://react.dev/)
- [TailwindCSS Documentation](https://tailwindcss.com/)
- [TypeScript Documentation](https://www.typescriptlang.org/)