Building a Chrome extension using Vue.js

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

Overview

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). 

There's a 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.

Getting started

Follow these steps to get your local development environment up and running:

• Download or fork the template
• Run npm install
• 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.