https://github.com/utsavdotpro/starter-chrome-extension-react-tailwind-webpack-ts
A starter template for Chrome Extensions with Tailwind CSS, Webpack, and TypeScript
https://github.com/utsavdotpro/starter-chrome-extension-react-tailwind-webpack-ts
chrome-extension starter-template tailwindcss typescript webpack
Last synced: 3 months ago
JSON representation
A starter template for Chrome Extensions with Tailwind CSS, Webpack, and TypeScript
- Host: GitHub
- URL: https://github.com/utsavdotpro/starter-chrome-extension-react-tailwind-webpack-ts
- Owner: utsavdotpro
- Created: 2025-05-18T04:56:56.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2025-05-18T06:05:03.000Z (about 1 year ago)
- Last Synced: 2025-06-18T22:36:25.925Z (about 1 year ago)
- Topics: chrome-extension, starter-template, tailwindcss, typescript, webpack
- Language: TypeScript
- Homepage:
- Size: 60.5 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
[
](https://githubbox.com/utsavdotpro/starter-chrome-extension-react-tailwind-webpack-ts)
# Chrome Extension Starter Template
A modern starter template for building Chrome extensions with:
[](https://react.dev)
[](https://tailwindcss.com)
[](https://typescriptlang.org)
[](https://webpack.js.org/)
---
## How to Reuse Locally?
Use `degit` to download the repository locally.
> **❓ What is [degit](https://github.com/Rich-Harris/degit)?**
> degit downloads a copy of git repository with downloading its entire git history.
Install degit globally.
```bash
pnpm install -g degit
```
Download the latest version
```bash
degit utsavdotpro/starter-chrome-extension-react-tailwind-webpack-ts
```
## Features
- Manifest V3 compliant
- React for building UI components
- Modern JavaScript with TypeScript support
- Styling with Tailwind CSS
- Hot reloading during development
- Optimized production build
## Getting Started
### Installation
```bash
pnpm install
```
### Development
```bash
pnpm dev
```
### Build for Production
```bash
pnpm build
```
## Loading the Extension in Chrome
1. Build the extension using `npm run build` or `pnpm build`
2. Open Chrome and navigate to `chrome://extensions`
3. Enable "Developer mode" in the top right corner
4. Click "Load unpacked" and select the `dist` directory from this project
## Project Structure
```
├── public/ # Static assets and manifest.json
│ ├── icons/ # Extension icons
│ ├── manifest.json # Extension manifest
│ └── popup.html # Popup HTML
├── src/ # Source code
│ ├── background.ts # Background script
│ ├── content/ # Content script with React components
│ │ ├── index.tsx # Content script entry point
│ │ └── ContentApp.tsx # Content React component
│ ├── popup/ # Popup script with React components
│ │ ├── index.tsx # Popup entry point
│ │ └── Popup.tsx # Popup React component
│ └── global.css # Global styles (includes Tailwind)
├── webpack.config.js # Webpack configuration
├── tailwind.config.js # Tailwind CSS configuration
└── tsconfig.json # TypeScript configuration
```
## Customization
- Update the `manifest.json` file to change the extension name, description, permissions, etc.
- Modify the icons in `public/icons/` to customize the extension icon
- Edit the popup UI in `src/popup/Popup.tsx` and `public/popup.html`
- Customize content script UI in `src/content/ContentApp.tsx`
## License
MIT