https://github.com/kirklin/boot-webext
Chrome extension template with Vue 3 + Typescript
https://github.com/kirklin/boot-webext
chrome chrome-extension typescript vue3
Last synced: about 1 year ago
JSON representation
Chrome extension template with Vue 3 + Typescript
- Host: GitHub
- URL: https://github.com/kirklin/boot-webext
- Owner: kirklin
- License: mit
- Created: 2022-02-09T16:17:18.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2025-02-09T07:25:33.000Z (over 1 year ago)
- Last Synced: 2025-04-18T04:56:03.225Z (about 1 year ago)
- Topics: chrome, chrome-extension, typescript, vue3
- Language: TypeScript
- Homepage:
- Size: 526 KB
- Stars: 4
- Watchers: 2
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
boot-webext
A Vite powered WebExtension (Chrome, FireFox, etc.) starter template.
## Features
- ⚡️ **Instant HMR**: Utilize Vite's fast development server for instant Hot Module Replacement, eliminating the need for manual refreshing.
- 🥝 **Vue 3**: Harness the power of Vue 3 with Composition API, syntax, and more.
- 💬 **Effortless Communications**: Seamlessly communicate between different contexts using the combination of webext-bridge and VueUse storage.
- 🌈 **UnoCSS**: Leverage the on-demand Atomic CSS engine, UnoCSS, to style your components efficiently.
- 📜 **Chinese Font Preset**: Includes a preset for Chinese fonts 🇨🇳
- 🦾 **TypeScript**: Ensure type safety and enhanced development experience with TypeScript integration.
- 📦 **Components Auto Importing**: Automatically import components for smoother development workflow.
- 🌟 **Icons**: Access icons directly from any iconset, enhancing your design process.
- 🖥 **Content Script**: Utilize the power of Vue even within content scripts.
- 🌍 **WebExtension**: Develop isomorphic extensions that work across browsers like Chrome, Firefox, and others.
- 📃 **Dynamic manifest.json with Full Type Support**: Craft your manifest.json with flexibility and full type support.
### Coding Style
- [@kirklin/eslint-config](https://github.com/kirklin/eslint-config)
### Recommended IDE Setup
- 🌪️ [WebStorm](https://www.jetbrains.com/webstorm/)
- 💻 [VSCode](https://code.visualstudio.com/)
- 💡 [Volar](https://marketplace.visualstudio.com/items?itemName=johnsoncodehk.volar)
## Try it now!
### GitHub Template
[Create a repo from this template on GitHub](https://github.com/kirklin/boot-webext/generate).
### Clone to local
```bash
npx degit kirklin/boot-webext my-webext
cd my-webext
pnpm i
```
## Usage
### Development
Just run and install dependencies, then you can start to develop your extension.
```bash
pnpm run dev
```
### Build
To build the App, run
```bash
pnpm run build
```
And you will see the generated file in `dist` that ready to be served.