Add fallback when API call fails.

redesign/background.js

@@ -32,33 +32,64 @@ chrome.action.onClicked.addListener(async (tab) => {
 
 chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
   if (message.type === 'archivebox_add') {
-      chrome.storage.local.get([
-          'archivebox_server_url',
-          'archivebox_api_key'
-      ], ({ archivebox_server_url, archivebox_api_key }) => {
+      (async () => {
+          try {
+            const { archivebox_server_url, archivebox_api_key } = await new Promise((resolve, reject) => {
+              const vals = chrome.storage.local.get([
+                'archivebox_server_url',
+                'archivebox_api_key'
+              ]);
 
-        if (!archivebox_server_url || !archivebox_api_key) {
-          sendResponse({ success: false, errorMessage: "Server not configured"});
-          return true;
-        }
+              if (chrome.runtime.lastError) {
+                reject(chrome.runtime.lastError);
+              } else {
+                resolve(vals);
+              }
+            });
 
-        fetch(`${archivebox_server_url}/api/v1/cli/add`, {
-          headers: {
-            'x-archivebox-api-key': `${archivebox_api_key}`
-          },
-          method: 'post',
-          credentials: 'include',
-          body: message.body
-        })
-        .then(response => response.json())
-        .then(data => {
-          sendResponse({ success: true, data: data });
-        })
-        .catch(error => {
-          sendResponse({ success: false, errorMessage: error.message });
-        });
-      }
-    );
+            if (!archivebox_server_url) {
+              throw new Error('Server not configured.');
+            }
+
+            let response = undefined;
+            // try ArchiveBox v0.8.0+ API endpoint first
+            if (archivebox_api_key) {
+              response = await fetch(`${archivebox_server_url}/api/v1/cli/add`, {
+                headers: {
+                  'x-archivebox-api-key': `${archivebox_api_key}`
+                },
+                method: 'post',
+                credentials: 'include',
+                body: message.body
+              })
+            }
+
+            // fall back to pre-v0.8.0 endpoint for backwards compatibility
+            if (response === undefined || response.status === 404) {
+              const parsedBody = JSON.parse(message.body);
+              const body = new FormData();
+
+              body.append("url", parsedBody.urls.join("\n"));
+              body.append("tag", parsedBody.tags);
+              body.append("depth", parsedBody.depth);
+              body.append("parser", "url_list");
+              body.append("parser", parsedBody.parser);
+
+              response = await fetch(`${archivebox_server_url}/add/`, {
+                method: "post",
+                credentials: "include",
+                body: body
+              });
+            }
+            if (!response.ok) {
+                throw new Error(`Request failed with status ${response.status}`);
+            }
+            sendResponse({ success: true, status: response.status, statusText: response.statusText });
+          }
+          catch (error) {
+            sendResponse({ success: false, errorMessage: error.message });
+          }
+      })();
   }
   return true;
 });

redesign/config-tab.js

@@ -21,27 +21,36 @@ export async function initializeConfigTab() {
   document.getElementById('testServer').addEventListener('click', async () => {
     const statusIndicator = document.getElementById('serverStatus');
     const statusText = document.getElementById('serverStatusText');
-
+
+    const updateStatus = (success, message) => {
+      statusIndicator.className = success ? 'status-indicator status-success' : 'status-indicator status-error';
+      statusText.textContent = message;
+      statusText.className = success ? 'text-success' : 'text-danger';
+    };
+
     try {
-      const response = await fetch(`${serverUrl.value}/api/`, {
+      let response = await fetch(`${serverUrl.value}/api/`, {
         method: 'GET',
         mode: 'cors',
         credentials: 'omit'
       });
 
+      // fall back to pre-v0.8.0 endpoint for backwards compatibility
+      if (response.status === 404) {
+        response = await fetch(`${serverUrl.value}`, {
+          method: 'GET',
+          mode: 'cors',
+          credentials: 'omit'
+        });
+      }
+
       if (response.ok) {
-        statusIndicator.className = 'status-indicator status-success';
-        statusText.textContent = '✓ Server is reachable';
-        statusText.className = 'text-success';
+        updateStatus(true, '✓ Server is reachable');
       } else {
-        statusIndicator.className = 'status-indicator status-error';
-        statusText.textContent = `✗ Server error: ${response.status} ${response.statusText}`;
-        statusText.className = 'text-danger';
+        updateStatus(false, `✗ Server error: ${response.status} ${response.statusText}`);
       }
     } catch (err) {
-      statusIndicator.className = 'status-indicator status-error';
-      statusText.textContent = `✗ Connection failed: ${err.message}`;
-      statusText.className = 'text-danger';
+      updateStatus(false, `✗ Connection failed: ${err.message}`);
     }
   });
 

redesign/popup.js

@@ -25,26 +25,27 @@ async function sendToArchiveBox(url, tags) {
       parser: 'auto'
     });
 
-    const response = await chrome.runtime.sendMessage({
-        type: 'archivebox_add',
-        body: body
-    });
+    const response = await new Promise((resolve, reject) => {
+      chrome.runtime.sendMessage({
+          type: 'archivebox_add',
+          body: body
+      }, (response) => {
+          if (!response.success) {
+            console.log(`ArchiveBox request failed: ${response.errorMessage}`);
+            reject(`${response.errorMessage}`);
+          }
 
-    if (!response.success) {
-      console.log(`ArchiveBox request failed: ${response.errorMessage}`);
-      return {
-        ok: false,
-        status: response.errorMessage
-      };
-    }
+          resolve({
+            ok: true,
+            status: `${response.status} ${response.statusText}`
+          });
+        });
+    })
 
-    return {
-      ok: true,
-      status: `${response.data.status} ${response.data.statusText}`
-    };
+    return response;
   } catch (error) {
-    console.log(`ArchiveBox request failed: ${error.message}`);
-    return { ok: false, status: `Failed to archive: ${error.message}` };
+    console.log(`ArchiveBox request failed: ${error.message || error}`);
+    return { ok: false, status: `Failed to archive: ${error.message || error}` };
   }
 }
 
@@ -216,11 +217,14 @@ window.createPopup = async function() {
       width: 100%;
       text-align: center;
       margin-top: 5px;
-      animation: fadeOut 2.5s ease-in-out forwards;
       color: #fefefe;
       overflow: hidden;
       font-size: 11px;
-      opacity: 0.2;
+      opacity: 1.0;
+    }
+
+    .archive-box-popup small.fade-out {
+      animation: fadeOut 2.5s ease-in-out forwards;
     }
 
     .archive-box-popup img {
@@ -362,18 +366,7 @@ window.createPopup = async function() {
     .status-indicator.error {
       background: #dc3545;
     }
-
-    .archive-box-popup small {
-      display: block;
-      width: 100%;
-      text-align: center;
-      margin-top: 5px;
-      color: #fefefe;
-      overflow: hidden;
-      font-size: 11px;
-      opacity: 0.8;
-    }
-
+
     .ARCHIVEBOX__autocomplete-dropdown {
       background: white;
       border: 1px solid #ddd;
@@ -404,7 +397,7 @@ window.createPopup = async function() {
     <a href="#" class="options-link" title="Open in ArchiveBox">🏛️</a> <input type="search" placeholder="Add tags + press ⏎   |   ⎋ to close">
     <br/>
     <div class="ARCHIVEBOX__current-tags"></div><div class="ARCHIVEBOX__tag-suggestions"></div><br/>
-    <small>
+    <small class="fade-out">
       <span class="status-indicator"></span>
       Saved
     </small>
@@ -628,6 +621,11 @@ window.createPopup = async function() {
       ${result.status}
     `;
 
+    // Reset animation
+    status_div.classList.remove('fade-out');
+    void status_div.offsetWidth; // Trigger reflow
+    status_div.classList.add('fade-out');
+
     // Add click handlers for removing tags
     current_tags_div.querySelectorAll('.tag-badge.current').forEach(badge => {
       badge.addEventListener('click', async (e) => {