use full url

extension/background.js

@@ -16,7 +16,7 @@ function getBrowser() {
             return chrome;
         }
     } else {
-        console.log("failed to dedect browser");
+        console.log("failed to detect browser");
         throw "browser detection error"
     };
 }

extension/index.html

@@ -18,10 +18,8 @@
         </div>
         <hr>
         <form class="login-form">
-            <label for="url">Tube Archivist URL:</label>
-            <input type="text" id="url" name="url">
-            <label for="port">Tube Archivist Port:</label>
-            <input type="text" id="port" name="port">
+            <label for="full-url">Tube Archivist URL:</label>
+            <input type="text" id="full-url" name="url">
             <label for="api-key">Tube Archivist API Key:</label>
             <input type="password" id="api-key" name="api-key">
         </form>

extension/popup.js

@@ -21,10 +21,15 @@ function getBrowser() {
 
 // store access details
 document.getElementById("save-login").addEventListener("click", function () {
+    let url = document.getElementById("url").value;
+    if (!url.includes('://')) {
+        url = 'http://' + url;
+    }
+    let parsed = new URL(url);
     let toStore = {
         "access": {
-            "url": document.getElementById("url").value,
-            "port": document.getElementById("port").value,
+            "url": document.getElementById("full-url").host,
+            "port": document.getElementById("port").port || '80',
             "apiKey": document.getElementById("api-key").value
         }
     };
@@ -150,8 +155,12 @@ document.addEventListener("DOMContentLoaded", async () => {
             setStatusIcon(false);
             return
         }
-        document.getElementById("url").value = item.access.url;
-        document.getElementById("port").value = item.access.port;
+        let { url, port } = item.access;
+        let fullUrl = url;
+        if (!(url.startsWith('http://') && port === '80')) {
+            fullUrl += `:${port}`;
+        }
+        document.getElementById("full-url").value = fullUrl;
         document.getElementById("api-key").value = item.access.apiKey;
         pingBackend();
         addUrl(item.access);