Add Options page for aria2 settings with connection test; wire into manifest
This commit is contained in:
		
					parent
					
						
							
								8eeb1d3b20
							
						
					
				
			
			
				commit
				
					
						a7966ebebe
					
				
			
		
					 5 changed files with 117 additions and 1 deletions
				
			
		| 
						 | 
					@ -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 @@
 | 
				
			||||||
    }
 | 
					    }
 | 
				
			||||||
  ]
 | 
					  ]
 | 
				
			||||||
}
 | 
					}
 | 
				
			||||||
 | 
					 | 
				
			||||||
| 
						 | 
					
 | 
				
			||||||
| 
						 | 
					@ -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
									
								
							
							
						
						
									
										34
									
								
								src/options/index.html
									
										
									
									
									
										Normal 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
									
								
							
							
						
						
									
										52
									
								
								src/options/index.js
									
										
									
									
									
										Normal 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
									
								
							
							
						
						
									
										9
									
								
								src/options/styles.css
									
										
									
									
									
										Normal 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; }
 | 
				
			||||||
 | 
					
 | 
				
			||||||
		Loading…
	
	Add table
		Add a link
		
	
		Reference in a new issue