Skip to content

Instantly share code, notes, and snippets.

@d-bucur
Last active July 6, 2023 18:56
Show Gist options
  • Select an option

  • Save d-bucur/3de558af6f08f1443399f2e92df06ab7 to your computer and use it in GitHub Desktop.

Select an option

Save d-bucur/3de558af6f08f1443399f2e92df06ab7 to your computer and use it in GitHub Desktop.
Tools to help with scaffolding a browser extension with Vue/Vite

Vite config possible

These have an interactive configuration similar to Vite, allowing you to select the framework (Vue, React, etc.)

Vite Plugin Web Extension (lightweight pick)

https://vite-plugin-web-extension.aklinker1.io/

  • Vite: with initializer
  • Chrome and Firefox
  • Newer, works nicely, dev loads extension into separate browser profile

CRXJS

https://crxjs.dev/vite-plugin

@samrum/vite-plugin-web-extension

https://github.com/samrum/vite-plugin-web-extension

  • Chrome and Firefox
  • Vite: with initializer
  • No hot reloading, need to reload extension manually

Opinionated templates

These come with a configuration already prepared for Vue and a bunch of common dependencies for a quicker start, at the cost of a heavier distributable if you don't use everything

Vitesse webext (heavyweight pick)

https://github.com/antfu/vitesse-webext

  • Vue 2/3 with Typescript
  • Chrome and Firefox
  • Vite
  • Lots of dependencies already setup and good starting components

vite-vue3-chrome-extension-v3

https://github.com/mubaidr/vite-vue3-chrome-extension-v3

  • Vue 3 with Typescript only
  • Template built from CRXJS
  • Vite
  • Inspired by Vitesse webext, but with slightly different dependencies

vue-cli-plugin-chrome-extension-cli (Deprecated)

https://github.com/sanyu1225/vue-cli-plugin-chrome-extension-cli

  • Chrome only
  • Vue CLI only (deprecated)
  • Vue2/3
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment