vue-cli-plugin-chrome-ext
Start a chrome extension project with Vue-CLI with ease!
Logo from FontAwesome
Installation
This plugin is meant for using new project for chrome extensions. Tested on default project of Vue, Vue with TypeScript
For TypeScript
- 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.icoandpublic/index.html
For JavaScript
- 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.icoandpublic/index.html
Run Development mode and Production
- Run development mode with
npm run build-watchand adistfile 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 buildand 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
High Priority
- Add background script
- Make options to generate certain files
Medium Priority
- Move over with this template
- Clean up src and public file.
Development
Testing
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.
prompts.js
Vue CLI prompt is based on inquirer.js api.
Resources
Credit
- https://github.com/zwenza/vue-cli-plugin-build-watch
- https://github.com/RequireSun/vue-cli-plugin-chrome-extension
License
MIT