parent
3ccb98f749
commit
2ee67fad8a
20 changed files with 10166 additions and 0 deletions
@ -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