chocolatito-code 1.0.0

package/extension/background.js

@@ -0,0 +1,575 @@
+/**
+ * Service worker de Chocolatito Code.
+ *
+ * Hace de puente entre la CLI (que escucha en un WebSocket local) y las
+ * pestanas del usuario. Todo lo que ejecuta va por la API de extensiones, asi
+ * que NO necesita foco, ni raton, ni que Chrome este delante: el usuario puede
+ * estar jugando a pantalla completa mientras el agente trabaja.
+ */
+
+// Varios puertos a proposito: el puente solo lo puede tener un proceso por
+// puerto, asi que con un unico puerto una segunda sesion de Chocolatito se
+// quedaba sin extension. Conectando a un rango, cada sesion tiene el suyo y
+// todas pueden trabajar.
+const WS_PORTS = [8787, 8788, 8789, 8790];
+const GROUP_TITLE = "Chocolatito Code";
+
+/** puerto -> { socket, delay, timer } */
+const links = new Map();
+
+/** ref -> { tabId, frameId }, para resolver despues los clics. */
+const refIndex = new Map();
+let workingTabId = null;
+let groupId = null;
+
+// ============================================================ conexion
+
+function connect(port) {
+  let ws;
+  try {
+    ws = new WebSocket("ws://127.0.0.1:" + port);
+  } catch (_) {
+    scheduleReconnect(port);
+    return;
+  }
+
+  const link = links.get(port) || { delay: 1000 };
+  link.socket = ws;
+  links.set(port, link);
+
+  ws.onopen = () => {
+    link.delay = 1000;
+    sendTo(ws, { type: "hello", agent: "chocolatito-extension", version: "1.1.0", port });
+    refreshBadge();
+    // El service worker de MV3 se duerme al quedar inactivo. Un ping periodico
+    // mantiene viva la conexion y con ella el indice de referencias.
+    clearInterval(link.timer);
+    link.timer = setInterval(() => sendTo(ws, { type: "keepalive" }), 20000);
+  };
+
+  ws.onmessage = async (ev) => {
+    let msg;
+    try {
+      msg = JSON.parse(ev.data);
+    } catch (_) {
+      return;
+    }
+    if (!msg || typeof msg.id !== "number") return;
+    try {
+      const data = await handle(msg);
+      sendTo(ws, { type: "result", id: msg.id, ok: true, data });
+    } catch (err) {
+      sendTo(ws, { type: "result", id: msg.id, ok: false, error: String((err && err.message) || err) });
+    }
+  };
+
+  ws.onclose = () => {
+    clearInterval(link.timer);
+    if (link.socket === ws) link.socket = null;
+    refreshBadge();
+    scheduleReconnect(port);
+  };
+
+  ws.onerror = () => {
+    try { ws.close(); } catch (_) {}
+  };
+}
+
+function scheduleReconnect(port) {
+  const link = links.get(port) || { delay: 1000 };
+  links.set(port, link);
+  setTimeout(() => connect(port), link.delay);
+  // Tope bajo a proposito: el servidor es local y reintentar cuesta nada.
+  link.delay = Math.min((link.delay || 1000) * 1.5, 3000);
+}
+
+function sendTo(ws, obj) {
+  if (ws && ws.readyState === WebSocket.OPEN) ws.send(JSON.stringify(obj));
+}
+
+function activeCount() {
+  let n = 0;
+  for (const link of links.values()) {
+    if (link.socket && link.socket.readyState === WebSocket.OPEN) n++;
+  }
+  return n;
+}
+
+function refreshBadge() {
+  const n = activeCount();
+  setBadge(n > 0 ? String(n) : "");
+}
+
+function setBadge(text) {
+  try {
+    chrome.action.setBadgeText({ text: text || "" });
+    chrome.action.setBadgeBackgroundColor({ color: "#D97757" });
+  } catch (_) {}
+}
+
+// ============================================================ utilidades
+
+/** Manda un mensaje al content script, inyectandolo si aun no estaba. */
+async function tell(tabId, frameId, msg) {
+  const opts = frameId === undefined || frameId === null ? {} : { frameId };
+  try {
+    return await chrome.tabs.sendMessage(tabId, msg, opts);
+  } catch (_) {
+    // Pagina cargada antes de instalar la extension: se inyecta al vuelo.
+    await chrome.scripting.executeScript({
+      target: frameId ? { tabId, frameIds: [frameId] } : { tabId, allFrames: true },
+      files: ["content.js"],
+    });
+    return await chrome.tabs.sendMessage(tabId, msg, opts);
+  }
+}
+
+async function framesOf(tabId) {
+  try {
+    const frames = await chrome.webNavigation.getAllFrames({ tabId });
+    return (frames || []).map((f) => f.frameId);
+  } catch (_) {
+    return [0];
+  }
+}
+
+async function resolveTab(tabId) {
+  if (tabId) return tabId;
+  if (workingTabId) {
+    try {
+      await chrome.tabs.get(workingTabId);
+      return workingTabId;
+    } catch (_) {
+      workingTabId = null;
+    }
+  }
+  const [active] = await chrome.tabs.query({ active: true, lastFocusedWindow: true });
+  if (!active) throw new Error("no hay ninguna pestana disponible");
+  return active.id;
+}
+
+/**
+ * Mete la pestana en un grupo visible llamado "Chocolatito Code", para que el
+ * usuario vea de un vistazo donde esta trabajando el agente.
+ */
+async function groupTab(tabId) {
+  try {
+    if (groupId !== null) {
+      try {
+        await chrome.tabGroups.get(groupId);
+      } catch (_) {
+        groupId = null;
+      }
+    }
+    const newGroupId = await chrome.tabs.group(
+      groupId === null ? { tabIds: [tabId] } : { tabIds: [tabId], groupId }
+    );
+    groupId = newGroupId;
+    await chrome.tabGroups.update(groupId, {
+      title: GROUP_TITLE,
+      color: "orange",
+      collapsed: false,
+    });
+    return groupId;
+  } catch (err) {
+    return null;
+  }
+}
+
+async function banner(tabId, text) {
+  try {
+    await tell(tabId, 0, { cmd: "banner", text });
+  } catch (_) {}
+}
+
+
+
+/** Activa la pestana, ejecuta la accion por CDP y lo deja todo como estaba. */
+async function withTrustedTab(tabId, fn) {
+  const target = { tabId };
+  let previaId = null;
+  let attached = false;
+  try {
+    const tab = await chrome.tabs.get(tabId);
+    const [activa] = await chrome.tabs.query({ active: true, windowId: tab.windowId });
+    if (activa && activa.id !== tabId) previaId = activa.id;
+    if (!tab.active) await chrome.tabs.update(tabId, { active: true });
+    await sleep(250);
+  } catch (_) {}
+
+  try {
+    await chrome.debugger.attach(target, "1.3");
+    attached = true;
+    return await fn(target);
+  } finally {
+    if (attached) {
+      try { await chrome.debugger.detach(target); } catch (_) {}
+    }
+    if (previaId !== null) {
+      try { await chrome.tabs.update(previaId, { active: true }); } catch (_) {}
+    }
+  }
+}
+
+/**
+ * Clic con eventos de raton reales.
+ *
+ * Los eventos sinteticos del DOM valen para la mayoria de sitios, pero algunas
+ * aplicaciones comprueban isTrusted o dependen del gestor de foco del navegador.
+ * En Flow, el boton de enviar recibia el clic sintetico y no pasaba nada.
+ */
+async function clickTrusted(tabId, frameId, ref) {
+  const pos = await tell(tabId, frameId, { cmd: "rect", ref });
+  if (!pos || !pos.ok) throw new Error((pos && pos.error) || "no se pudo situar el elemento");
+
+  await withTrustedTab(tabId, async (target) => {
+    const base = { x: pos.x, y: pos.y, button: "left", clickCount: 1 };
+    await cdp(target, "Input.dispatchMouseEvent", { type: "mouseMoved", x: pos.x, y: pos.y });
+    await sleep(60);
+    await cdp(target, "Input.dispatchMouseEvent", { ...base, type: "mousePressed", buttons: 1 });
+    await sleep(60);
+    await cdp(target, "Input.dispatchMouseEvent", { ...base, type: "mouseReleased", buttons: 0 });
+    await sleep(300);
+  });
+
+  return { label: pos.label };
+}
+
+// ==================================================== escritura de confianza
+
+function cdp(target, method, params) {
+  return chrome.debugger.sendCommand(target, method, params || {});
+}
+
+/**
+ * Escribe con eventos de entrada REALES por el protocolo DevTools.
+ *
+ * Por que hace falta: en un editor rico (Flow usa uno) asignar el valor desde el
+ * content script deja el texto en el DOM pero el framework no se entera. El campo
+ * se ve relleno, el boton de enviar sigue apagado, y la app responde "se debe
+ * proporcionar una instruccion". Es exactamente lo que pasaba.
+ *
+ * Input.insertText y Input.dispatchKeyEvent los procesa el renderizador igual que
+ * si los hubiera tecleado una persona, y funcionan con la pestana en segundo
+ * plano: no hace falta foco ni traer la ventana al frente.
+ */
+async function typeTrusted(tabId, frameId, ref, text, submit, replace) {
+  const pos = await tell(tabId, frameId, { cmd: "rect", ref });
+  if (!pos || !pos.ok) throw new Error((pos && pos.error) || "no se pudo situar el campo");
+
+  const target = { tabId };
+  let attached = false;
+
+  // El renderizador de una pestana que no esta activa descarta los eventos de
+  // texto: por eso escribir en segundo plano dejaba el campo vacio. Se activa la
+  // pestana solo lo que dura la escritura y despues se devuelve la que estaba.
+  //
+  // Importante: esto NO toca el foco del sistema operativo. Solo cambia que
+  // pestana se ve dentro de Chrome, y se deja como estaba. Si el usuario esta en
+  // un juego a pantalla completa o en otra aplicacion, no nota nada.
+  let previaId = null;
+  try {
+    const tab = await chrome.tabs.get(tabId);
+    const [activa] = await chrome.tabs.query({ active: true, windowId: tab.windowId });
+    if (activa && activa.id !== tabId) previaId = activa.id;
+    if (!tab.active) await chrome.tabs.update(tabId, { active: true });
+    await sleep(250);
+  } catch (_) {}
+
+  try {
+    await chrome.debugger.attach(target, "1.3");
+    attached = true;
+
+    // Clic real para que el editor tome el foco de verdad.
+    const click = { x: pos.x, y: pos.y, button: "left", clickCount: 1, buttons: 1 };
+    await cdp(target, "Input.dispatchMouseEvent", { type: "mouseMoved", x: pos.x, y: pos.y });
+    await cdp(target, "Input.dispatchMouseEvent", { ...click, type: "mousePressed" });
+    await cdp(target, "Input.dispatchMouseEvent", { ...click, type: "mouseReleased", buttons: 0 });
+    await sleep(150);
+
+    if (replace !== false) {
+      // Ctrl+A para sustituir lo que hubiera, sin vaciar el campo antes (vaciarlo
+      // hace que el editor se vuelva a montar y se pierda el foco).
+      // 'commands' es imprescindible: CDP entrega la tecla, pero es el navegador
+      // quien traduce Ctrl+A a la orden de edicion "seleccionar todo". Sin esto
+      // la seleccion no ocurre y el texto nuevo se AÑADE al que ya habia, que es
+      // justo lo que pasaba ("...en el jardinUn perro jugando...").
+      const a = {
+        key: "a", code: "KeyA", windowsVirtualKeyCode: 65,
+        nativeVirtualKeyCode: 65, modifiers: 2, commands: ["selectAll"],
+      };
+      await cdp(target, "Input.dispatchKeyEvent", { ...a, type: "rawKeyDown" });
+      await cdp(target, "Input.dispatchKeyEvent", { ...a, type: "keyUp" });
+      await sleep(120);
+    }
+
+    await cdp(target, "Input.insertText", { text });
+    await sleep(250);
+
+    if (submit) {
+      const enter = {
+        key: "Enter", code: "Enter", windowsVirtualKeyCode: 13,
+        nativeVirtualKeyCode: 13, text: "\r", unmodifiedText: "\r",
+      };
+      await cdp(target, "Input.dispatchKeyEvent", { ...enter, type: "keyDown" });
+      await cdp(target, "Input.dispatchKeyEvent", { ...enter, type: "char" });
+      await cdp(target, "Input.dispatchKeyEvent", { ...enter, type: "keyUp" });
+      await sleep(400);
+    }
+  } finally {
+    if (attached) {
+      try { await chrome.debugger.detach(target); } catch (_) {}
+    }
+    // Se devuelve la pestana que el usuario tenia delante.
+    if (previaId !== null) {
+      try { await chrome.tabs.update(previaId, { active: true }); } catch (_) {}
+    }
+  }
+
+  const after = await tell(tabId, frameId, { cmd: "value", ref });
+  return { label: pos.label, value: after && after.ok ? after.value : "" };
+}
+
+// ============================================================ comandos
+
+async function handle(msg) {
+  const cmd = msg.cmd;
+
+  if (cmd === "ping") {
+    return { pong: true, version: "1.0.0" };
+  }
+
+  if (cmd === "tabs") {
+    const tabs = await chrome.tabs.query({});
+    return {
+      working: workingTabId,
+      tabs: tabs.map((t) => ({
+        id: t.id,
+        title: t.title || "",
+        url: t.url || "",
+        active: !!t.active,
+        grouped: t.groupId !== undefined && t.groupId === groupId,
+      })),
+    };
+  }
+
+  if (cmd === "open") {
+    // active:false es la clave: la pestana se crea SIN robar el foco ni cambiar
+    // lo que el usuario esta viendo.
+    const tab = await chrome.tabs.create({ url: msg.url, active: false });
+    workingTabId = tab.id;
+    await waitForLoad(tab.id, msg.timeout || 30000);
+    await groupTab(tab.id);
+    await banner(tab.id, msg.note || "pestana abierta");
+    const info = await chrome.tabs.get(tab.id);
+    return { tabId: tab.id, title: info.title || "", url: info.url || "" };
+  }
+
+  if (cmd === "select") {
+    const tabs = await chrome.tabs.query({});
+    const needle = String(msg.match || "").toLowerCase();
+    const hit = tabs.find(
+      (t) => (t.url || "").toLowerCase().includes(needle) || (t.title || "").toLowerCase().includes(needle)
+    );
+    if (!hit) throw new Error('ninguna pestana contiene "' + msg.match + '"');
+    workingTabId = hit.id;
+    await groupTab(hit.id);
+    await banner(hit.id, "pestana seleccionada");
+    return { tabId: hit.id, title: hit.title || "", url: hit.url || "" };
+  }
+
+  if (cmd === "navigate") {
+    const tabId = await resolveTab(msg.tabId);
+    await chrome.tabs.update(tabId, { url: msg.url });
+    await waitForLoad(tabId, msg.timeout || 30000);
+    workingTabId = tabId;
+    await groupTab(tabId);
+    const info = await chrome.tabs.get(tabId);
+    await banner(tabId, "navegando a " + (info.url || "").slice(0, 60));
+    return { tabId, title: info.title || "", url: info.url || "" };
+  }
+
+  if (cmd === "snapshot") {
+    const tabId = await resolveTab(msg.tabId);
+    workingTabId = tabId;
+    await banner(tabId, "leyendo la pagina");
+    refIndex.clear();
+
+    const frames = await framesOf(tabId);
+    const rows = [];
+    let counter = 0;
+    for (const frameId of frames) {
+      let res;
+      try {
+        res = await tell(tabId, frameId, { cmd: "snapshot", startIndex: counter, filter: msg.filter || "" });
+      } catch (_) {
+        continue;
+      }
+      if (!res || !res.ok) continue;
+      for (const item of res.items) {
+        refIndex.set(item.ref, { tabId, frameId });
+        rows.push(item);
+      }
+      counter += res.items.length;
+    }
+
+    const info = await chrome.tabs.get(tabId);
+    const max = msg.max || 60;
+    return {
+      tabId,
+      title: info.title || "",
+      url: info.url || "",
+      truncated: rows.length > max,
+      elements: rows.slice(0, max),
+    };
+  }
+
+  if (cmd === "click" || cmd === "type" || cmd === "press") {
+    const loc = refIndex.get(msg.ref);
+    if (msg.ref !== undefined && msg.ref !== null && !loc) {
+      throw new Error("el ref " + msg.ref + " no existe; vuelve a hacer snapshot");
+    }
+    const tabId = loc ? loc.tabId : await resolveTab(msg.tabId);
+    const frameId = loc ? loc.frameId : 0;
+    workingTabId = tabId;
+
+    if (cmd === "click") await banner(tabId, "pulsando un elemento");
+    if (cmd === "type") await banner(tabId, "escribiendo");
+
+    let res;
+    if (cmd === "type") {
+      // Primero por CDP, que es lo unico que registran los editores ricos.
+      try {
+        const out = await typeTrusted(tabId, frameId, msg.ref, msg.text, msg.submit, msg.replace);
+        res = { ok: true, value: out.value, label: out.label, via: "cdp" };
+      } catch (err) {
+        // Si el depurador no esta disponible (otra herramienta adjunta, permiso
+        // denegado), se cae al metodo del DOM en vez de quedarse sin escribir.
+        const fallback = await tell(tabId, frameId, {
+          cmd, ref: msg.ref, text: msg.text, submit: msg.submit, replace: msg.replace,
+        });
+        if (!fallback || !fallback.ok) throw new Error((fallback && fallback.error) || String(err));
+        res = { ...fallback, via: "dom", warning: String((err && err.message) || err) };
+      }
+    } else if (cmd === "click" && msg.ref !== undefined && msg.ref !== null) {
+      try {
+        const out = await clickTrusted(tabId, frameId, msg.ref);
+        res = { ok: true, label: out.label, via: "cdp" };
+      } catch (err) {
+        const fallback = await tell(tabId, frameId, { cmd, ref: msg.ref });
+        if (!fallback || !fallback.ok) throw new Error((fallback && fallback.error) || String(err));
+        res = { ...fallback, via: "dom", warning: String((err && err.message) || err) };
+      }
+    } else {
+      res = await tell(tabId, frameId, {
+        cmd,
+        ref: msg.ref,
+        text: msg.text,
+        keys: msg.keys,
+        submit: msg.submit,
+        replace: msg.replace,
+      });
+    }
+    if (!res || !res.ok) throw new Error((res && res.error) || "el content script no respondio");
+
+    // Se deja respirar a la pagina para que reaccione antes del siguiente paso.
+    await sleep(msg.settle || 600);
+    const info = await chrome.tabs.get(tabId);
+    return { tabId, title: info.title || "", url: info.url || "", label: res.label, value: res.value, via: res.via, warning: res.warning };
+  }
+
+  if (cmd === "getText") {
+    const tabId = await resolveTab(msg.tabId);
+    const res = await tell(tabId, 0, { cmd: "getText" });
+    if (!res || !res.ok) throw new Error("no se pudo leer el texto");
+    return res;
+  }
+
+  if (cmd === "eval") {
+    const tabId = await resolveTab(msg.tabId);
+    const res = await tell(tabId, 0, { cmd: "eval", script: msg.script });
+    if (!res || !res.ok) throw new Error("no se pudo evaluar");
+    return res;
+  }
+
+  if (cmd === "waitFor") {
+    const tabId = await resolveTab(msg.tabId);
+    const deadline = Date.now() + (msg.timeout || 20000);
+    if (msg.text) {
+      while (Date.now() < deadline) {
+        const res = await tell(tabId, 0, { cmd: "getText" });
+        if (res && res.ok && res.text.includes(msg.text)) return { found: true };
+        await sleep(700);
+      }
+      return { found: false };
+    }
+    await sleep(msg.ms || 2000);
+    return { waited: msg.ms || 2000 };
+  }
+
+  if (cmd === "screenshot") {
+    // Page.captureScreenshot por el protocolo DevTools funciona sobre pestanas
+    // en segundo plano; chrome.tabs.captureVisibleTab exigiria que la pestana
+    // estuviera activa y la ventana enfocada.
+    const tabId = await resolveTab(msg.tabId);
+    const target = { tabId };
+    await chrome.debugger.attach(target, "1.3");
+    try {
+      const res = await chrome.debugger.sendCommand(target, "Page.captureScreenshot", {
+        format: "png",
+        captureBeyondViewport: false,
+      });
+      return { data: res.data };
+    } finally {
+      try { await chrome.debugger.detach(target); } catch (_) {}
+    }
+  }
+
+  if (cmd === "banner") {
+    const tabId = await resolveTab(msg.tabId);
+    await banner(tabId, msg.text);
+    return { ok: true };
+  }
+
+  if (cmd === "close_tab") {
+    // Cerrar lo que se abre es parte de dejar el navegador como se encontro.
+    const ids = Array.isArray(msg.tabIds) ? msg.tabIds : [await resolveTab(msg.tabId)];
+    await chrome.tabs.remove(ids);
+    if (ids.includes(workingTabId)) workingTabId = null;
+    return { closed: ids.length };
+  }
+
+  if (cmd === "ungroup") {
+    if (workingTabId) {
+      try { await chrome.tabs.ungroup(workingTabId); } catch (_) {}
+      await banner(workingTabId, null);
+    }
+    groupId = null;
+    workingTabId = null;
+    return { ok: true };
+  }
+
+  throw new Error("comando desconocido: " + cmd);
+}
+
+function sleep(ms) {
+  return new Promise((r) => setTimeout(r, ms));
+}
+
+function waitForLoad(tabId, timeout) {
+  return new Promise((resolve) => {
+    const deadline = Date.now() + timeout;
+    const check = async () => {
+      try {
+        const t = await chrome.tabs.get(tabId);
+        if (t.status === "complete" || Date.now() > deadline) return resolve();
+      } catch (_) {
+        return resolve();
+      }
+      setTimeout(check, 250);
+    };
+    check();
+  });
+}
+
+for (const p of WS_PORTS) connect(p);