bootstrap project with kocal/vue-web-extension

.babelrc

@@ -0,0 +1,15 @@
+{
+  "plugins": [
+    "@babel/plugin-proposal-optional-chaining"
+  ],
+  "presets": [
+    ["@babel/preset-env", {
+      "useBuiltIns": "usage",
+      "corejs": 3,
+      "targets": {
+        // https://jamie.build/last-2-versions
+        "browsers": ["> 0.25%", "not ie 11", "not op_mini all"]
+      }
+    }]
+  ]
+}

.gitignore

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

package.json

@@ -0,0 +1,43 @@
+{
+  "name": "simplelogin-extension",
+  "version": "1.0.0",
+  "description": "SimpleLogin Browser Extension",
+  "author": "son@simplelogin.io",
+  "license": "MIT",
+  "scripts": {
+    "prettier": "prettier \"src/**/*.{js,vue}\"",
+    "prettier:write": "npm run prettier -- --write",
+    "build": "cross-env NODE_ENV=production webpack --hide-modules",
+    "build:dev": "cross-env NODE_ENV=development webpack --hide-modules",
+    "build-zip": "node scripts/build-zip.js",
+    "watch": "npm run build -- --watch",
+    "watch:dev": "cross-env HMR=true npm run build:dev -- --watch"
+  },
+  "dependencies": {
+    "vue": "^2.6.10",
+    "webextension-polyfill": "^0.3.1"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.1.2",
+    "@babel/plugin-proposal-optional-chaining": "^7.0.0",
+    "@babel/preset-env": "^7.1.0",
+    "@babel/runtime-corejs3": "^7.4.0",
+    "archiver": "^3.0.0",
+    "babel-loader": "^8.0.2",
+    "copy-webpack-plugin": "^4.5.3",
+    "core-js": "^3.0.1",
+    "cross-env": "^5.2.0",
+    "css-loader": "^2.1.1",
+    "ejs": "^2.6.1",
+    "file-loader": "^1.1.11",
+    "mini-css-extract-plugin": "^0.4.4",
+    "node-sass": "^4.9.3",
+    "sass-loader": "^7.1.0",
+    "vue-loader": "^15.4.2",
+    "vue-template-compiler": "^2.6.10",
+    "web-ext-types": "^2.1.0",
+    "webpack": "^4.20.2",
+    "webpack-cli": "^3.1.2",
+    "webpack-extension-reloader": "^1.1.0"
+  }
+}

scripts/build-zip.js

@@ -0,0 +1,53 @@
+#!/usr/bin/env node
+
+const fs = require('fs');
+const path = require('path');
+const archiver = require('archiver');
+
+const DEST_DIR = path.join(__dirname, '../dist');
+const DEST_ZIP_DIR = path.join(__dirname, '../dist-zip'); 
+
+const extractExtensionData = () => {
+  const extPackageJson = require('../package.json');
+
+  return {
+    name: extPackageJson.name,
+    version: extPackageJson.version
+  }
+};
+
+const makeDestZipDirIfNotExists = () => {
+  if(!fs.existsSync(DEST_ZIP_DIR)) {
+    fs.mkdirSync(DEST_ZIP_DIR);
+  }
+}
+
+const buildZip = (src, dist, zipFilename) => {
+  console.info(`Building ${zipFilename}...`);
+
+  const archive = archiver('zip', { zlib: { level: 9 }});
+  const stream = fs.createWriteStream(path.join(dist, zipFilename));
+  
+  return new Promise((resolve, reject) => {
+    archive
+      .directory(src, false)
+      .on('error', err => reject(err))
+      .pipe(stream);
+
+    stream.on('close', () => resolve());
+    archive.finalize();
+  });
+};
+
+const main = () => {
+  const {name, version} = extractExtensionData();
+  const zipFilename = `${name}-v${version}.zip`;
+  
+  makeDestZipDirIfNotExists();
+
+  buildZip(DEST_DIR, DEST_ZIP_DIR, zipFilename)
+    .then(() => console.info('OK'))
+    .catch(console.err); 
+};
+
+main();

src/background.js

@@ -0,0 +1,3 @@
+global.browser = require('webextension-polyfill')
+alert('Hello world!')
+

src/manifest.json

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

src/popup/App.vue

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

src/popup/popup.html

@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>Title</title>
+  <link rel="stylesheet" href="popup.css">
+  <% if (NODE_ENV === 'development') { %>
+  <!-- Load some resources only in development environment -->
+  <% } %>
+</head>
+<body>
+  <div id="app">
+
+  </div>
+  <script src="popup.js"></script>
+</body>
+</html>

src/popup/popup.js

@@ -0,0 +1,15 @@
+import Vue from 'vue'
+import App from './App'
+
+
+
+global.browser = require('webextension-polyfill')
+Vue.prototype.$browser = global.browser
+
+/* eslint-disable no-new */
+new Vue({
+  el: '#app',
+  
+  
+  render: h => h(App)
+})

webpack.config.js

@@ -0,0 +1,119 @@
+const webpack = require('webpack');
+const ejs = require('ejs');
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+const CopyWebpackPlugin = require('copy-webpack-plugin');
+const ExtensionReloader = require('webpack-extension-reloader');
+const { VueLoaderPlugin } = require('vue-loader');
+const { version } = require('./package.json');
+
+const config = {
+  mode: process.env.NODE_ENV,
+  context: __dirname + '/src',
+  entry: {
+    'background': './background.js',
+    'popup/popup': './popup/popup.js',
+  },
+  output: {
+    path: __dirname + '/dist',
+    filename: '[name].js',
+  },
+  resolve: {
+    extensions: ['.js', '.vue'],
+  },
+  module: {
+    rules: [
+      {
+        test: /\.vue$/,
+        loaders: 'vue-loader',
+      },
+      {
+        test: /\.js$/,
+        loader: 'babel-loader',
+        exclude: /node_modules/,
+      },
+      {
+        test: /\.css$/,
+        use: [MiniCssExtractPlugin.loader, 'css-loader'],
+      },
+      {
+        test: /\.scss$/,
+        use: [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader'],
+      },
+      {
+        test: /\.sass$/,
+        use: [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader?indentedSyntax'],
+      },
+      {
+        test: /\.(png|jpg|jpeg|gif|svg|ico)$/,
+        loader: 'file-loader',
+        options: {
+          name: '[name].[ext]',
+          outputPath: '/images/',
+          emitFile: false,
+        },
+      },
+      {
+        test: /\.(woff(2)?|ttf|eot|svg)(\?v=\d+\.\d+\.\d+)?$/,
+        loader: 'file-loader',
+        options: {
+          name: '[name].[ext]',
+          outputPath: '/fonts/',
+          emitFile: false,
+        },
+      },
+    ],
+  },
+  plugins: [
+    new webpack.DefinePlugin({
+      global: 'window',
+    }),
+    new VueLoaderPlugin(),
+    new MiniCssExtractPlugin({
+      filename: '[name].css',
+    }),
+    new CopyWebpackPlugin([
+      { from: 'icons', to: 'icons', ignore: ['icon.xcf'] },
+      { from: 'popup/popup.html', to: 'popup/popup.html', transform: transformHtml },
+      {
+        from: 'manifest.json',
+        to: 'manifest.json',
+        transform: (content) => {
+          const jsonContent = JSON.parse(content);
+          jsonContent.version = version;
+
+          if (config.mode === 'development') {
+            jsonContent['content_security_policy'] = "script-src 'self' 'unsafe-eval'; object-src 'self'";
+          }
+
+          return JSON.stringify(jsonContent, null, 2);
+        },
+      },
+    ]),
+  ],
+};
+
+if (config.mode === 'production') {
+  config.plugins = (config.plugins || []).concat([
+    new webpack.DefinePlugin({
+      'process.env': {
+        NODE_ENV: '"production"',
+      },
+    }),
+  ]);
+}
+
+if (process.env.HMR === 'true') {
+  config.plugins = (config.plugins || []).concat([
+    new ExtensionReloader({
+      manifest: __dirname + '/src/manifest.json',
+    }),
+  ]);
+}
+
+function transformHtml(content) {
+  return ejs.render(content.toString(), {
+    ...process.env,
+  });
+}
+
+module.exports = config;