update browser extension and app

browser-extension/options/options.html

@@ -46,6 +46,10 @@
           <label for="apiKey">API Key</label>
           <input type="password" id="apiKey" placeholder="Enter your secret API key">
         </div>
+        <div class="field-row" style="margin-top: 10px;">
+          <button type="button" id="btn-test-connection" class="btn-secondary" style="padding: 8px 16px; border-radius: 6px; cursor: pointer;">Test Connection</button>
+          <span id="test-toast" class="toast hidden" style="margin-left: 10px;"></span>
+        </div>
       </div>
 
       <div class="section">

browser-extension/options/options.js

@@ -9,6 +9,29 @@ const DEFAULT_SETTINGS = {
   urlType: "post"
 };
 
+function normalizeApiUrl(url) {
+  if (!url) return "";
+  url = url.trim().replace(/^['"]|['"]$/g, "");
+  if (!url) return "";
+  if (!/^https?:\/\//i.test(url)) {
+    url = "http://" + url;
+  }
+  try {
+    const parsed = new URL(url);
+    let path = parsed.pathname.replace(/\/+$/, "");
+    if (!path || path === "") {
+      return `${parsed.origin}/api/v2/upload`;
+    } else if (path.endsWith("/api/v2")) {
+      return `${parsed.origin}/upload`;
+    } else if (!path.endsWith("/upload")) {
+      return `${parsed.origin}/api/v2/upload`;
+    }
+    return url;
+  } catch (e) {
+    return url;
+  }
+}
+
 document.addEventListener("DOMContentLoaded", () => {
   const form = document.getElementById("settings-form");
   const modeDesktop = document.getElementById("mode-desktop");
@@ -21,6 +44,8 @@ document.addEventListener("DOMContentLoaded", () => {
   const isOc = document.getElementById("isOc");
   const urlType = document.getElementById("urlType");
   const saveToast = document.getElementById("save-toast");
+  const btnTest = document.getElementById("btn-test-connection");
+  const testToast = document.getElementById("test-toast");
 
   // Load existing settings
   chrome.storage.sync.get(DEFAULT_SETTINGS, (items) => {
@@ -42,9 +67,15 @@ document.addEventListener("DOMContentLoaded", () => {
   // Save settings on form submit
   form.addEventListener("submit", (e) => {
     e.preventDefault();
+    const rawUrl = apiUrl.value.trim();
+    const normUrl = normalizeApiUrl(rawUrl);
+    if (normUrl && normUrl !== rawUrl) {
+      apiUrl.value = normUrl;
+    }
+
     const newSettings = {
       uploadMode: modeDirect.checked ? "direct" : "desktop",
-      apiUrl: apiUrl.value.trim(),
+      apiUrl: normUrl || rawUrl,
       apiKey: apiKey.value.trim(),
       rating: rating.value,
       visibility: visibility.value,
@@ -60,4 +91,39 @@ document.addEventListener("DOMContentLoaded", () => {
       }, 2500);
     });
   });
+
+  // Test Connection button
+  if (btnTest) {
+    btnTest.addEventListener("click", () => {
+      const url = apiUrl.value.trim();
+      const key = apiKey.value.trim();
+      if (!url || !key) {
+        if (testToast) {
+          testToast.textContent = "Please enter API URL and API Key.";
+          testToast.style.color = "#ff4444";
+          testToast.classList.remove("hidden");
+        }
+        return;
+      }
+
+      btnTest.disabled = true;
+      btnTest.textContent = "Testing...";
+      if (testToast) testToast.classList.add("hidden");
+
+      chrome.runtime.sendMessage({ action: "test_connection", apiUrl: url, apiKey: key }, (res) => {
+        btnTest.disabled = false;
+        btnTest.textContent = "Test Connection";
+        if (testToast) {
+          testToast.classList.remove("hidden");
+          if (res && res.success) {
+            testToast.textContent = "✓ " + res.msg;
+            testToast.style.color = "#00e676";
+          } else {
+            testToast.textContent = "❌ " + (res ? res.msg : "Test failed");
+            testToast.style.color = "#ff4444";
+          }
+        }
+      });
+    });
+  }
 });