First commit

.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"]
+      }
+    }]
+  ]
+}

.eslintrc.js

@@ -0,0 +1,31 @@
+// https://eslint.org/docs/user-guide/configuring
+// File taken from https://github.com/vuejs-templates/webpack/blob/1.3.1/template/.eslintrc.js, thanks.
+
+module.exports = {
+  root: true,
+  parserOptions: {
+    parser: 'babel-eslint',
+  },
+  env: {
+    browser: true,
+    webextensions: true,
+  },
+  extends: [
+    // https://github.com/vuejs/eslint-plugin-vue#priority-a-essential-error-prevention
+    // consider switching to `plugin:vue/strongly-recommended` or `plugin:vue/recommended` for stricter rules.
+    'plugin:vue/essential',
+    // https://github.com/standard/standard/blob/master/docs/RULES-en.md
+    'standard',
+    // https://prettier.io/docs/en/index.html
+    'plugin:prettier/recommended',
+  ],
+  // required to lint *.vue files
+  plugins: ['vue'],
+  // add your custom rules here
+  rules: {
+    // allow async-await
+    'generator-star-spacing': 'off',
+    // allow debugger during development
+    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
+  },
+};

.gitignore

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

.prettierrc

@@ -0,0 +1,5 @@
+{
+    "singleQuote": true,
+    "printWidth": 180,
+    "trailingComma": "es5"
+}

package.json

@@ -0,0 +1,68 @@
+{
+  "name": "platypush",
+  "version": "1.0.0",
+  "description": "Web extension for interacting with one or more Platypush instances via browser",
+  "author": "Fabio Manganiello <info@fabiomanganiello.com>",
+  "license": "MIT",
+  "engines": {
+    "node": ">=10"
+  },
+  "scripts": {
+    "lint": "eslint --ext .js,.vue src",
+    "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"
+  },
+  "husky": {
+    "hooks": {
+      "pre-commit": "pretty-quick --staged"
+    }
+  },
+  "dependencies": {
+    "axios": "^0.19.0",
+    "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-eslint": "^10.0.3",
+    "babel-loader": "^8.0.2",
+    "copy-webpack-plugin": "^5.1.1",
+    "core-js": "^3.0.1",
+    "cross-env": "^5.2.0",
+    "css-loader": "^3.4.0",
+    "ejs": "^2.6.1",
+    "eslint": "^6.6.0",
+    "eslint-config-prettier": "^6.7.0",
+    "eslint-config-standard": "^14.1.0",
+    "eslint-friendly-formatter": "^4.0.1",
+    "eslint-loader": "^3.0.2",
+    "eslint-plugin-import": "^2.18.2",
+    "eslint-plugin-node": "^10.0.0",
+    "eslint-plugin-prettier": "^3.1.1",
+    "eslint-plugin-promise": "^4.2.1",
+    "eslint-plugin-standard": "^4.0.1",
+    "eslint-plugin-vue": "^6.0.1",
+    "file-loader": "^5.0.2",
+    "husky": "^2.4.0",
+    "mini-css-extract-plugin": "^0.9.0",
+    "node-sass": "^4.9.3",
+    "prettier": "^1.17.1",
+    "pretty-quick": "^1.8.0",
+    "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.3.10",
+    "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,2 @@
+global.browser = require('webextension-polyfill');
+alert('Hello world!');

src/manifest.json

@@ -0,0 +1,32 @@
+{
+  "name": "platypush",
+  "description": "Web extension for interacting with one or more Platypush instances via browser",
+  "version": "0.1",
+  "manifest_version": 2,
+  "icons": {
+    "16": "icons/icon-16.png",
+    "32": "icons/icon-32.png",
+    "48": "icons/icon-48.png",
+    "64": "icons/icon-64.png"
+  },
+  "permissions": ["activeTab", "storage", "notifications"],
+
+  "browser_action": {
+    "default_title": "platypush",
+    "default_popup": "popup/popup.html"
+  },
+
+  "background": {
+    "scripts": ["background.js"]
+  },
+  "options_ui": {
+    "page": "options/options.html",
+    "chrome_style": true
+  },
+  "content_scripts": [
+    {
+      "matches": ["*://*/*"],
+      "css": ["style.css"]
+    }
+  ]
+}

src/options/App.vue

@@ -0,0 +1,335 @@
+<template>
+  <div class="container">
+    <ul class="hosts">
+      <li class="host" v-for="(host, i) in hosts" :key="i" :class="{ selected: i === selectedHost }" @click="selectHost(i)">
+        <i class="fas fa-hdd" /> &nbsp; {{ host.name }}
+        <ul class="host-menu" v-if="i === selectedHost">
+          <li v-for="(option, name) in hostOptions" :key="name" :class="{ selected: selectedHostOption === name }" @click.stop="selectHostOption(name)">
+            <i :class="option.iconClass" /> &nbsp; {{ option.displayName }}
+          </li>
+        </ul>
+      </li>
+      <li class="add" :class="{ selected: isAddHost }" @click="selectAddHost"><i class="fas fa-plus" /> &nbsp; Add Device</li>
+    </ul>
+
+    <div class="body">
+      <div class="page add" v-if="isAddHost">
+        <h2>Add a new device</h2>
+        <form class="host-form" ref="addHostForm" @submit.prevent="addHost">
+          <input type="text" name="name" placeholder="Name" autocomplete="off" :disabled="loading" />
+          <input type="text" name="address" placeholder="IP or hostname" @keyup="onAddrChange($refs.addHostForm)" autocomplete="off" :disabled="loading" />
+          <input type="text" name="port" value="8008" placeholder="HTTP port" @keyup="onPortChange($refs.addHostForm)" autocomplete="off" :disabled="loading" />
+          <input type="text" name="websocketPort" value="8009" placeholder="Websocket port" autocomplete="off" :disabled="loading" />
+          <input type="text" name="token" placeholder="Access token" autocomplete="off" :disabled="loading" />
+          <input type="submit" value="Add" :disabled="loading" />
+        </form>
+      </div>
+
+      <div class="page local-procedures" v-else-if="selectedHostOption === 'localProc'">
+        <h2>Procedures stored on browser</h2>
+      </div>
+
+      <div class="page remote-procedures" v-else-if="selectedHostOption === 'remoteProc'">
+        <h2>Procedures stored on server</h2>
+      </div>
+
+      <div class="page run" v-else-if="selectedHostOption === 'run'">
+        <h2>Run a command on {{ hosts[selectedHost].name }}</h2>
+        <form class="run-form" ref="runForm" @submit.prevent="runAction">
+          <input type="text" name="action" placeholder="Action name (e.g. light.hue.on)" autocomplete="off" :disabled="loading" />
+          <input type="submit" value="Run" :disabled="loading" />
+        </form>
+      </div>
+
+      <div class="page edit" v-else-if="selectedHost >= 0">
+        <h2>Edit device {{ hosts[selectedHost].name }}</h2>
+        <form class="host-form" ref="editHostForm" @submit.prevent="editHost">
+          <input type="text" name="name" placeholder="Name" :value="hosts[selectedHost].name" autocomplete="off" :disabled="loading" />
+          <input type="text" name="address" placeholder="IP or hostname" :value="hosts[selectedHost].address" autocomplete="off" :disabled="loading" />
+          <input
+            type="text"
+            name="port"
+            placeholder="HTTP port"
+            autocomplete="off"
+            :value="hosts[selectedHost].port"
+            @keyup="onPortChange($refs.editHostForm)"
+            :disabled="loading"
+          />
+          <input type="text" name="websocketPort" :value="hosts[selectedHost].websocketPort" placeholder="Websocket port" autocomplete="off" :disabled="loading" />
+          <input type="text" name="token" placeholder="Access token" :value="hosts[selectedHost].token" autocomplete="off" :disabled="loading" />
+          <input type="submit" value="Edit" :disabled="loading" />
+          <button type="button" @click="removeHost" :disabled="loading">Remove</button>
+        </form>
+      </div>
+
+      <div class="none" v-else>
+        Select an option from the menu
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'App',
+  data() {
+    return {
+      hosts: [],
+      selectedHost: -1,
+      selectedHostOption: null,
+      isAddHost: false,
+      loading: false,
+    };
+  },
+
+  computed: {
+    hostOptions() {
+      return {
+        localProc: {
+          displayName: 'Local Procedures',
+          iconClass: 'fas fa-puzzle-piece',
+        },
+        remoteProc: {
+          displayName: 'Remote Procedures',
+          iconClass: 'fas fa-database',
+        },
+        run: {
+          displayName: 'Run Action',
+          iconClass: 'fas fa-play',
+        },
+      };
+    },
+  },
+
+  methods: {
+    selectHost(i) {
+      this.selectedHost = i;
+      this.selectedHostOption = null;
+      this.isAddHost = false;
+    },
+
+    selectHostOption(option) {
+      this.selectedHostOption = option;
+    },
+
+    selectAddHost() {
+      this.selectedHost = -1;
+      this.isAddHost = true;
+    },
+
+    onAddrChange(form) {
+      if (form.name.value.length && !form.address.value.startsWith(form.name.value)) {
+        return;
+      }
+
+      form.name.value = form.address.value;
+    },
+
+    onPortChange(form) {
+      if (isNaN(form.port.value)) return;
+      form.websocketPort.value = '' + (parseInt(form.port.value) + 1);
+    },
+
+    isPortValid(port) {
+      port = parseInt(port);
+      return !(isNaN(port) || port < 1 || port > 65535);
+    },
+
+    async addHost() {
+      this.loading = true;
+
+      try {
+        const host = this.formToHost(this.$refs.addHostForm);
+        const dupHosts = this.hosts.filter(h => h.name === host.name || (h.address === host.address && h.port === host.port));
+        if (dupHosts.length) {
+          throw new Error('This device is already defined');
+        }
+
+        this.hosts.push(host);
+        await this.saveHosts();
+        this.selectedHost = this.hosts.length - 1;
+        this.isAddHost = false;
+      } finally {
+        this.loading = false;
+      }
+    },
+
+    async editHost() {
+      this.loading = true;
+
+      try {
+        this.hosts[this.selectedHost] = this.formToHost(this.$refs.editHostForm);
+        await this.saveHosts();
+      } finally {
+        this.loading = false;
+      }
+    },
+
+    async removeHost() {
+      const host = this.hosts[this.selectedHost];
+      if (!confirm('Are you sure that you want to remove the device ' + host.name + '?')) {
+        return;
+      }
+
+      this.loading = true;
+
+      try {
+        const i = this.selectedHost;
+        if (!this.hosts.length) {
+          this.selectedHost = -1;
+        } else if (i > 0) {
+          this.selectedHost = i - 1;
+        } else {
+          this.selectedHost = 0;
+        }
+
+        this.hosts.splice(i, 1);
+        await this.saveHosts();
+      } finally {
+        this.loading = false;
+      }
+    },
+
+    async loadHosts() {
+      this.loading = true;
+
+      try {
+        const response = await browser.storage.local.get('hosts');
+        this.hosts = JSON.parse(response.hosts);
+      } finally {
+        this.loading = false;
+      }
+    },
+
+    async saveHosts() {
+      await browser.storage.local.set({ hosts: JSON.stringify(this.hosts) });
+    },
+
+    formToHost(form) {
+      return {
+        name: form.name.value,
+        address: form.address.value,
+        port: parseInt(form.port.value),
+        websocketPort: parseInt(form.websocketPort.value),
+        token: form.token.value,
+      };
+    },
+  },
+
+  created() {
+    this.loadHosts();
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.container {
+  display: flex;
+  height: 100vh;
+  font-size: 14px;
+  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Ubuntu, 'Helvetica Neue', sans-serif;
+}
+
+a,
+a:visited {
+  color: initial;
+  text-decoration: underline dotted #888;
+}
+
+a:hover {
+  opacity: 0.7;
+}
+
+h2 {
+  font-size: 1.2em;
+  margin-bottom: 0.75em;
+  padding-bottom: 0.75em;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+}
+
+.hosts {
+  width: 25%;
+  background: rgba(0, 0, 0, 0.7);
+  color: white;
+  margin: 0;
+  padding: 0;
+  box-shadow: 1px 1px 1.5px 1px rgba(0, 0, 0, 0.5);
+
+  li {
+    display: block;
+    cursor: pointer;
+    padding: 1em;
+    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
+
+    &:hover {
+      background-color: rgba(90, 140, 120, 1);
+    }
+
+    &.selected {
+      background-color: rgba(80, 120, 110, 0.8);
+    }
+  }
+
+  .host.selected {
+    padding-bottom: 0;
+  }
+}
+
+.host-menu {
+  margin: 0.5em -1em auto -1em;
+  padding-left: 0;
+
+  li {
+    list-style-type: none;
+    padding: 0.75em 2em;
+    border-bottom: 0;
+
+    &.selected {
+      background-color: rgba(60, 140, 120, 0.9);
+      padding-bottom: 0.75em;
+    }
+  }
+}
+
+.body {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  overflow: auto;
+
+  .none {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 1.5em;
+    opacity: 0.4;
+  }
+}
+
+.page {
+  width: 100%;
+  padding: 0 1em;
+}
+
+form {
+  input[type='text'] {
+    display: block;
+    margin-bottom: 0.5em;
+    border-radius: 1em;
+    padding: 0.4em;
+    border: 1px solid rgba(0, 0, 0, 0.2);
+
+    &:hover {
+      border: 1px solid rgba(40, 235, 70, 0.3);
+    }
+
+    &:focus {
+      border: 1px solid rgba(40, 235, 70, 0.7);
+    }
+  }
+}
+</style>
+
+<!-- vim:sw=2:ts=2:et: -->

src/options/options.html

@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Platypush - Options</title>
+    <link rel="stylesheet" href="options.css" />
+    <link rel="stylesheet" href="//fonts.googleapis.com/css?family=Roboto:300,300italic,700,700italic" />
+    <link
+      rel="stylesheet"
+      href="https://use.fontawesome.com/releases/v5.12.0/css/all.css"
+      integrity="sha384-REHJTs1r2ErKBuJB0fCK99gCYsVjwxHrSU0N7I1zl9vZbggVJXRMsv/sLlOAGb4M"
+      crossorigin="anonymous"
+    />
+
+    <style>
+      body {
+        margin: 0;
+      }
+    </style>
+  </head>
+
+  <body>
+    <div id="app"></div>
+    <script src="options.js"></script>
+  </body>
+</html>
+
+<!-- vim:sw=2:ts=2:et: -->

src/options/options.js

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

src/popup/App.vue

@@ -0,0 +1,52 @@
+<template>
+  <div class="container">
+    <div class="head">
+      <a href="/options/options.html" target="_blank">
+        <i class="fas fa-cog" />
+      </a>
+    </div>
+
+    <div class="hosts">
+      <div class="host" v-for="(host, i) in hosts" :key="i">
+        <div class="name" v-text="host.name" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      hosts: {},
+    };
+  },
+
+  methods: {},
+};
+</script>
+
+<style scoped>
+.container {
+  width: 400px;
+  font-size: 14px;
+  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Ubuntu, 'Helvetica Neue', sans-serif;
+  padding: 0.1em 0.2em;
+}
+
+a,
+a:visited {
+  color: initial;
+  text-decoration: underline dotted #888;
+}
+
+a:hover {
+  opacity: 0.7;
+}
+
+h2 {
+  font-size: 1.2em;
+}
+</style>
+
+<!-- vim:sw=2:ts=2:et: -->

src/popup/popup.html

@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Platypush</title>
+    <link rel="stylesheet" href="popup.css" />
+    <link rel="stylesheet" href="//fonts.googleapis.com/css?family=Roboto:300,300italic,700,700italic" />
+    <link
+      rel="stylesheet"
+      href="https://use.fontawesome.com/releases/v5.12.0/css/all.css"
+      integrity="sha384-REHJTs1r2ErKBuJB0fCK99gCYsVjwxHrSU0N7I1zl9vZbggVJXRMsv/sLlOAGb4M"
+      crossorigin="anonymous"
+    />
+  </head>
+
+  <body>
+    <div id="app"></div>
+    <script src="popup.js"></script>
+  </body>
+</html>
+
+<!-- vim:sw=2:ts=2:et: -->

src/popup/popup.js

@@ -0,0 +1,11 @@
+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,123 @@
+const webpack = require('webpack');
+const ejs = require('ejs');
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+const CopyPlugin = 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',
+    'options/options': './options/options.js',
+  },
+  output: {
+    path: __dirname + '/dist',
+    filename: '[name].js',
+  },
+  resolve: {
+    extensions: ['.js', '.vue'],
+  },
+  module: {
+    rules: [
+      {
+        test: /\.vue$/,
+        loader: '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: '[path][name].[ext]',
+          outputPath: '/images/',
+          emitFile: true,
+          esModule: false,
+        },
+      },
+      {
+        test: /\.(woff(2)?|ttf|eot|svg)(\?v=\d+\.\d+\.\d+)?$/,
+        loader: 'file-loader',
+        options: {
+          name: '[path][name].[ext]',
+          outputPath: '/fonts/',
+          emitFile: true,
+          esModule: false,
+        },
+      },
+    ],
+  },
+  plugins: [
+    new webpack.DefinePlugin({
+      global: 'window',
+    }),
+    new VueLoaderPlugin(),
+    new MiniCssExtractPlugin({
+      filename: '[name].css',
+    }),
+    new CopyPlugin([
+      { from: 'icons', to: 'icons', ignore: ['icon.xcf'] },
+      { from: 'popup/popup.html', to: 'popup/popup.html', transform: transformHtml },
+      { from: 'options/options.html', to: 'options/options.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;