chore: initial sync

extension/popup.js

@@ -0,0 +1,131 @@
+// web_proxy toggle — popup logic.
+//
+// Lee y escribe el estado en chrome.storage.local. El service worker
+// (background.js) reacciona a cada cambio y reconfigura el proxy real, de modo
+// que el popup nunca llama directamente a chrome.proxy.
+
+const DEFAULT_STATE = {
+  enabled: false,
+  activeProxy: "capture",
+  proxies: [
+    {
+      id: "capture",
+      name: "Captura web_proxy",
+      scheme: "http",
+      host: "127.0.0.1",
+      port: 8889,
+    },
+  ],
+};
+
+async function getState() {
+  const r = await chrome.storage.local.get("state");
+  return r.state || structuredClone(DEFAULT_STATE);
+}
+
+async function setState(state) {
+  await chrome.storage.local.set({ state });
+}
+
+function newId() {
+  return "p" + Math.random().toString(36).slice(2, 9);
+}
+
+function render(state) {
+  const toggle = document.getElementById("toggle");
+  const status = document.getElementById("status");
+  toggle.checked = !!state.enabled;
+
+  const active = state.proxies.find((p) => p.id === state.activeProxy);
+  if (state.enabled && active) {
+    status.textContent = `Capturando via ${active.host}:${active.port}`;
+    status.style.color = "var(--green)";
+  } else {
+    status.textContent = "Captura desactivada";
+    status.style.color = "var(--muted)";
+  }
+
+  const list = document.getElementById("proxy-list");
+  list.innerHTML = "";
+  for (const p of state.proxies) {
+    const li = document.createElement("li");
+
+    const radio = document.createElement("input");
+    radio.type = "radio";
+    radio.name = "active";
+    radio.checked = p.id === state.activeProxy;
+    radio.addEventListener("change", async () => {
+      const s = await getState();
+      s.activeProxy = p.id;
+      await setState(s);
+      render(s);
+    });
+
+    const meta = document.createElement("div");
+    meta.className = "meta";
+    const name = document.createElement("div");
+    name.className = "name";
+    name.textContent = p.name || p.id;
+    const addr = document.createElement("div");
+    addr.className = "addr";
+    addr.textContent = `${p.scheme}://${p.host}:${p.port}`;
+    meta.append(name, addr);
+
+    li.append(radio, meta);
+
+    // El proxy de captura por defecto no se puede borrar.
+    if (p.id !== "capture") {
+      const del = document.createElement("button");
+      del.className = "del";
+      del.textContent = "✕";
+      del.title = "Eliminar";
+      del.addEventListener("click", async () => {
+        const s = await getState();
+        s.proxies = s.proxies.filter((x) => x.id !== p.id);
+        if (s.activeProxy === p.id) {
+          s.activeProxy = s.proxies[0] ? s.proxies[0].id : "capture";
+        }
+        await setState(s);
+        render(s);
+      });
+      li.append(del);
+    }
+
+    list.append(li);
+  }
+}
+
+async function init() {
+  const state = await getState();
+  render(state);
+
+  document.getElementById("toggle").addEventListener("change", async (e) => {
+    const s = await getState();
+    s.enabled = e.target.checked;
+    await setState(s);
+    render(s);
+  });
+
+  document.getElementById("f-add").addEventListener("click", async () => {
+    const name = document.getElementById("f-name").value.trim();
+    const scheme = document.getElementById("f-scheme").value;
+    const host = document.getElementById("f-host").value.trim();
+    const port = parseInt(document.getElementById("f-port").value, 10);
+    if (!host || !port) return;
+    const s = await getState();
+    s.proxies.push({
+      id: newId(),
+      name: name || `${host}:${port}`,
+      scheme,
+      host,
+      port,
+    });
+    await setState(s);
+    document.getElementById("f-name").value = "";
+    document.getElementById("f-host").value = "";
+    document.getElementById("f-port").value = "";
+    render(s);
+  });
+}
+
+init();