Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/svipulc/chrome-extension-vite
https://github.com/svipulc/chrome-extension-vite
Last synced: about 1 month ago
JSON representation
- Host: GitHub
- URL: https://github.com/svipulc/chrome-extension-vite
- Owner: svipulc
- Created: 2024-08-09T05:43:13.000Z (3 months ago)
- Default Branch: main
- Last Pushed: 2024-08-09T06:08:58.000Z (3 months ago)
- Last Synced: 2024-08-10T06:55:23.618Z (3 months ago)
- Language: TypeScript
- Size: 48.8 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Chrome Extension Boilerplate with React, TypeScript, and Vite
This project is a boilerplate for creating Chrome extensions using React, TypeScript, and Vite. It provides a modern development environment with hot module replacement (HMR) for a smoother development experience.
## Features
- ⚡️ **Vite** - Lightning fast build tool
- ⚛️ **React** - A popular library for building user interfaces
- 🔷 **TypeScript** - For type-safe code
- 🧩 **Chrome Extension Manifest V3** - The latest manifest version for Chrome extensions
## Prerequisites
- Node.js (version 14 or newer)
- npm or yarn
- Google Chrome browser
## Getting Started
1. Clone this repository:
```markdown
git clone https://github.com/svipulc/chrome-extension-vite.git
```
2. Navigate to the project directory:
```markdown
cd chrome-extension-boilerplate
```
3. Install dependencies:
```markdown
npm install
```
or
```markdown
yarn
```
4. Start the development server:
```markdown
npm run dev
```
or
```markdown
yarn dev
```
5. Load the extension in Chrome:
- Open Chrome and navigate to `chrome://extensions`
- Enable "Developer mode" in the top right corner
- Click "Load unpacked" and select the `dist` folder in your project directory
## Project Structure
```markdown
├── public/
│ ├── manifest.json
│ └── icon.png
├── src/
│ ├── popup/
│ │ ├── Popup.tsx
│ │ └── index.html
│ ├── options/
│ │ ├── Options.tsx
│ │ └── index.html
│ ├── background/
│ │ └── index.ts
│ ├── components/
│ ├── utils/
│ └── content/
│ └── index.ts
├── vite.config.ts
├── tsconfig.json
└── package.json
```
## Building for Production
To create a production build, run:
```markdown
npm run build
```
or
```markdown
yarn build
```
This will generate a `dist` folder with your compiled extension, ready to be published to the Chrome Web Store.
## Contributing
Contributions are welcome! Please feel free to submit a Pull Request.
## License
This project is licensed under the MIT License. See the [LICENSE](LICENSE) file for details. converte thi