First commit

This commit is contained in:
Fabio Manganiello 2020-06-12 01:03:46 +02:00
parent 3ccb98f749
commit 2ee67fad8a
20 changed files with 10166 additions and 0 deletions

15
.babelrc Normal file
View file

@ -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"]
}
}]
]
}

31
.eslintrc.js Normal file
View file

@ -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',
},
};

4
.gitignore vendored Normal file
View file

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

5
.prettierrc Normal file
View file

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

9375
package-lock.json generated Normal file

File diff suppressed because it is too large Load diff

68
package.json Normal file
View file

@ -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"
}
}

53
scripts/build-zip.js Normal file
View file

@ -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();

2
src/background.js Normal file
View file

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

BIN
src/icons/icon-16.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.7 KiB

BIN
src/icons/icon-32.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.1 KiB

BIN
src/icons/icon-48.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.3 KiB

BIN
src/icons/icon-64.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 905 B

32
src/manifest.json Normal file
View file

@ -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"]
}
]
}

335
src/options/App.vue Normal file
View file

@ -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: -->

28
src/options/options.html Normal file
View file

@ -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: -->

10
src/options/options.js Normal file
View file

@ -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),
});

52
src/popup/App.vue Normal file
View file

@ -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: -->

22
src/popup/popup.html Normal file
View file

@ -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: -->

11
src/popup/popup.js Normal file
View file

@ -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),
});

123
webpack.config.js Normal file
View file

@ -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;