Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/omribarmats/chrome-extension-starter
This is a starter project for creating Chrome extensions with Vite, React, TypeScript and Tailwind CSS
https://github.com/omribarmats/chrome-extension-starter
chrome-extension reactjs starter-template vite
Last synced: about 1 month ago
JSON representation
This is a starter project for creating Chrome extensions with Vite, React, TypeScript and Tailwind CSS
- Host: GitHub
- URL: https://github.com/omribarmats/chrome-extension-starter
- Owner: omribarmats
- Created: 2024-09-15T16:03:15.000Z (2 months ago)
- Default Branch: main
- Last Pushed: 2024-09-19T14:19:17.000Z (about 2 months ago)
- Last Synced: 2024-09-27T03:04:38.288Z (about 2 months ago)
- Topics: chrome-extension, reactjs, starter-template, vite
- Language: HTML
- Homepage:
- Size: 103 KB
- Stars: 5
- Watchers: 1
- Forks: 3
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Chrome Extension Starter with Vite, React, TypeScript, and Tailwind CSS
This project is a starter template for building modern Chrome extensions using Vite, React, TypeScript, and Tailwind CSS. It simplifies the setup so you can focus on building your extension's features.
## View tutorial on YouTube
## Features
- **Fast reloading** develop UI faster, view the popup and options page
- **Vite** for fast bundling and development
- **React** for building interactive UI components
- **TypeScript** for type-safe JavaScript development
- **Tailwind CSS** for easy and responsive styling
- **chrome-types** Chrome's API TS files for auto-completion
## Installation
### Clone this repository:
```
git clone https://github.com/omribarmats/chrome-extension-starter.git new-project
```
* Replace `new-project` with your project name
### Open the new directory:
```
cd new-project
```
### Install dependencies:
```
npm install
```
### Start the development server:
```
npm run dev
```
## Load the Extension
1. Run the build command: `npm run build.`
2. Go to `chrome://extensions/` in your Chrome browser.
3. Enable `Developer mode`.
4. Click `Load unpacked` and select the `dist` folder from the project.
## Development
- Hot-reload enabled for easier development.
- Modify your code in the src folder.
- Tailwind CSS is already configured and ready to use.
- Run `nmp run build` to implement changes to `dist` folder
- Go on `chrome://extensions/` and click refresh `⟳`
### How to change the popup?
- Go on `src/chrome-extension/popup/index.tsx`
- Once changes are made open the terminal and run `nmp run build` then visit `chrome://extensions/` and click the refresh `⟳` button on your extension
### How to change the options page?
- Go on `src/chrome-extension/options/index.tsx`
- Once changes are made open the terminal and run `nmp run build` then visit `chrome://extensions/` and click the refresh `⟳` button on your extension
- ### How to add a background script?
- Create a `background.ts` file inside the `src` folder
- Go on `vite.config.ts` and add this line `background: resolve(__dirname, "src/background.ts"),` under `build.rollupOptions.input`
- For example
```
build: {
rollupOptions: {
input: {
popup: resolve(__dirname, "popup.html"),
options: resolve(__dirname, "options.html"),
background: resolve(__dirname, "src/background.ts"),
},
output: {
entryFileNames: "[name].js",
},
},
},
```
- Go on `manifest.json` and add this code:
```
"background": {
"service_worker": "background.js",
"type": "module"
}
```
- Open the terminal and run `nmp run build` then visit `chrome://extensions/` and click the refresh `⟳` button on your extension
## Contributing
Feel free to fork the project and make improvements or submit bug reports or issues.