Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/jacksteamdev/vite-chrome-extension
Experiment with Vite and rollup-plugin-chrome-extension
https://github.com/jacksteamdev/vite-chrome-extension
Last synced: 22 days ago
JSON representation
Experiment with Vite and rollup-plugin-chrome-extension
- Host: GitHub
- URL: https://github.com/jacksteamdev/vite-chrome-extension
- Owner: jacksteamdev
- License: mit
- Created: 2021-08-16T18:37:33.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2021-08-16T18:37:35.000Z (over 3 years ago)
- Last Synced: 2024-10-24T22:44:20.576Z (2 months ago)
- Language: TypeScript
- Size: 6.84 KB
- Stars: 2
- Watchers: 2
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
README
# WebExtension Vite Starter
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.
## Features
- ⚡️ **Instant HMR** - use **Vite** on dev (no more refresh!)
- 🥝 Vue 3 - Composition API, [`` syntax](https://github.com/vuejs/rfcs/blob/master/active-rfcs/0040-script-setup.md) and more!
- 💬 Effortless communications - powered by [`webext-bridge`](https://github.com/antfu/webext-bridge) and [VueUse](https://github.com/antfu/vueuse) storage
- 🍃 [Windi CSS](https://windicss.org/) - on-demand CSS utilities
- 🦾 [TypeScript](https://www.typescriptlang.org/) - type safe
- 📦 [Components auto importing](./views/components)
- 🌟 [Icons](./views/components) - Access to icons from any iconset directly
- 🌍 WebExtension - isomorphic extension for Chrome, Firefox, and others
- 📃 Dynamic `manifest.json` with full type support
## Pre-packed
### WebExtension Libraries
- [`webextension-polyfill-ts`](https://github.com/Lusito/webextension-polyfill-ts) - WebExtension browser API Polyfill with types
- [`webext-bridge`](https://github.com/antfu/webext-bridge) - effortlessly communication between contexts
### Vite Plugins
- [`vite-plugin-components`](https://github.com/antfu/vite-plugin-components) - components auto import
- [`vite-plugin-windicss`](https://github.com/antfu/vite-plugin-windicss) - WindiCSS support
### Vue Plugins
- [`vue-global-api`](https://github.com/antfu/vue-global-api) - use Vue Composition API globally
- [VueUse](https://github.com/antfu/vueuse) - collection of useful composition APIs
### UI Frameworks
- [Windi CSS](https://github.com/windicss/windicss) - next generation utility-first CSS framework
### Icons
- [Iconify](https://iconify.design) - use icons from any icon sets [🔍Icônes](https://icones.netlify.app/)
- [`vite-plugin-icons`](https://github.com/antfu/vite-plugin-icons) - icons as Vue components
### Coding Style
- Use Composition API with [`<script setup>` SFC syntax](https://github.com/vuejs/rfcs/pull/227)
- [ESLint](https://eslint.org/) with [@antfu/eslint-config](https://github.com/antfu/eslint-config), single quotes, no semi
### Dev tools
- [TypeScript](https://www.typescriptlang.org/)
- [pnpm](https://pnpm.js.org/) - fast, disk space efficient package manager
- [tsup](https://github.com/egoist/tsup) - Zero config TypeScript bundler powered by esbuild
- [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
## Use the Template
### GitHub Template
[Create a repo from this template on GitHub](https://github.com/antfu/vitesse-webext/generate).
### Clone to local
If you prefer to do it manually with the cleaner git history
> If you don't have pnpm installed, run: npm install -g pnpm
```bash
npx degit antfu/vitesse-webext my-webext
cd my-webext
pnpm i
```
## Usage
### Folders
- `views` - frontend for the extension (popup and options).
- `src` - background scripts and content scripts.
- `manifest.ts` - manifest for the extension.
- `extension` - extension package root, also holds assets.
- `scripts` - development helper scripts.
### Development
```bash
pnpm dev
```
Then **load extension in browser with the `extension/` folder**,
### Build
To build the extension, run
```bash
pnpm build
```
And then pack files under `extension`.
## Credits
This template is originally made for the [volta.net](https://volta.net) browser extension.
## Variations
This is a variant of [Vitesse](https://github.com/antfu/vitesse), check out the [full variations list](https://github.com/antfu/vitesse#variations).