https://github.com/yangjonghun/vite-react-webext
⚡️ WebExtension Vite + React Starter Template
https://github.com/yangjonghun/vite-react-webext
react vite webextension
Last synced: 18 days ago
JSON representation
⚡️ WebExtension Vite + React Starter Template
- Host: GitHub
- URL: https://github.com/yangjonghun/vite-react-webext
- Owner: YangJonghun
- Created: 2022-04-10T08:15:38.000Z (about 3 years ago)
- Default Branch: main
- Last Pushed: 2022-04-30T12:16:16.000Z (almost 3 years ago)
- Last Synced: 2025-03-25T14:39:00.753Z (about 1 month ago)
- Topics: react, vite, webextension
- Language: TypeScript
- Homepage:
- Size: 55.5 MB
- Stars: 20
- Watchers: 2
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# WebExtension Vite Starter (with React)
A [Vite](https://vitejs.dev/) powered WebExtension ([Chrome](https://developer.chrome.com/docs/extensions/reference/), [FireFox](https://addons.mozilla.org/en-US/developers/), etc.) starter template.
Popup
Options Page
Inject Vue App into the Content Script
## Features
- ⚡️ **Instant HMR** - use **Vite** on dev (no more refresh!)
- ⚛️ [React](https://reactjs.org/)
- 🦾 [TypeScript](https://www.typescriptlang.org/) - type safe
- 🖥 Content Script - Use React even in content script
- 🌍 WebExtension - isomorphic extension for Chrome, Firefox, and others
- 📃 Dynamic `manifest.json` with full type support
## Pre-packed
### WebExtension Libraries
- [`webextension-polyfill`](https://github.com/mozilla/webextension-polyfill) - WebExtension browser API Polyfill with types
- [`webext-bridge`](https://github.com/antfu/webext-bridge) - effortlessly communication between contexts
### Vite Plugins
- [`unplugin-auto-import`](https://github.com/antfu/unplugin-auto-import) - Directly use `browser` without importing
### Coding Style
- [ESLint](https://eslint.org/)
- [Prettier](https://prettier.io/)
### Dev tools
- [TypeScript](https://www.typescriptlang.org/)
- [yarn](https://yarnpkg.com/) - fast, disk space efficient package manager
- [esno](https://github.com/antfu/esno) - TypeScript / ESNext node runtime powered by esbuild
- [npm-run-all](https://github.com/mysticatea/npm-run-all) - Run multiple npm-scripts in parallel or sequential
- [web-ext](https://github.com/mozilla/web-ext) - Streamlined experience for developing web extensions
## Use the Template
### GitHub Template
[Create a repo from this template on GitHub](https://github.com/YangJonghun/vite-react-webext/generate).
### Clone to local
If you prefer to do it manually with the cleaner git history
> If you don't have yarn installed, run: npm install -g yarn
```bash
npx degit YangJonghun/vite-react-webext my-webext
cd my-webext
yarn
```
## Usage
### Folders
- `src` - main source.
- `assets` - shareable public assets.
- `background` - scripts for background.
- `contentScripts` - scripts and components to be injected as `content_script`
- `components` - auto-imported Vue components that are shared in popup and options page.
- `styles` - styles shared in popup and options page
- `manifest.ts` - manifest for the extension (v2).
- `extension` - extension package root.
- `assets` - static assets.
- `dist` - built files, also serve stub entry for Vite on development.
- `scripts` - development and bundling helper scripts.
### Development
```bash
yarn dev
```
Then **load extension in browser with the `extension/` folder**.
For Firefox developers, you can run the following command instead:
```bash
yarn start:firefox
```
`web-ext` auto reload the extension when `extension/` files changed.
> While Vite handles HMR automatically in the most of the case, [Extensions Reloader](https://chrome.google.com/webstore/detail/fimgfedafeadlieiabdeeaodndnlbhid) is still recommanded for cleaner hard reloading.
### Build
To build the extension, run
```bash
yarn build
```
And then pack files under `extension`, you can upload `extension.crx` or `extension.xpi` to appropriate extension store.
## Credits
This template codes are based on
[Anthony Fu](https://github.com/antfu)'s [vitesse-webext](https://github.com/antfu/vitesse-webext).