Start a chrome extension project with Vue-CLI UI (vue ui / vue ui -D) with ease!
Logo from FontAwesome
This plugin is meant for using new project for chrome extensions. Tested on default project of Vue, Vue with 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 ui-chrome-extension
.
- Create a new project with
vue create test-project
. - Then, add this plugin with
vue add ui-chrome-extension
.
- Run development mode with
npm run build-watch
and adist
file will be generated. 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.
- Generate manifest.json
- Generate icons
- Generate background.js
- Generate popup.html
- Generate options.html
- Emit file out
- Support TypeScript (only generated with
vue add typescript
)
Currently, testing is done manually with the file ./auto.sh
/ ./auto.bat
, by passing -r
flag, it will delete the initial file generated.
Test production code in npm as well with ./prod.sh
/ ./prod.bat
.
Vue CLI prompt is based on inquirer.js api.
- https://itnext.io/how-to-build-a-simple-vue-cli-plugin-a2e1323de1a0
- https://cli.vuejs.org/zh/dev-guide/plugin-dev.html
- https://github.com/zwenza/vue-cli-plugin-build-watch
- https://github.com/RequireSun/vue-cli-plugin-chrome-extension
- https://github.com/sxei/chrome-plugin-demo
- https://github.com/superoo7/vue-cli-plugin-chrome-ext
MIT