Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/neo-hack/webext-template
a fork version of vitesse-webext, but with react
https://github.com/neo-hack/webext-template
extension react vite
Last synced: 5 days ago
JSON representation
a fork version of vitesse-webext, but with react
- Host: GitHub
- URL: https://github.com/neo-hack/webext-template
- Owner: neo-hack
- License: mit
- Created: 2021-09-25T09:01:41.000Z (about 3 years ago)
- Default Branch: v3
- Last Pushed: 2023-04-14T12:28:02.000Z (over 1 year ago)
- Last Synced: 2024-11-05T17:58:16.405Z (10 days ago)
- Topics: extension, react, vite
- Language: TypeScript
- Homepage:
- Size: 89.8 KB
- Stars: 17
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
README
# @aiou/webext-template
*a fork version of [vitesse-webext](https://github.com/antfu/vitesse-webext), but with react*
*thanks to awesome work https://github.com/xlzy520/vitesse-webext/tree/refactor/mv3 support chrome manifest v3*
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.
[](https://github.com/neo-hack/webext-template) [](https://github.com/neo-hack/webext-template) [](https://github.com/neo-hack/webext-template)
[Edit on StackBlitz ⚡️](https://stackblitz.com/github/JiangWeixian/templates/tree/master/packages/webext-template)
## Features
- ⚡️ **Instant HMR** - use **Vite** on dev (no more refresh!)
- 🌐 React
- 💬 Effortless communications - powered by [`webext-bridge`](https://github.com/antfu/webext-bridge)
- 🍃 [tailwindcss](https://tailwindcss.come/) - on-demand CSS utilities
- 🦾 [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
### Dev tools
- [TypeScript](https://www.typescriptlang.org/)
- [pnpm](https://pnpm.js.org/) - 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
## Usage
### Folders
- `src` - main source.
- `contentScript` - scripts and components to be injected as `content_script`
- `background` - scripts for background.
- `components` - auto-imported React components that shared in popup and options page.
- `styles` - styles shared in popup and options page
- `manifest.ts` - manifest for the extension.
- `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
pnpm dev
```
Then **load extension in browser with the `extension/` folder**.
For Firefox developers, you can run the following command instead:
```bash
pnpm 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
pnpm build
```
And then pack files under `extension`, you can upload `extension.crx` or `extension.xpi` to appropriate extension store.
#
*built with ❤️ by [😼](https://github.com/neo-hack/templates)*