Add template

Author: Kocal

LICENSE

@@ -0,0 +1,36 @@
+module.exports = {
+  "prompts": {
+    "name": {
+      "type": "string",
+      "required": true,
+      "message": "Project name"
+    },
+    "description": {
+      "type": "string",
+      "required": false,
+      "message": "Project description",
+      "default": "A Vue.js web extension"
+    },
+    "author": {
+      "type": "string",
+      "message": "Author"
+    },
+    "router": {
+      "type": "confirm",
+      "message": "Install vue-router?"
+    },
+    "store": {
+      "type": "confirm",
+      "message": "Install vuex?"
+    },
+    "axios": {
+      "type": "confirm",
+      "message": "Install axios?"
+    }
+  },
+  "filters": {
+    "src/store/**/*": "store",
+    "src/popup/router/**/*": "router"
+  },
+  "completeMessage": "To get started:\n\n  {{^inPlace}}cd {{destDirName}}\n  {{/inPlace}}npm install\n  npm run build"
+};

meta.js

@@ -0,0 +1,7 @@
+{
+  "presets": [
+    ["latest", {
+      "es2015": { "modules": "commonjs"}
+    }]
+  ]
+}

template/.babelrc

@@ -0,0 +1,4 @@
+/node_modules
+/*.log
+/dist
+/zip-builds

template/.gitignore

@@ -0,0 +1,31 @@
+{
+  "name": "{{ name }}",
+  "version": "1.0.0",
+  "description": "{{ description }}",
+  "author": "{{ author }}",
+  "scripts": {
+    "build": "webpack --config webpack.config.js --progress --hide-modules",
+    "watch": "npm run build -- --watch"
+  },
+  "dependencies": {
+    "vue": "^2.4.1"{{#if axios or router or store}},{{/if}}
+    {{#axios}}"axios": "^0.16.2",{{/axios}}
+    {{#router}}"vue-router": "^2.7.0",{{/router}}
+    {{#store}}"vuex": "^2.3.1",{{/store}}
+  },
+  "devDependencies": {
+    "babel-core": "^6.25.0",
+    "babel-loader": "^7.1.1",
+    "babel-preset-latest": "^6.24.1",
+    "copy-webpack-plugin": "^4.0.1",
+    "css-loader": "^0.28.4",
+    "extract-text-webpack-plugin": "^3.0.0",
+    "file-loader": "^0.11.2",
+    "node-sass": "^4.5.3",
+    "sass-loader": "^6.0.6",
+    "vue-loader": "^12.2.2",
+    "vue-template-compiler": "^2.4.1",
+    "webpack": "^3.3.0",
+    "webpack-shell-plugin": "^0.5.0"
+  }
+}

template/package.json

@@ -0,0 +1,33 @@
+#!/usr/bin/env python
+
+from __future__ import print_function
+
+import os
+import json
+import shutil
+
+BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))
+EXTENSION_DIR = os.path.join(BASE_DIR, '../src')
+DIST_DIR = os.path.join(BASE_DIR, '../zip-builds')
+
+
+def extract_extension_data():
+    with open(EXTENSION_DIR + '/manifest.json') as content:
+        content_json = json.load(content)
+        name = content_json.get('name')
+        extension_version = content_json.get('version')
+
+    return [name, extension_version]
+
+
+def main():
+    [name, version] = extract_extension_data()
+    zip_name = '{}/{}-v{}'.format(DIST_DIR, name, version)
+
+    print('Building {}.zip'.format(zip_name))
+    shutil.make_archive(zip_name, 'zip', EXTENSION_DIR)
+    print('Ok')
+
+
+if __name__ == '__main__':
+    main()

template/scripts/build-zip.py

@@ -0,0 +1,20 @@
+#!/bin/bash
+
+set -e
+
+echo Running $0
+
+BUNDLES_PATH=dist
+BUNDLES=("background.js" "popup/popup.js")
+
+for BUNDLE in ${BUNDLES[@]};
+do
+    FILE=${BUNDLES_PATH}/${BUNDLE}
+
+    echo "Removing eval()'s from ${FILE}..."
+
+    sed -e '/This works if eval is allowed (see CSP)/,+1d' ${FILE} > ${FILE}.tmp
+    mv ${FILE}.tmp ${FILE}
+    sed -e '/This works if the window reference is available/,+2d' ${FILE} > ${FILE}.tmp
+    mv ${FILE}.tmp ${FILE}
+done

template/scripts/remove-evals.sh

@@ -0,0 +1,3 @@
+{{#if store}}import store from './store';{{/if}}
+
+alert(`Hello ${store.getters.foo}!`);

template/src/background.js

@@ -0,0 +1,19 @@
+{
+  "name": "{{ name }}",
+  "description": "{{ description }}",
+  "version": "1.0.0",
+  "manifest_version": 2,
+  "icons": {
+    "48": "icons/icon_48.png",
+    "128": "icons/icon_128.png"
+  },
+  "browser_action": {
+    "default_title": "{{ name }}",
+    "default_popup": "popup/popup.html"
+  },
+  "background": {
+    "scripts": [
+      "background.js"
+    ]
+  }
+}

template/src/icons/icon.xcf

@@ -0,0 +1,25 @@
+<template>
+  <div>
+    {{#if router}}
+    <router-view></router-view>
+    {{else}}
+    <p>Hello world!</p>
+    {{/if}}
+  </div>
+</template>
+
+<script>
+  export default {
+    data () {
+      return {}
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  {{#unless router}}
+  p {
+    font-size: 20px;
+  }
+  {{/unless}}
+</style>

template/src/icons/icon_128.png

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>Title</title>
+</head>
+<body>
+  <div id="app">
+
+  </div>
+  <script src="popup.js"></script>
+</body>
+</html>

template/src/icons/icon_48.png

@@ -0,0 +1,11 @@
+import Vue from 'vue';
+import App from './App.vue';
+{{#if store}}import store from './../store';{{/if}}
+{{#if router}}import router from './router';{{/if}}
+
+new Vue({
+  el: '#app',
+  {{#if store}}store,{{/if}}
+  {{#if router}}router,{{/if}}
+  render: h => h(App)
+});

template/src/manifest.json

@@ -0,0 +1,6 @@
+import VueRouter from 'vue-router';
+import routes from './routes';
+
+export default new VueRouter({
+  routes
+});

template/src/popup/App.vue

@@ -0,0 +1,17 @@
+<template>
+  <p>Hello world!</p>
+</template>
+
+<script>
+  export default {
+    data () {
+      return {}
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  p {
+    font-size: 20px;
+  }
+</style>

template/src/popup/popup.html

@@ -0,0 +1,6 @@
+export default [
+  {
+    path: '/',
+    component: require('./pages/Index.vue')
+  },
+];

template/src/popup/popup.js

@@ -0,0 +1,5 @@
+import * as types from './mutation-types'
+
+export const setFoo = ({commit, state}, payload) => {
+  commit(types.UPDATE_FOO, payload);
+};

template/src/popup/router/index.js

@@ -0,0 +1 @@
+export const foo = (state) => state.foo;

template/src/popup/router/pages/Index.vue

@@ -0,0 +1,17 @@
+import Vue from 'vue'
+import Vuex from 'vuex'
+
+import * as getters from './getters'
+import * as mutations from './mutations'
+import * as actions from './actions'
+
+Vue.use(Vuex);
+
+export default new Vuex.Store({
+  state: {
+    foo: 'bar'
+  },
+  getters,
+  mutations,
+  actions,
+})

template/src/popup/router/routes.js

@@ -0,0 +1 @@
+export const UPDATE_FOO = 'UPDATE_FOO';

template/src/store/actions.js

@@ -0,0 +1,7 @@
+import * as types from './mutation-types';
+
+export default {
+  [types.UPDATE_FOO] (state, payload) {
+    state.foo = payload;
+  }
+}

template/src/store/getters.js

@@ -0,0 +1,74 @@
+const webpack = require('webpack');
+const ExtractTextPlugin = require("extract-text-webpack-plugin");
+const WebpackShellPlugin = require('webpack-shell-plugin');
+const CopyWebpackPlugin = require('copy-webpack-plugin');
+
+const config = {
+  context: __dirname + '/src',
+  entry: {
+    'background': './background.js',
+    'popup/popup': './popup/popup.js'
+  },
+  output: {
+    path: __dirname + '/dist',
+    filename: '[name].js'
+  },
+  resolve: {
+    extensions: ['.js', '.vue'],
+  },
+  // other options...
+  module: {
+    loaders: [
+      {
+        test: /\.vue$/,
+        loaders: 'vue-loader',
+        options: {
+          loaders: {
+            scss: ExtractTextPlugin.extract({
+              use: 'css-loader!sass-loader',
+              fallback: 'vue-style-loader'
+            }),
+            sass: ExtractTextPlugin.extract({
+              use: 'css-loader!sass-loader?indentedSyntax',
+              fallback: 'vue-style-loader'
+            }),
+          }
+        }
+      },
+      {
+        test: /\.js$/,
+        loader: 'babel-loader',
+        exclude: /node_modules/
+      },
+      {
+        test: /\.css$/,
+        use: ExtractTextPlugin.extract({
+          use: "css-loader",
+          fallback: "vue-loader",
+        })
+      },
+      {
+        test: /\.(png|jpg|gif|svg|ico)$/,
+        loader: 'file-loader',
+        options: {
+          name: '[name].[ext]?emitFile=false'
+        }
+      }
+    ],
+  },
+  plugins: [
+    new ExtractTextPlugin({
+      filename: '[name].css'
+    }),
+    new CopyWebpackPlugin([
+      {from: 'icons', to: 'icons'},
+      {from: 'popup/popup.html', to: 'popup/popup.html'},
+      {from: 'manifest.json', to: 'manifest.json'}
+    ]),
+    new WebpackShellPlugin({
+      onBuildEnd: ['bash scripts/remove-evals.sh']
+    }),
+  ]
+};
+
+module.exports = config;