Add settings

This commit is contained in:
Anton Vakhrushev 2018-08-23 13:33:47 +03:00
parent 9cfcefb1dd
commit 40fa9b9f07
3 changed files with 129 additions and 1 deletions

View File

@ -3,6 +3,9 @@
"name": "Postify",
"version": "1.0",
"description": "Post current url to external web-server.",
"icons": {
"48": "icons/postify-48.png"
},
"applications": {
"gecko": {
"id": "postify@mozilla.org",
@ -13,10 +16,11 @@
"activeTab",
"notifications",
"tabs",
"storage",
"<all_urls>"
],
"background": {
"scripts": ["postify.js"]
"scripts": ["storage.js", "postify.js"]
},
"browser_action": {
"default_icon": "icons/postify-32.png",
@ -28,5 +32,8 @@
"default": "Ctrl+Shift+D"
}
}
},
"options_ui": {
"page": "options.html"
}
}

42
options.html Normal file
View File

@ -0,0 +1,42 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<style type="text/css">
.left {
text-align: left;
}
</style>
<body>
<form class="js-form">
<p>
Specify servers and url patterns.
</p>
<table>
<thead>
<tr>
<th class="left">Server address</th>
<th class="left">Url pattern</th>
</tr>
</thead>
<tbody class="js-pattern-rows">
</tbody>
</table>
<button type="submit" class="js-submit">Save</button>
<button class="js-add">Add</button>
</form>
<script src="options.js"></script>
</body>
</html>

79
options.js Normal file
View File

@ -0,0 +1,79 @@
const PATTERN_ROW = (addr, pattern) => `
<tr>
<td><input type="text" name="server" value="${addr}"></td>
<td><input type="text" name="pattern" value="${pattern}"></td>
</tr>
`;
function restoreOptions() {
function parseJsonPatterns(jsonPatterns) {
console.log('JSON PATTERNS', jsonPatterns);
if (!jsonPatterns.patterns) {
return [];
}
try {
return JSON.parse(jsonPatterns.patterns);
} catch (e) {
return [];
}
}
function defaultPatterns() {
return [
{server: '', pattern: '.*'},
];
}
function setPatterns(jsonPatterns) {
patterns = parseJsonPatterns(jsonPatterns);
if (patterns.length === 0) {
patterns = defaultPatterns();
}
console.log('PATTERNS', patterns);
var html = '';
patterns.forEach(item => {
html += PATTERN_ROW(item.server, item.pattern);
});
document.querySelector(".js-pattern-rows").innerHTML = html;
}
function onError(error) {
console.log(`Error: ${error}`);
}
var getting = browser.storage.local.get("patterns");
getting.then(setPatterns, onError);
}
function saveOptions(evt) {
evt.preventDefault();
var patterns = [];
var rows = document.querySelectorAll(".js-pattern-rows tr");
rows.forEach(row => {
var server = row.querySelector('[name="server"]').value;
var pattern = row.querySelector('[name="pattern"]').value;
patterns.push({server: server, pattern: pattern});
});
console.log('PATTERNS', patterns);
browser.storage.local.set({ patterns: JSON.stringify(patterns) });
}
function addRow(evt) {
evt.preventDefault();
var html = document.querySelector(".js-pattern-rows").innerHTML;
html += PATTERN_ROW('', '');
document.querySelector(".js-pattern-rows").innerHTML = html;
}
document.addEventListener("DOMContentLoaded", restoreOptions);
document.querySelector(".js-submit").addEventListener("click", saveOptions);
document.querySelector(".js-add").addEventListener("click", addRow);