Fabio Manganiello
3 years ago
parent
3ccb98f749
commit
2ee67fad8a
@ -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"]
|
||||
}
|
||||
}]
|
||||
]
|
||||
}
|
||||
@ -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',
|
||||
},
|
||||
};
|
||||
@ -0,0 +1,4 @@
|
||||
/node_modules
|
||||
/*.log
|
||||
/dist
|
||||
/dist-zip
|
||||
@ -0,0 +1,5 @@
|
||||
{
|
||||
"singleQuote": true,
|
||||
"printWidth": 180,
|
||||
"trailingComma": "es5"
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
@ -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"
|
||||
}
|
||||
}
|
||||
@ -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();
|
||||
@ -0,0 +1,2 @@
|
||||
global.browser = require('webextension-polyfill');
|
||||
alert('Hello world!');
|
||||
|
After Width: | Height: | Size: 1.7 KiB |
|
After Width: | Height: | Size: 2.1 KiB |
|
After Width: | Height: | Size: 2.3 KiB |
|
After Width: | Height: | Size: 905 B |
@ -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"]
|
||||
}
|
||||
]
|
||||
}
|
||||
@ -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" /> {{ 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" /> {{ option.displayName }}
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="add" :class="{ selected: isAddHost }" @click="selectAddHost"><i class="fas fa-plus" /> 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: -->
|
||||
@ -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: -->
|
||||
@ -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),
|
||||
});
|
||||
@ -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: -->
|
||||
@ -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: -->
|
||||
@ -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),
|
||||
});
|
||||
@ -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;
|
||||
Loading…
Reference in new issue