FireQQTW/vue-web-extension

🛠️ A boilerplate for quickly starting a web extension with Vue, webpack 4, ESLint and more!

vue-web-extension

This template allows you to quickly start a web extension containing:

• Boilerplate for manifest.json and background.js files, and for icons / popup folders
• Vue
• Vue-router (configurable)
• Vuex (configurable)
• Axios (configurable)
• Webpack 4
• Babel with preset-env
• ESLint (configurable)
• Prettier (configurable)
• A git precommit hook for running Prettier by using pretty-quick or precise-commits (configurable)
• CSS extraction, with mini-css-extract-plugin
• Compliable with the Content Security Policy of Chrome and Firefox web stores (some usages eval are removed)
• A script to package your extension into a .zip file

Requirements

• Node.js >= 10 and npm >= 5
• git
• vue-cli 2

Documentation

The documentation can be found on vue-web-extension.netlify.app. Please check the documentation website and the open and closed issues, before raising a new issue.

Usage

$ vue init kocal/vue-web-extension my-extension
$ cd my-extension
$ npm install
$ npm run build

npm run build

Build the extension into dist folder for production.

npm run build:dev

Build the extension into dist folder for development.

npm run watch

Watch for modifications then run npm run build.

npm run watch:dev

Watch for modifications then run npm run build:dev.

It also enable Hot Module Reloading, thanks to webpack-extension-reloader plugin.

⚠️ Keep in mind that HMR only works for your background entry.

npm run build-zip

Build a zip file following this format <name>-v<version>.zip, by reading name and version from manifest.json file. Zip file is located in dist-zip folder.