Add Options page for aria2 settings with connection test; wire into manifest

This commit is contained in:
Jordan Wages 2025-08-21 23:50:13 -05:00
commit a7966ebebe
5 changed files with 117 additions and 1 deletions

View file

@ -7,6 +7,10 @@
"default_title": "Archive.org Link Grabber", "default_title": "Archive.org Link Grabber",
"default_popup": "src/popup/index.html" "default_popup": "src/popup/index.html"
}, },
"options_ui": {
"page": "src/options/index.html",
"open_in_tab": true
},
"permissions": [ "permissions": [
"storage", "storage",
"clipboardWrite", "clipboardWrite",
@ -28,4 +32,3 @@
} }
] ]
} }

View file

@ -34,3 +34,21 @@ export async function addUrisBatch({ endpoint, secret, uris, options = {} }) {
return results; return results;
} }
export async function getVersion({ endpoint, secret }) {
const body = {
jsonrpc: "2.0",
id: "archive-org-link-grabber:getVersion:" + Date.now(),
method: "aria2.getVersion",
params: [secret ? `token:${secret}` : undefined].filter(Boolean)
};
const res = await fetch(endpoint, {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(body)
});
if (!res.ok) {
const text = await res.text().catch(() => String(res.status));
throw new Error(`aria2 RPC error ${res.status}: ${text}`);
}
return res.json();
}

34
src/options/index.html Normal file
View file

@ -0,0 +1,34 @@
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>Archive.org Link Grabber — Options</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<header>
<h1>Options</h1>
</header>
<main>
<section>
<h2>aria2 RPC</h2>
<div class="row">
<label>Endpoint <input id="rpc-endpoint" placeholder="http://localhost:6800/jsonrpc" /></label>
</div>
<div class="row">
<label>Secret <input id="rpc-secret" type="password" placeholder="your-token" /></label>
</div>
<div class="row actions">
<button id="btn-save">Save</button>
<button id="btn-reset">Reset</button>
<button id="btn-test">Test Connection</button>
</div>
<div class="row">
<output id="status"></output>
</div>
</section>
</main>
<script type="module" src="index.js"></script>
</body>
</html>

52
src/options/index.js Normal file
View file

@ -0,0 +1,52 @@
import { getVersion } from "../lib/aria2.js";
const els = {
endpoint: document.getElementById('rpc-endpoint'),
secret: document.getElementById('rpc-secret'),
btnSave: document.getElementById('btn-save'),
btnReset: document.getElementById('btn-reset'),
btnTest: document.getElementById('btn-test'),
status: document.getElementById('status'),
};
async function restore() {
const { aria2 } = await browser.storage.local.get('aria2');
els.endpoint.value = aria2?.endpoint || 'http://localhost:6800/jsonrpc';
els.secret.value = aria2?.secret || '';
}
async function save() {
const endpoint = els.endpoint.value.trim();
const secret = els.secret.value.trim();
await browser.storage.local.set({ aria2: { endpoint, secret } });
els.status.textContent = 'Saved.';
}
async function reset() {
await browser.storage.local.remove('aria2');
await restore();
els.status.textContent = 'Reset to defaults.';
}
async function testConnection() {
els.status.textContent = 'Testing…';
try {
const res = await getVersion({ endpoint: els.endpoint.value.trim(), secret: els.secret.value.trim() });
const version = res?.result?.version || JSON.stringify(res?.result || res);
els.status.textContent = `OK: aria2 version ${version}`;
} catch (e) {
els.status.textContent = `Error: ${e?.message || e}`;
}
}
function wire() {
els.btnSave.addEventListener('click', save);
els.btnReset.addEventListener('click', reset);
els.btnTest.addEventListener('click', testConnection);
}
document.addEventListener('DOMContentLoaded', async () => {
wire();
await restore();
});

9
src/options/styles.css Normal file
View file

@ -0,0 +1,9 @@
body { font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif; margin: 16px; }
header h1 { margin: 0 0 12px; font-size: 18px; }
section { margin: 12px 0; }
.row { display: flex; align-items: center; gap: 8px; margin: 8px 0; flex-wrap: wrap; }
label { font-size: 14px; }
label input { margin-left: 6px; min-width: 360px; }
button { font-size: 13px; padding: 6px 12px; }
#status { font-size: 13px; white-space: pre-wrap; }