vue-cli-plugin-chrome-ext


Start a chrome extension project with Vue-CLI with ease!

!chrome logo

_Logo from FontAwesome_

Installation

This plugin is meant for using new project for chrome extensions. Tested on default project of Vue, Vue with TypeScript

$3

- Create a new project with vue create test-project, and select typescript without class-style component syntax
- Then, add this plugin with vue add chrome-ext.
- Clean up the repo by removing src/main.ts, src/components, public/favicon.ico and public/index.html

$3

- Create a new project with vue create test-project.
- Then, add this plugin with vue add chrome-ext.
- Clean up the repo by removing src/main.js, src/components, public/favicon.ico and public/index.html

$3

- Run development mode with npm run build-watch and a dist file will be generated. Install Extension Reloader to reload chrome extensions easily everytime you reload.Install Extension Reloader to reload chrome extensions easily everytime you reload. (take note that when u change manifest.json file, it will not automatically load, you need to remove and add the chrome extensions)
- Build for production npm run build and zip it and deploy onto chrome store.

Current feature

- Generate manifest.json
- Generate popup.html
- Generate options.html
- Emit file out
- Support TypeScript (only generated with vue add typescript)

TODO

$3

- Add background script
- Make options to generate certain files

$3

- Move over with this template
- Clean up src and public file.

Development

$3

#### Development

Currently, testing is done manually with the file ./auto.sh, by passing -r flag, it will delete the initial file generated.

#### Production

Test production code in npm as well with ./prod.sh.

$3

Vue CLI prompt is based on inquirer.js api.

Resources

- https://itnext.io/how-to-build-a-simple-vue-cli-plugin-a2e1323de1a0

Credit

- https://github.com/zwenza/vue-cli-plugin-build-watch
- https://github.com/RequireSun/vue-cli-plugin-chrome-extension

License

MIT