Refactored extension to avoid eval() and instead use executeScript and message communication
This commit is contained in:
Fabio Manganiello
parent
ca9ec58244
commit
632b248dc5
6 changed files with 308 additions and 46 deletions
|
|
@ -1,8 +1,10 @@
|
|||
import utils from './utils';
|
||||
import axios from 'axios';
|
||||
import Mercury from '@postlight/mercury-parser';
|
||||
|
||||
global.browser = require('webextension-polyfill');
|
||||
|
||||
const menu = {
|
||||
const app = {
|
||||
hosts: {},
|
||||
actions: {},
|
||||
scripts: {},
|
||||
|
|
@ -76,6 +78,112 @@ const menu = {
|
|||
await utils.methods.runScript(this.scripts[action].script, this.hosts[host], tab, target);
|
||||
}
|
||||
});
|
||||
|
||||
browser.runtime.onConnect.addListener(port => {
|
||||
switch (port.name) {
|
||||
case 'action':
|
||||
port.onMessage.addListener(async message => {
|
||||
switch (message.type) {
|
||||
case 'run':
|
||||
const ret = await utils.methods.run(message.action, message.host);
|
||||
port.postMessage(ret);
|
||||
break;
|
||||
}
|
||||
});
|
||||
|
||||
break;
|
||||
|
||||
case 'url':
|
||||
port.onMessage.addListener(async message => {
|
||||
const tab = await utils.methods.getCurrentTab();
|
||||
switch (message.type) {
|
||||
case 'get':
|
||||
port.postMessage(tab.url);
|
||||
break;
|
||||
|
||||
case 'set':
|
||||
await browser.tabs.sendMessage(tab.id, { type: 'setURL', url: message.url }, {});
|
||||
break;
|
||||
|
||||
case 'open':
|
||||
await browser.tabs.create({
|
||||
url: message.url,
|
||||
});
|
||||
break;
|
||||
}
|
||||
});
|
||||
|
||||
break;
|
||||
|
||||
case 'dom':
|
||||
port.onMessage.addListener(async message => {
|
||||
const tab = await utils.methods.getCurrentTab();
|
||||
switch (message.type) {
|
||||
case 'get':
|
||||
const dom = await browser.tabs.sendMessage(tab.id, { type: 'getDOM' }, {});
|
||||
port.postMessage(dom);
|
||||
break;
|
||||
|
||||
case 'set':
|
||||
await browser.tabs.sendMessage(tab.id, { type: 'setDOM', html: message.html }, {});
|
||||
break;
|
||||
}
|
||||
});
|
||||
|
||||
break;
|
||||
|
||||
case 'notify':
|
||||
port.onMessage.addListener(async message => {
|
||||
switch (message.type) {
|
||||
case 'run':
|
||||
utils.methods.notify(message.message, message.title, message.error);
|
||||
break;
|
||||
}
|
||||
});
|
||||
|
||||
break;
|
||||
|
||||
case 'axios':
|
||||
port.onMessage.addListener(async message => {
|
||||
const method = axios[message.type.toLowerCase()];
|
||||
const response = await method(message.url, ...message.args);
|
||||
port.postMessage({
|
||||
config: {
|
||||
data: response.config.data,
|
||||
headers: response.config.headers,
|
||||
maxContentLength: response.config.maxContentLength,
|
||||
method: response.config.method,
|
||||
timeout: response.config.timeout,
|
||||
url: response.config.url,
|
||||
xsrfCookieName: response.config.xsrfCookieName,
|
||||
xsrfHeaderName: response.config.xsrfHeaderName,
|
||||
},
|
||||
headers: response.headers,
|
||||
data: response.data,
|
||||
status: response.status,
|
||||
statusText: response.statusText,
|
||||
});
|
||||
});
|
||||
|
||||
break;
|
||||
|
||||
case 'mercury':
|
||||
port.onMessage.addListener(async message => {
|
||||
switch (message.type) {
|
||||
case 'parse':
|
||||
const response = await Mercury.parse(message.url, {
|
||||
contentType: 'html',
|
||||
html: message.html,
|
||||
});
|
||||
|
||||
port.postMessage(response);
|
||||
break;
|
||||
}
|
||||
});
|
||||
|
||||
break;
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
async create() {
|
||||
|
|
@ -84,8 +192,9 @@ const menu = {
|
|||
};
|
||||
|
||||
const onCreate = () => {
|
||||
// noinspection JSIgnoredPromiseFromCall
|
||||
menu.create();
|
||||
app.create().then(() => {
|
||||
console.debug('Extension context created');
|
||||
});
|
||||
};
|
||||
|
||||
onCreate();
|
||||
|
|
|
|||
|
|
@ -4,23 +4,24 @@ const context = {
|
|||
targetElement: null,
|
||||
};
|
||||
|
||||
browser.runtime.onMessage.addListener((message, sender, sendResponse) => {
|
||||
browser.runtime.onMessage.addListener(async message => {
|
||||
switch (message.type) {
|
||||
case 'getURL':
|
||||
sendResponse(window.location.href);
|
||||
return Promise.resolve(window.location.href);
|
||||
|
||||
case 'setURL':
|
||||
window.location.href = message.url;
|
||||
break;
|
||||
|
||||
case 'getDOM':
|
||||
sendResponse(document.getElementsByTagName('html')[0].outerHTML);
|
||||
break;
|
||||
return Promise.resolve(document.getElementsByTagName('html')[0].outerHTML);
|
||||
|
||||
case 'setDOM':
|
||||
document.getElementsByTagName('html')[0].innerHTML = message.html;
|
||||
document.documentElement.innerHTML = message.html;
|
||||
break;
|
||||
|
||||
case 'getTargetElement':
|
||||
sendResponse(context.targetElement ? context.targetElement.outerHTML : null);
|
||||
break;
|
||||
return Promise.resolve(context.targetElement ? context.targetElement.outerHTML : null);
|
||||
}
|
||||
});
|
||||
|
||||
|
|
|
|||
|
|
@ -2,7 +2,6 @@
|
|||
"name": "platypush",
|
||||
"description": "Web extension for interacting with Platypush instances via browser and creating custom browser actions",
|
||||
"version": "0.1.4",
|
||||
"content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self'",
|
||||
"manifest_version": 2,
|
||||
"icons": {
|
||||
"16": "icons/icon-16.png",
|
||||
|
|
|
|||
|
|
@ -157,9 +157,9 @@ export default {
|
|||
selectedScript: Object,
|
||||
scriptTemplate: {
|
||||
type: String,
|
||||
default: `async (app, host, browser, tab, target, ...args) => {
|
||||
default: `async (app, args) => {
|
||||
// Run some action on the host
|
||||
const status = await app.run({ name: 'music.mpd.pause' }, host);
|
||||
const status = await app.run({ name: 'music.mpd.pause' }, args.host);
|
||||
|
||||
// Send notifications to the browser
|
||||
app.notify(status.state, 'Music status changed');
|
||||
|
|
@ -457,7 +457,7 @@ export default {
|
|||
this.saveParams.name = action.displayName;
|
||||
this.saveParams.color = action.color;
|
||||
this.saveParams.iconClass = action.iconClass;
|
||||
this.selectedCategories = action.categories;
|
||||
this.selectedCategories = action.categories.map(cat => (typeof cat === 'string' ? { text: cat } : cat));
|
||||
this.selectedHosts = action.hosts;
|
||||
|
||||
if (this.selectedAction) {
|
||||
|
|
|
|||
126
src/script.js
Normal file
126
src/script.js
Normal file
|
|
@ -0,0 +1,126 @@
|
|||
export default {
|
||||
api: `{
|
||||
run: (action, host) => {
|
||||
return new Promise((resolve) => {
|
||||
const port = browser.runtime.connect({ name: 'action' });
|
||||
port.onMessage.addListener(msg => {
|
||||
resolve(msg);
|
||||
});
|
||||
|
||||
port.postMessage({
|
||||
type: 'run',
|
||||
host: host,
|
||||
action: action,
|
||||
});
|
||||
});
|
||||
},
|
||||
|
||||
getURL: () => {
|
||||
return new Promise((resolve) => {
|
||||
const port = browser.runtime.connect({ name: 'url' });
|
||||
port.onMessage.addListener(url => {
|
||||
resolve(url);
|
||||
});
|
||||
|
||||
port.postMessage({
|
||||
type: 'get',
|
||||
});
|
||||
});
|
||||
},
|
||||
|
||||
setURL: (url) => {
|
||||
const port = browser.runtime.connect({ name: 'url' });
|
||||
port.postMessage({
|
||||
type: 'set',
|
||||
url: url,
|
||||
});
|
||||
},
|
||||
|
||||
openTab: (url) => {
|
||||
const port = browser.runtime.connect({ name: 'url' });
|
||||
port.postMessage({
|
||||
type: 'open',
|
||||
url: url,
|
||||
});
|
||||
},
|
||||
|
||||
axios: ['get', 'post', 'put', 'delete', 'head', 'options', 'patch'].reduce((api, method) => {
|
||||
api[method] = (url, ...args) => {
|
||||
return new Promise((resolve) => {
|
||||
const port = browser.runtime.connect({ name: 'axios' });
|
||||
port.onMessage.addListener(response => {
|
||||
resolve(response);
|
||||
});
|
||||
|
||||
port.postMessage({
|
||||
type: method,
|
||||
url: url,
|
||||
args: args,
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
return api;
|
||||
}, {}),
|
||||
|
||||
mercury: {
|
||||
parse: (url, html) => {
|
||||
return new Promise((resolve) => {
|
||||
const port = browser.runtime.connect({ name: 'mercury' });
|
||||
port.onMessage.addListener(response => {
|
||||
resolve(response);
|
||||
});
|
||||
|
||||
port.postMessage({
|
||||
type: 'parse',
|
||||
url: url,
|
||||
html: html,
|
||||
});
|
||||
});
|
||||
},
|
||||
},
|
||||
|
||||
getDOM: () => {
|
||||
return new Promise((resolve) => {
|
||||
const port = browser.runtime.connect({ name: 'dom' });
|
||||
port.onMessage.addListener(dom => {
|
||||
dom = (new DOMParser()).parseFromString(dom, 'text/html');
|
||||
resolve(dom);
|
||||
});
|
||||
|
||||
port.postMessage({
|
||||
type: 'get',
|
||||
});
|
||||
});
|
||||
},
|
||||
|
||||
setDOM: (html) => {
|
||||
return new Promise((resolve) => {
|
||||
const port = browser.runtime.connect({ name: 'dom' });
|
||||
port.postMessage({
|
||||
type: 'set',
|
||||
html: html,
|
||||
});
|
||||
});
|
||||
},
|
||||
|
||||
HTML2DOM: (html, isRoot = false) => {
|
||||
const dom = new DOMParser().parseFromString(html, 'text/html').documentElement;
|
||||
if (isRoot)
|
||||
return dom;
|
||||
return dom.getElementsByTagName('body')[0].firstChild;
|
||||
},
|
||||
|
||||
notify: (msg, title = 'platypush', error = false) => {
|
||||
const port = browser.runtime.connect({ name: 'notify' });
|
||||
port.postMessage({
|
||||
type: 'run',
|
||||
message: msg,
|
||||
title: title,
|
||||
error: error,
|
||||
});
|
||||
},
|
||||
}`,
|
||||
};
|
||||
|
||||
// vim:sw=2:ts=2:et:
|
||||
91
src/utils.js
91
src/utils.js
|
|
@ -1,6 +1,6 @@
|
|||
import axios from 'axios';
|
||||
import Mercury from '@postlight/mercury-parser';
|
||||
import Vue from 'vue';
|
||||
import _script from './script';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
|
|
@ -10,8 +10,28 @@ export default {
|
|||
},
|
||||
|
||||
methods: {
|
||||
notify(message, title = 'platypush') {
|
||||
browser.notifications.create({
|
||||
async notify(message, title = 'platypush', error = false) {
|
||||
let msg = '';
|
||||
if (title && title.length) {
|
||||
msg = `${title}`;
|
||||
}
|
||||
|
||||
if (message && message.length) {
|
||||
if (msg.length > 0) {
|
||||
msg += ': ';
|
||||
}
|
||||
msg += message;
|
||||
}
|
||||
|
||||
if (msg.length) {
|
||||
if (error) {
|
||||
console.error(msg);
|
||||
} else {
|
||||
console.log(msg);
|
||||
}
|
||||
}
|
||||
|
||||
await browser.notifications.create({
|
||||
type: 'basic',
|
||||
title: title,
|
||||
message: message,
|
||||
|
|
@ -25,7 +45,7 @@ export default {
|
|||
});
|
||||
|
||||
if (!tabs.length) {
|
||||
this.notify('', 'No active tab');
|
||||
await this.notify('No active tab', '', true);
|
||||
return;
|
||||
}
|
||||
|
||||
|
|
@ -78,7 +98,7 @@ export default {
|
|||
}, {});
|
||||
} else {
|
||||
args = Object.entries(args)
|
||||
.filter(([name, value]) => value != null && value.length)
|
||||
.filter(([, value]) => value != null && value.length)
|
||||
.reduce((obj, [name, value]) => {
|
||||
obj[name] = value;
|
||||
return obj;
|
||||
|
|
@ -86,8 +106,8 @@ export default {
|
|||
}
|
||||
|
||||
Object.keys(args).forEach(name => {
|
||||
// URL wildcard
|
||||
if (args[name] === '$URL$') {
|
||||
// URL wildcard
|
||||
if (!currentURL) {
|
||||
console.warn('Unable to get the current URL');
|
||||
} else {
|
||||
|
|
@ -115,28 +135,46 @@ export default {
|
|||
|
||||
const errors = msg.data.response.errors;
|
||||
if (errors && errors.length) {
|
||||
throw new Error(errors[0]);
|
||||
// noinspection ExceptionCaughtLocallyJS
|
||||
throw errors[0];
|
||||
}
|
||||
|
||||
return msg.data.response.output;
|
||||
} catch (e) {
|
||||
this.notify(e.toString(), 'Request error');
|
||||
await this.notify(e.toString(), 'Request error');
|
||||
throw e;
|
||||
}
|
||||
},
|
||||
|
||||
prepareScript(script, host, tab, target, ...args) {
|
||||
args = JSON.stringify({
|
||||
host: host,
|
||||
tabId: tab ? tab.id : null,
|
||||
target: typeof target === 'object' ? target.outerHTML : target,
|
||||
...args,
|
||||
});
|
||||
|
||||
return `(${script})(${_script.api}, ${args})`;
|
||||
},
|
||||
|
||||
async runScript(script, host, tab, target, ...args) {
|
||||
this.loading = true;
|
||||
|
||||
try {
|
||||
if (typeof script === 'string') {
|
||||
/* eslint no-eval: "off" */
|
||||
script = eval(this.script);
|
||||
if (!tab) {
|
||||
tab = await this.getCurrentTab();
|
||||
}
|
||||
|
||||
return await script(this, host, browser, tab, target, ...args);
|
||||
if (!tab) {
|
||||
return;
|
||||
}
|
||||
|
||||
const code = this.prepareScript(script, host, tab, target, ...args);
|
||||
return await browser.tabs.executeScript(tab.id, {
|
||||
code: code,
|
||||
});
|
||||
} catch (e) {
|
||||
this.notify(e.message, 'Script error');
|
||||
await this.notify(e.message, 'Script error', true);
|
||||
throw e;
|
||||
} finally {
|
||||
this.loading = false;
|
||||
|
|
@ -182,7 +220,7 @@ export default {
|
|||
}
|
||||
},
|
||||
|
||||
async getScripts(parse = true) {
|
||||
async getScripts() {
|
||||
this.loading = true;
|
||||
|
||||
try {
|
||||
|
|
@ -192,10 +230,6 @@ export default {
|
|||
}
|
||||
|
||||
return Object.entries(JSON.parse(response.scripts)).reduce((obj, [name, info]) => {
|
||||
if (parse && typeof info.script === 'string') {
|
||||
info.script = eval(info.script);
|
||||
}
|
||||
|
||||
obj[name] = info;
|
||||
return obj;
|
||||
}, {});
|
||||
|
|
@ -224,7 +258,7 @@ export default {
|
|||
|
||||
actions[action.displayName] = action;
|
||||
await this.saveActions(actions);
|
||||
this.notify('You can find this action under the Local Actions menu', 'Action saved');
|
||||
await this.notify('You can find this action under the Local Actions menu', 'Action saved');
|
||||
},
|
||||
|
||||
async saveScripts(scripts) {
|
||||
|
|
@ -242,7 +276,7 @@ export default {
|
|||
|
||||
await browser.storage.local.set({ scripts: JSON.stringify(scripts) });
|
||||
} catch (e) {
|
||||
this.notify(e.message, 'Error on script save');
|
||||
await this.notify(e.message, 'Error on script save');
|
||||
} finally {
|
||||
this.loading = false;
|
||||
}
|
||||
|
|
@ -258,7 +292,7 @@ export default {
|
|||
|
||||
scripts[script.displayName] = script;
|
||||
await this.saveScripts(scripts);
|
||||
this.notify('You can find this script under the Local Actions menu', 'Script saved');
|
||||
await this.notify('You can find this script under the Local Actions menu', 'Script saved');
|
||||
},
|
||||
|
||||
async loadConfig() {
|
||||
|
|
@ -293,7 +327,7 @@ export default {
|
|||
if (typeof host === 'string') {
|
||||
const hosts = await this.getHosts();
|
||||
if (!(host in hosts)) {
|
||||
this.notify(host, 'No such Platypush host');
|
||||
await this.notify(host, 'No such Platypush host');
|
||||
return;
|
||||
}
|
||||
|
||||
|
|
@ -325,7 +359,7 @@ export default {
|
|||
host
|
||||
);
|
||||
|
||||
this.notify(`Configugration successfully backed up to ${host.name}`, 'Backup successful');
|
||||
await this.notify(`Configuration successfully backed up to ${host.name}`, 'Backup successful');
|
||||
} finally {
|
||||
this.loading = false;
|
||||
}
|
||||
|
|
@ -335,7 +369,7 @@ export default {
|
|||
if (typeof host === 'string') {
|
||||
const hosts = await this.getHosts();
|
||||
if (!(host in hosts)) {
|
||||
this.notify(host, 'No such Platypush host');
|
||||
await this.notify(host, 'No such Platypush host');
|
||||
return;
|
||||
}
|
||||
|
||||
|
|
@ -347,15 +381,13 @@ export default {
|
|||
const filename = `${basedir}/config.json`;
|
||||
|
||||
try {
|
||||
const config = await this.run(
|
||||
return await this.run(
|
||||
{
|
||||
name: 'file.read',
|
||||
args: { file: filename },
|
||||
},
|
||||
host
|
||||
);
|
||||
|
||||
return config;
|
||||
} finally {
|
||||
this.loading = false;
|
||||
}
|
||||
|
|
@ -395,11 +427,6 @@ export default {
|
|||
return form.name.value.length && form.address.value.length && this.isPortValid(form.port.value) && this.isPortValid(form.websocketPort.value);
|
||||
},
|
||||
},
|
||||
|
||||
created() {
|
||||
this.$axios = axios;
|
||||
this.$mercury = Mercury;
|
||||
},
|
||||
};
|
||||
|
||||
export const bus = new Vue();
|
||||
|
|
|
|||
Loading…
Reference in a new issue