52 lines
1.4 KiB
Markdown
52 lines
1.4 KiB
Markdown
|
# WebExtension Template
|
||
|
|
|
||
|
|
> An opinionated WebExtension template.
|
||
|
|
|
||
|
|
* Building with [Vite] and [vite-plugin-web-extension]
|
||
|
|
* Packaging with [git-archive], [pnpm] and [web-ext]
|
||
|
|
* [Sass] and [TypeScript] preconfigured
|
||
|
|
* [Stylelint] and [XO] code linting
|
||
|
|
* [HTM] and [Preact] frontend development
|
||
|
|
* Typed browser APIs with [webextension-polyfill]
|
||
|
|
|
||
|
|
## Usage
|
||
|
|
|
||
|
|
1. Download the repository.
|
||
|
|
2. Install the dependencies.
|
||
|
|
* Optionally update the dependencies too.
|
||
|
|
3. Start an auto-reloading browser instance for development.
|
||
|
|
4. Check for linting and TypeScript errors.
|
||
|
|
5. Build the WebExtension for production.
|
||
|
|
|
||
|
|
```sh
|
||
|
|
# Step 1.
|
||
|
|
pnpx degit Holllo/web-ext-template your-awesome-project
|
||
|
|
cd your-awesome-project
|
||
|
|
|
||
|
|
# Step 2.
|
||
|
|
pnpm install
|
||
|
|
pnpm update --latest
|
||
|
|
|
||
|
|
# Step 3, you can change which browser to use in the Vite config.
|
||
|
|
pnpm start
|
||
|
|
|
||
|
|
# Step 4.
|
||
|
|
pnpm test
|
||
|
|
|
||
|
|
# Step 5, see the web-ext-artifacts directory for output.
|
||
|
|
pnpm build
|
||
|
|
```
|
||
|
|
|
||
|
|
[git-archive]: https://git-scm.com/docs/git-archive
|
||
|
|
[HTM]: https://github.com/developit/htm
|
||
|
|
[pnpm]: https://pnpm.io
|
||
|
|
[Preact]: https://preactjs.com
|
||
|
|
[Sass]: https://sass-lang.com
|
||
|
|
[Stylelint]: https://stylelint.io
|
||
|
|
[TypeScript]: https://typescriptlang.org
|
||
|
|
[Vite]: https://vitejs.dev
|
||
|
|
[vite-plugin-web-extension]: https://github.com/aklinker1/vite-plugin-web-extension
|
||
|
|
[web-ext]: https://github.com/mozilla/web-ext
|
||
|
|
[webextension-polyfill]: https://github.com/mozilla/webextension-polyfill
|
||
|
|
[XO]: https://github.com/xojs/xo
|