Add settings page, for defining commands
The settings aren’t used yet, but at least editing is out of the way!
This commit is contained in:
parent
c34ff80d7d
commit
eb1b330ffc
|
@ -34,5 +34,10 @@
|
||||||
"scripts": [
|
"scripts": [
|
||||||
"background.js"
|
"background.js"
|
||||||
]
|
]
|
||||||
|
},
|
||||||
|
|
||||||
|
"options_ui": {
|
||||||
|
"page": "options.html",
|
||||||
|
"open_in_tab": true
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -0,0 +1,25 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<body>
|
||||||
|
<table id="commandTable">
|
||||||
|
<tr>
|
||||||
|
<th>URL regex</th>
|
||||||
|
<th>Shell command</th>
|
||||||
|
</tr>
|
||||||
|
<!-- <tr class="regexCommandRow">
|
||||||
|
<td>
|
||||||
|
<input type="text" class="regex" name="color"
|
||||||
|
placeholder="https://example.com/*"/>
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
<input type="text" class="command" name="color"
|
||||||
|
placeholder="curl %s > /tmp/example" />
|
||||||
|
</td>
|
||||||
|
</tr> -->
|
||||||
|
</table>
|
||||||
|
|
||||||
|
<button id="save">Apply</button>
|
||||||
|
|
||||||
|
<script src="options.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
|
@ -0,0 +1,68 @@
|
||||||
|
// Iterate over the commands-table and save each of the user’s valid
|
||||||
|
// regex+command rows to storage.
|
||||||
|
function saveCommands() {
|
||||||
|
let commands = [];
|
||||||
|
for (commandTr of document.getElementsByClassName("regexCommandRow")) {
|
||||||
|
let regex = commandTr.getElementsByClassName("regex")[0].value;
|
||||||
|
let command = commandTr.getElementsByClassName("command")[0].value;
|
||||||
|
if (regex && command)
|
||||||
|
commands.push([regex, command]);
|
||||||
|
}
|
||||||
|
localStorage.setItem("commands", JSON.stringify(commands));
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// Read the user’s saved command-regex pairs from storage, and populate the
|
||||||
|
// command-table with them.
|
||||||
|
function populateCommandTable() {
|
||||||
|
let commandTable = document.getElementById("commandTable");
|
||||||
|
for (cmdRegex of JSON.parse(localStorage.getItem("commands"))) {
|
||||||
|
let commandTr = createCommandTr(cmdRegex[0], cmdRegex[1]);
|
||||||
|
commandTable.appendChild(commandTr);
|
||||||
|
}
|
||||||
|
// Always add a spare entry.
|
||||||
|
commandTable.appendChild(createCommandTr("", ""));
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// Create a table-row for the command-table, with the command & regex inputs’
|
||||||
|
// values set to the given parameters. If they are undefined, the inputs will
|
||||||
|
// have no value.
|
||||||
|
function createCommandTr(regex, command) {
|
||||||
|
let regexInput = document.createElement("INPUT");
|
||||||
|
regexInput.setAttribute("class", "regex");
|
||||||
|
regexInput.setAttribute("type", "text");
|
||||||
|
regexInput.setAttribute("placeholder", "https://example.com/*");
|
||||||
|
if (regex && command)
|
||||||
|
regexInput.setAttribute("value", regex);
|
||||||
|
|
||||||
|
let regexTd = document.createElement("TD");
|
||||||
|
regexTd.appendChild(regexInput);
|
||||||
|
|
||||||
|
let commandInput = document.createElement("INPUT");
|
||||||
|
commandInput.setAttribute("class", "command");
|
||||||
|
commandInput.setAttribute("type", "text");
|
||||||
|
commandInput.setAttribute("placeholder", "curl %s > /tmp/downloaded");
|
||||||
|
if (regex && command)
|
||||||
|
commandInput.setAttribute("value", command);
|
||||||
|
|
||||||
|
let commandTd = document.createElement("TD");
|
||||||
|
commandTd.appendChild(commandInput);
|
||||||
|
|
||||||
|
let tr = document.createElement("TR");
|
||||||
|
tr.setAttribute("class", "regexCommandRow");
|
||||||
|
tr.appendChild(regexTd);
|
||||||
|
tr.appendChild(commandTd);
|
||||||
|
return tr;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
document.addEventListener("click", e => {
|
||||||
|
if (e.target.id == ("save")) {
|
||||||
|
saveCommands();
|
||||||
|
location.reload();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
populateCommandTable();
|
Ŝarĝante…
Reference in New Issue