Building Chrome Extension with Vue.js 2

This is fastest way to start developing chrome extension using vue-js. Maybe in future someone, or me will create vuejs-chrome-extension scaffold that will make it even simpler.

It is based on initial scaffolding of yeoman generator for chrome-extension.

Yeoman

So quick instructions, install yeoman, dependencies and generator with

npm install --global yo gulp-cli bower generator-chrome-extension

Then create new directory and inside generate a new project yo chrome-extension.

Modifications

After it is ready install additional packages:

npm install --save webpack webpack-stream babel-loader vue vue-loader css-loader vue-template-compiler babel-preset-env

In gulpfile.babel.js on top of the file add imports:

import webpackStream from 'webpack-stream';
import webpack from 'webpack'

And replace following tasks.

babel task

gulp.task('babel', () => {
  return gulp.src('app/scripts.babel')
    .pipe(webpackStream(require('./webpack.config.js'), webpack)
      .on('error', function (err) {
        console.log(err);
        this.emit('end');
      }))
    .pipe(gulp.dest('app/scripts/'))
});

watch task to watch for .vue extension changes

gulp.task('watch', ['lint', 'babel'], () => {
  $.livereload.listen();

  gulp.watch([
    'app/*.html',
    'app/scripts/**/*.js',
    'app/scripts/**/*.vue',
    'app/images/**/*',
    'app/styles/**/*',
    'app/_locales/**/*.json'
  ]).on('change', $.livereload.reload);

  gulp.watch(['app/scripts.babel/**/*.js', 'app/scripts.babel/**/*.vue'], ['lint', 'babel']);
  gulp.watch('bower.json', ['wiredep']);
});

And modify lint function:

gulp.task('lint', lint('app/scripts.babel/**/*.js', {
  env: {
    es6: true
  },
  parserOptions: {
    sourceType: 'module'
  }
}));

Create webpack.config.js in the project root and put this:

module.exports = {
    context: __dirname + '/app/scripts.babel/',
    entry: {
        background: './background.js', // remove unused
        chromereload: './chromereload.js',
        contentscript: './contentscript.js',
        popup: './popup.js',
    },
    output: { filename: '[name].js' },
    module: {
        rules: [{
            test: /\.js$/,
            loader: 'babel-loader'
        }, {
            test: /\.vue$/,
            loader: 'vue-loader'
        }]
    }
}

Note: before loading application, run gulp watch.

Bootstrapping application.

For security reasons all templates must be precompiled which requires little different bootstrap of the app.

Create one main component which will be used to bootstrap application in the popup window.

app/scripts.babel/popup/Popup.vue

And put some test content:

<template>
    <h1>Hello Vue!</h1>
</template>

and in popup.html create <div id="app"></div> then in popup.js put this:

import Vue from 'vue';
import Popup from './popup/Popup.vue';

new Vue({
    el: '#app',
    render: c => c(Popup)
});