Initial LinkLog implementation

webextension/popup.js

@@ -0,0 +1,96 @@
+const statusEl = document.getElementById('status');
+const form = document.getElementById('link-form');
+const titleInput = document.getElementById('title');
+const urlInput = document.getElementById('url');
+const commentInput = document.getElementById('comment');
+const openSettingsButton = document.getElementById('open-settings');
+
+function setStatus(message, isError = false) {
+  statusEl.textContent = message;
+  statusEl.classList.remove('hidden');
+  statusEl.classList.toggle('error', isError);
+  statusEl.classList.toggle('success', !isError);
+}
+
+async function getSettings() {
+  const result = await browser.storage.local.get([
+    'backendUrl',
+    'accessToken',
+    'tokenExpiresAt',
+  ]);
+  return result;
+}
+
+function removeKnownTrackingParams(urlString) {
+  try {
+    const url = new URL(urlString);
+    const known = new Set([
+      'utm_source', 'utm_medium', 'utm_campaign', 'utm_term', 'utm_content',
+      'utm_id', 'utm_name', 'gclid', 'fbclid', 'dclid', 'msclkid'
+    ]);
+
+    for (const key of known) {
+      url.searchParams.delete(key);
+    }
+    return url.toString();
+  } catch (error) {
+    return urlString;
+  }
+}
+
+async function populateCurrentTab() {
+  const [tab] = await browser.tabs.query({ active: true, currentWindow: true });
+  if (!tab) return;
+
+  titleInput.value = tab.title || '';
+  urlInput.value = tab.url || '';
+}
+
+async function handleSubmit(event) {
+  event.preventDefault();
+  setStatus('Submitting...', false);
+
+  const settings = await getSettings();
+  const token = settings.accessToken;
+  const backendUrl = settings.backendUrl;
+
+  if (!token || !backendUrl) {
+    setStatus('Please configure the backend URL and log in first.', true);
+    browser.runtime.openOptionsPage();
+    return;
+  }
+
+  try {
+    const response = await fetch(`${backendUrl}/api/links`, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+        'Authorization': `Bearer ${token}`,
+      },
+      body: JSON.stringify({
+        title: titleInput.value,
+        url: removeKnownTrackingParams(urlInput.value),
+        comment: commentInput.value,
+        timestamp: new Date().toISOString(),
+      })
+    });
+
+    if (response.status === 401) {
+      setStatus('Session expired. Re-authenticate in settings.', true);
+      browser.runtime.openOptionsPage();
+      return;
+    }
+
+    if (!response.ok) {
+      throw new Error('Submission failed');
+    }
+
+    setStatus('Link saved successfully');
+  } catch (error) {
+    setStatus('Submission failed. Check your backend connection.', true);
+  }
+}
+
+openSettingsButton.addEventListener('click', () => browser.runtime.openOptionsPage());
+form.addEventListener('submit', handleSubmit);
+populateCurrentTab();