Change LICENSE and README
This commit is contained in:
Lalle
parent
b15e10aa15
commit
ab3137394f
21
LICENSE.~1~
21
LICENSE.~1~
@ -1,21 +0,0 @@
|
|||||||
MIT License
|
|
||||||
|
|
||||||
Copyright (c) 2021 Anthony Fu
|
|
||||||
|
|
||||||
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
||||||
of this software and associated documentation files (the "Software"), to deal
|
|
||||||
in the Software without restriction, including without limitation the rights
|
|
||||||
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
||||||
copies of the Software, and to permit persons to whom the Software is
|
|
||||||
furnished to do so, subject to the following conditions:
|
|
||||||
|
|
||||||
The above copyright notice and this permission notice shall be included in all
|
|
||||||
copies or substantial portions of the Software.
|
|
||||||
|
|
||||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
||||||
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
||||||
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
||||||
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
||||||
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
||||||
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
||||||
SOFTWARE.
|
|
||||||
132
README.md
132
README.md
@ -1,2 +1,132 @@
|
|||||||
# vite-vue-webext
|
# 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.
|
||||||
|
|
||||||
|
<p align="center">
|
||||||
|
<sub>Popup</sub><br/>
|
||||||
|
<img width="655" src="https://user-images.githubusercontent.com/11247099/126741643-813b3773-17ff-4281-9737-f319e00feddc.png"><br/>
|
||||||
|
<sub>Options Page</sub><br/>
|
||||||
|
<img width="655" src="https://user-images.githubusercontent.com/11247099/126741653-43125b62-6578-4452-83a7-bee19be2eaa2.png"><br/>
|
||||||
|
<sub>Inject Vue App into the Content Script</sub><br/>
|
||||||
|
<img src="https://user-images.githubusercontent.com/11247099/130695439-52418cf0-e186-4085-8e19-23fe808a274e.png">
|
||||||
|
</p>
|
||||||
|
|
||||||
|
## Features
|
||||||
|
|
||||||
|
- ⚡️ **Instant HMR** - use **Vite** on dev (no more refresh!)
|
||||||
|
- 🥝 Vue 3 - Composition API, [`<script setup>` 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
|
||||||
|
- 🌈 [UnoCSS](https://github.com/unocss/unocss) - The instant on-demand Atomic CSS engine.
|
||||||
|
- 🦾 [TypeScript](https://www.typescriptlang.org/) - type safe
|
||||||
|
- 📦 [Components auto importing](./src/components)
|
||||||
|
- 🌟 [Icons](./src/components) - Access to icons from any iconset directly
|
||||||
|
- 🖥 Content Script - Use Vue 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` and Vue Composition API without importing
|
||||||
|
- [`unplugin-vue-components`](https://github.com/antfu/vite-plugin-components) - components auto import
|
||||||
|
- [`unplugin-icons`](https://github.com/antfu/unplugin-icons) - icons as components
|
||||||
|
- [Iconify](https://iconify.design) - use icons from any icon sets [🔍Icônes](https://icones.netlify.app/)
|
||||||
|
|
||||||
|
### Vue Plugins
|
||||||
|
|
||||||
|
- [VueUse](https://github.com/antfu/vueuse) - collection of useful composition APIs
|
||||||
|
|
||||||
|
### UI Frameworks
|
||||||
|
|
||||||
|
- [UnoCSS](https://github.com/unocss/unocss) - the instant on-demand Atomic CSS engine
|
||||||
|
|
||||||
|
### 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
|
||||||
|
- [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/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
|
||||||
|
|
||||||
|
- `src` - main source.
|
||||||
|
- `contentScript` - scripts and components to be injected as `content_script`
|
||||||
|
- `background` - scripts for background.
|
||||||
|
- `components` - auto-imported Vue components that are shared in popup and options page.
|
||||||
|
- `styles` - styles shared in popup and options page
|
||||||
|
- `assets` - assets used in Vue components
|
||||||
|
- `manifest.ts` - manifest for the extension.
|
||||||
|
- `extension` - extension package root.
|
||||||
|
- `assets` - static assets (mainly for `manifest.json`).
|
||||||
|
- `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.
|
||||||
|
|
||||||
|
## Credits
|
||||||
|
|
||||||
|
[](https://volta.net)
|
||||||
|
|
||||||
|
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).
|
||||||
|
|||||||
132
README.md.~1~
132
README.md.~1~
@ -1,132 +0,0 @@
|
|||||||
# 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.
|
|
||||||
|
|
||||||
<p align="center">
|
|
||||||
<sub>Popup</sub><br/>
|
|
||||||
<img width="655" src="https://user-images.githubusercontent.com/11247099/126741643-813b3773-17ff-4281-9737-f319e00feddc.png"><br/>
|
|
||||||
<sub>Options Page</sub><br/>
|
|
||||||
<img width="655" src="https://user-images.githubusercontent.com/11247099/126741653-43125b62-6578-4452-83a7-bee19be2eaa2.png"><br/>
|
|
||||||
<sub>Inject Vue App into the Content Script</sub><br/>
|
|
||||||
<img src="https://user-images.githubusercontent.com/11247099/130695439-52418cf0-e186-4085-8e19-23fe808a274e.png">
|
|
||||||
</p>
|
|
||||||
|
|
||||||
## Features
|
|
||||||
|
|
||||||
- ⚡️ **Instant HMR** - use **Vite** on dev (no more refresh!)
|
|
||||||
- 🥝 Vue 3 - Composition API, [`<script setup>` 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
|
|
||||||
- 🌈 [UnoCSS](https://github.com/unocss/unocss) - The instant on-demand Atomic CSS engine.
|
|
||||||
- 🦾 [TypeScript](https://www.typescriptlang.org/) - type safe
|
|
||||||
- 📦 [Components auto importing](./src/components)
|
|
||||||
- 🌟 [Icons](./src/components) - Access to icons from any iconset directly
|
|
||||||
- 🖥 Content Script - Use Vue 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` and Vue Composition API without importing
|
|
||||||
- [`unplugin-vue-components`](https://github.com/antfu/vite-plugin-components) - components auto import
|
|
||||||
- [`unplugin-icons`](https://github.com/antfu/unplugin-icons) - icons as components
|
|
||||||
- [Iconify](https://iconify.design) - use icons from any icon sets [🔍Icônes](https://icones.netlify.app/)
|
|
||||||
|
|
||||||
### Vue Plugins
|
|
||||||
|
|
||||||
- [VueUse](https://github.com/antfu/vueuse) - collection of useful composition APIs
|
|
||||||
|
|
||||||
### UI Frameworks
|
|
||||||
|
|
||||||
- [UnoCSS](https://github.com/unocss/unocss) - the instant on-demand Atomic CSS engine
|
|
||||||
|
|
||||||
### 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
|
|
||||||
- [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/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
|
|
||||||
|
|
||||||
- `src` - main source.
|
|
||||||
- `contentScript` - scripts and components to be injected as `content_script`
|
|
||||||
- `background` - scripts for background.
|
|
||||||
- `components` - auto-imported Vue components that are shared in popup and options page.
|
|
||||||
- `styles` - styles shared in popup and options page
|
|
||||||
- `assets` - assets used in Vue components
|
|
||||||
- `manifest.ts` - manifest for the extension.
|
|
||||||
- `extension` - extension package root.
|
|
||||||
- `assets` - static assets (mainly for `manifest.json`).
|
|
||||||
- `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.
|
|
||||||
|
|
||||||
## Credits
|
|
||||||
|
|
||||||
[](https://volta.net)
|
|
||||||
|
|
||||||
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).
|
|
||||||
Loading…
x
Reference in New Issue
Block a user