I have been using Vue.js for awhile now, and when I started working on the Coins extension I wanted to be able to quickly prototype and find a build process that makes it really easy for development and deployment. It was fun creating the Coins extension using the power of Vue.js and I wanted to share what worked for me.
Here's the template I created to get started: vue-chrome-template
This template includes a webpack config that will build to local and production. In this case, production means that it will be ready for the Chrome web store. Vue.js extensions are easy if you have the build process figured out (see
webpack.config.js in template).
manifest.json file that you'll want to edit to set up your extensions details for Chrome. Currently, it contains only a few required fields.
Follow these steps to get your local development environment up and running:
- Download or fork the template
- Once npm installs everything properly, run
npm run dev
- If you'd like to test the extension, run
npm run build, this will build into a folder called
extension/. Load this folder in Chrome's extensions page.
- (Optional) Use nvm to manage your node version
Tips for development
When working on your Chrome extension, I suggest using the pre-configured
npm run dev command and just testing it inside a regular tab. You can access it at
http://localhost:8081 and it'll refresh as you make changes too.
When doing local development, you'll want to make sure to put everything inside the
src directory in which the existing Vue app lives.
Use a fixed width in the app when doing local development, I usually put a 1px border around my app so it's easier to tell what the size will be.
Make sure to set your app's details properly in
manifest.json and you'll notice the template is set up for a browser action (Chrome dev docs).
Building for Production
When you're ready to deploy your app to the Chrome web store, you'll want to run
npm run build and then zip up the
extension/ directory (Chrome requires that all extensions are uploaded as a
.zip). Whenever you're ready to upload, Chrome will require that the extension have a different version than what's been uploaded before
Please leave feedback and questions as comments below. This is one of my posts that's a tutorial and I would love to get constructive feedback.