https://github.com/tchin25/vue3-typescript-web-extensions-starter

A boilerplate for web-extension development using Vue 3 and Typescript. Includes bundling with Vite and testing with Vitest. Uses Manifest v3
https://github.com/tchin25/vue3-typescript-web-extensions-starter

boilerplate manifest-v3 typescript vite vitest vue vue3 vue3-typescript web-extensions

Last synced: 2 months ago
JSON representation

A boilerplate for web-extension development using Vue 3 and Typescript. Includes bundling with Vite and testing with Vitest. Uses Manifest v3

• Host: GitHub
• URL: https://github.com/tchin25/vue3-typescript-web-extensions-starter
• Owner: tchin25
• License: mit
• Created: 2021-02-10T05:26:14.000Z (almost 4 years ago)
• Default Branch: master
• Last Pushed: 2022-11-20T01:26:17.000Z (about 2 years ago)
• Last Synced: 2023-03-05T11:38:21.636Z (almost 2 years ago)
• Topics: boilerplate, manifest-v3, typescript, vite, vitest, vue, vue3, vue3-typescript, web-extensions
• Language: TypeScript
• Homepage:
• Size: 1.4 MB
• Stars: 17
• Watchers: 2
• Forks: 3
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Vue 3 Typescript Web Extensions Starter

> *Note: This was created before [vite-plugin-web-extension](https://github.com/aklinker1/vite-plugin-web-extension), which is now definitely the better choice for a generic starter (this project now uses it instead of Webpack). This repo will continue existing as an opinionated starter for myself*

So your boy Thomas over here, while in the middle of building an app, decided to get distracted and build web extensions. And since I'm a heavy Vue user, this boilerplate came out of it.

This is a boilerplate to creating cross-browser web-extensions using Vue 3 and Typescript. It contains an example options page, popup action, background script, content script, and testing script.

It contains:

- Vue 3 and Typescript Support

- Cross-platform supporting using [webextension-polyfill](https://github.com/mozilla/webextension-polyfill)

- Dev tooling and building using [vite-plugin-web-extension](https://github.com/aklinker1/vite-plugin-web-extension)

- Testing with Vitest

- Shattered remnants of my hopes and dreams

Inspired by [this video](https://www.youtube.com/watch?v=kYl271X2LNA).

## Development

> Requires Node >=v14

1. Clone this template

2. Install dependencies with `yarn`

3. `yarn dev` to build into `dist`, launch a chromium window with the extension installed, and rebuild on file changes

4. `yarn test` to run unit tests

## Building

1. `yarn build` to build into `dist`

2. Enable dev mode in `chrome://extensions/` and upload your extension

    - If you want to develop for Firefox, you need the [web-ext cli](https://extensionworkshop.com/documentation/develop/web-ext-command-reference/)

    - Also take a look at the [dynamic browser options](https://vite-plugin-web-extension.aklinker1.io/guide/configuration.html#browser-specific-manifest-fields) in `vite-plugin-web-extension` if you don't want to use `webextension-polyfill`

## Contributing

Not gonna lie, I'm not the brightest bulb in the shed. One time I said that 5 x 22 was 1100. Pull requests are welcomed.