Erster Blueprint

src/popup/popup.js

@@ -0,0 +1,109 @@
+const form = {
+  apiBase: document.getElementById("apiBase"),
+  apiKey: document.getElementById("apiKey"),
+  spaceId: document.getElementById("spaceId"),
+  objectType: document.getElementById("objectType")
+};
+
+const status = document.getElementById("status");
+
+document.getElementById("refreshSpaces").addEventListener("click", refreshSpaces);
+document.getElementById("savePage").addEventListener("click", () => saveClip("full"));
+document.getElementById("saveSelection").addEventListener("click", () => saveClip("selection"));
+
+bootstrap().catch(showError);
+
+async function bootstrap() {
+  const settings = await browser.runtime.sendMessage({ type: "load-settings" });
+  populateForm(settings);
+  await refreshSpaces(settings.spaceId);
+}
+
+function populateForm(settings) {
+  form.apiBase.value = settings.apiBase || "";
+  form.apiKey.value = settings.apiKey || "";
+  form.objectType.value = settings.objectType || "page";
+}
+
+async function refreshSpaces(selectedSpaceId = form.spaceId.value) {
+  setStatus("Lade Spaces ...");
+  await persistForm();
+
+  try {
+    const response = await browser.runtime.sendMessage({ type: "list-spaces" });
+    const spaces = response?.spaces || [];
+
+    form.spaceId.innerHTML = "";
+
+    if (spaces.length === 0) {
+      const option = document.createElement("option");
+      option.value = "";
+      option.textContent = "Keine Spaces gefunden";
+      form.spaceId.appendChild(option);
+      setStatus("Keine Spaces verfügbar.");
+      return;
+    }
+
+    spaces.forEach((space) => {
+      const option = document.createElement("option");
+      option.value = space.id || space.space_id || "";
+      option.textContent = space.name || option.value;
+      option.selected = option.value === selectedSpaceId;
+      form.spaceId.appendChild(option);
+    });
+
+    if (!form.spaceId.value) {
+      form.spaceId.selectedIndex = 0;
+    }
+
+    await persistForm();
+    setStatus("Spaces geladen.");
+  } catch (error) {
+    showError(error);
+  }
+}
+
+async function saveClip(mode) {
+  setStatus("Sichere Webseite ...");
+
+  try {
+    const result = await browser.runtime.sendMessage({
+      type: "save-active-tab",
+      payload: {
+        mode,
+        settings: readForm()
+      }
+    });
+
+    const objectId = result?.created?.id || result?.created?.object?.id;
+    const suffix = objectId ? ` Objekt-ID: ${objectId}` : "";
+    setStatus(`In Anytype gespeichert.${suffix}`);
+    window.close();
+  } catch (error) {
+    showError(error);
+  }
+}
+
+async function persistForm() {
+  await browser.runtime.sendMessage({
+    type: "save-settings",
+    payload: readForm()
+  });
+}
+
+function readForm() {
+  return {
+    apiBase: form.apiBase.value.trim(),
+    apiKey: form.apiKey.value.trim(),
+    spaceId: form.spaceId.value,
+    objectType: form.objectType.value
+  };
+}
+
+function showError(error) {
+  setStatus(error?.message || String(error));
+}
+
+function setStatus(message) {
+  status.textContent = message;
+}