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

2025-08-21 23:50:13 -05:00 · 2025-08-21 23:50:13 -05:00 · a7966ebebe
commit a7966ebebe
parent 8eeb1d3b20
5 changed files with 117 additions and 1 deletions
--- a/src/options/index.html
+++ b/src/options/index.html
@ -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>
+
--- a/src/options/index.js
+++ b/src/options/index.js
@ -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();
+});
+
--- a/src/options/styles.css
+++ b/src/options/styles.css
@ -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; }
+