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:
Jaidyn Ann 2024-02-28 11:00:42 -06:00
parent c34ff80d7d
commit eb1b330ffc
3 changed files with 98 additions and 0 deletions

View File

@ -34,5 +34,10 @@
"scripts": [
"background.js"
]
},
"options_ui": {
"page": "options.html",
"open_in_tab": true
}
}

25
options.html Normal file
View File

@ -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>

68
options.js Normal file
View File

@ -0,0 +1,68 @@
// Iterate over the commands-table and save each of the users 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 users 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();