chocolatito-code 1.2.0 → 1.3.1

package/dist/ui/renderer.js

@@ -1,6 +1,21 @@
+/**
+ * POR QUE ESTO NO USA `console.log`
+ *
+ * Mientras el agente trabaja hay un bloque pintado abajo del todo -el spinner y
+ * la barra de escribir- que se borra y se repinta alrededor de cada escritura.
+ * Un `console.log` no pasa por ahi: escribe donde este el cursor, encima del
+ * bloque, y el repintado siguiente ya no sabe donde empieza el suyo. En pantalla
+ * eso se ve como un spinner que se queda atras y filas huerfanas por todos lados.
+ *
+ * Ademas era el ultimo sitio que ataba el agente a una terminal. `salida` existe
+ * justamente para que el bucle no sepa donde acaba lo que dice, y el
+ * renderizador -que es quien mas imprime- seguia escribiendo directo.
+ */
 import chalk from "chalk";
 import { Marked } from "marked";
 import { markedTerminal } from "marked-terminal";
+import { salida } from "../agent/salidaDelAgente.js";
+import { isManagedMode } from "../config/quota.js";
 const marked = new Marked(markedTerminal({
     heading: chalk.bold.hex("#D97757"),
     firstHeading: chalk.bold.hex("#D97757").underline,
@@ -22,14 +37,14 @@ const marked = new Marked(markedTerminal({
 export function renderUserPrompt(text) {
     const symbol = chalk.bold.hex("#D97757")("❯");
     const shaded = chalk.bgHex("#242730").hex("#F4F4F5").bold(`  ${text.trim()}  `);
-    console.log(`\n${symbol} ${shaded}\n`);
+    salida.linea(`\n${symbol} ${shaded}\n`);
 }
 // Tool call rendering as specified in §B5
 export function renderToolStart(name, summary) {
     const bullet = chalk.hex("#FFA500")("●"); // Amber while starting
     const toolName = chalk.bold.white(formatToolName(name));
     const argPart = summary ? chalk.gray(`(${summary.length > 60 ? summary.slice(0, 57) + '...' : summary})`) : "";
-    console.log(`\n${bullet} ${toolName}${argPart}`);
+    salida.linea(`\n${bullet} ${toolName}${argPart}`);
 }
 export function renderToolSuccess(name, resultSummary) {
     const rawLines = resultSummary.trim().split("\n");
@@ -40,23 +55,23 @@ export function renderToolSuccess(name, resultSummary) {
         const prefix = idx === 0 ? `  ${chalk.gray("⎿")}  ` : "     ";
         return `${prefix}${colorizeText(line)}`;
     }).join("\n");
-    console.log(indented);
+    salida.linea(indented);
     if (remainingCount > 0) {
-        console.log(chalk.gray(`     … +${remainingCount} líneas más`));
+        salida.linea(chalk.gray(`     … +${remainingCount} líneas más`));
     }
 }
 export function renderToolError(name, errorSummary) {
-    console.log(`  ${chalk.red("⎿")}  ${chalk.red(errorSummary)}`);
+    salida.linea(`  ${chalk.red("⎿")}  ${chalk.red(errorSummary)}`);
 }
 export function renderDiff(filePath, diffText) {
-    console.log(`\n${diffText}\n`);
+    salida.linea(`\n${diffText}\n`);
 }
 export function renderReasoning(reasoningText) {
     if (!reasoningText.trim())
         return;
     const lines = reasoningText.trim().split("\n");
     const formatted = lines.map((l) => `  ${chalk.hex("#8B5CF6")("│")} ${chalk.gray(l)}`).join("\n");
-    console.log(`\n  ${chalk.bold.hex("#8B5CF6")("💭 Razonamiento:")}\n${formatted}\n`);
+    salida.linea(`\n  ${chalk.bold.hex("#8B5CF6")("💭 Razonamiento:")}\n${formatted}\n`);
 }
 export function renderAssistantResponse(markdownText) {
     try {
@@ -68,23 +83,37 @@ export function renderAssistantResponse(markdownText) {
         let parsed = String(marked.parse(cleaned));
         // Convert raw asterisks bullets to terracotta bullets
         parsed = parsed.replace(/^(\s*)\*\s+/gm, `$1${chalk.hex("#D97757")("•")} `);
-        console.log(`\n${parsed}`);
+        salida.linea(`\n${parsed}`);
     }
     catch {
-        console.log(`\n${markdownText.trim()}\n`);
+        salida.linea(`\n${markdownText.trim()}\n`);
     }
 }
+/**
+ * La linea de cada turno.
+ *
+ * `⚡ 3.0s · 64 tokens salida (10.8k en caché) · Espectro 1.0 (Ágil) · 99%
+ *  contexto libre · 28% de la cuota semanal`
+ *
+ * Con cuenta gestionada NO lleva importe. Se quito primero de /cost y esta se
+ * quedo atras; el usuario lo vio enseguida -"aun sigue saliendo el precio que se
+ * gasta"- y con razon: /cost se mira cuando uno se acuerda, esta linea sale en
+ * TODOS los turnos. De los dos sitios, era el que mas importaba.
+ *
+ * Con clave propia si sale: ahi el dinero es del usuario y es su factura.
+ */
 export function renderFooter(costStr, outTokens, cachedTokens, modelName, durationMs, contextPercent, quotaStr) {
     const durationPart = durationMs ? `${(durationMs / 1000).toFixed(1)}s · ` : "";
     const outPart = `${outTokens.toLocaleString()} tokens salida`;
     const cachePart = cachedTokens > 0 ? ` (${(cachedTokens / 1000).toFixed(1)}k en caché)` : "";
     const contextPart = contextPercent !== undefined ? ` · ${contextPercent}% contexto libre` : "";
     const quotaPart = quotaStr ? ` · ${quotaStr}` : "";
-    const line = chalk.gray(`  ${chalk.hex("#D97757")("⚡")} ${durationPart}${outPart}${cachePart} · ${chalk.green(costStr)} · ${modelName}${contextPart}${quotaPart}`);
-    console.log(`${line}\n`);
+    const costPart = isManagedMode() ? "" : ` · ${chalk.green(costStr)}`;
+    const line = chalk.gray(`  ${chalk.hex("#D97757")("⚡")} ${durationPart}${outPart}${cachePart}${costPart} · ${modelName}${contextPart}${quotaPart}`);
+    salida.linea(`${line}\n`);
 }
 export function renderError(message) {
-    console.log(`\n  ${chalk.bgRed.white.bold(" ERROR ")} ${chalk.red(message)}\n`);
+    salida.linea(`\n  ${chalk.bgRed.white.bold(" ERROR ")} ${chalk.red(message)}\n`);
 }
 function colorizeText(text) {
     // Highlight file paths (C:\..., /path/...) in cyan

package/dist/ui/spinner.d.ts

@@ -6,19 +6,54 @@ export declare class DynamicSpinner {
     private isRunning;
     private prefix;
     tokenCount: number;
-    /** Lineas extra pintadas debajo del spinner en el ultimo tick. */
-    private extraRows;
     constructor(prefix?: string);
     start(initialPrefix?: string): void;
     private tick;
     /**
-     * Segunda linea con lo que el usuario esta escribiendo mientras se genera.
+     * `✳ Compactando historial… (3s · ↓ 1.2k tokens · esc para pausar)   ⇥ modo`
      *
-     * Antes el teclado se tragaba todo sin pintar nada y parecia que el terminal
-     * se habia colgado. Se dibuja debajo y el cursor vuelve arriba, para que el
-     * siguiente tick sobrescriba las dos lineas sin dejar rastro.
+     * El prefijo se pasaba en `start("Compactando historial")` y no se pintaba en
+     * ningun sitio: `tick()` usaba siempre los verbos rotatorios. Asi que las
+     * cuatro esperas con nombre propio -compactar, optimizar memoria, verificar-
+     * salian todas como "Rumiando…", indistinguibles de una peticion normal.
      */
-    private drawTypeAhead;
-    private clearExtraRows;
+    private lineaDelSpinner;
+    /**
+     * LA BARRA. La MISMA que se ve al escribir una orden, no una parecida.
+     *
+     * Antes habia dos: al esperar salia el marco entero -barra, entrada, barra,
+     * linea de ayuda-; al trabajar, una version recortada con otro texto. Se
+     * parecian lo justo para que el cambio de una a otra se viera como un salto.
+     * Palabras del usuario: "aun no es fija... debe ser fija y por debajo deben
+     * pasar los otros mensajes".
+     *
+     * Ahora las dos salen de `buildPromptFrame`, asi que no pueden divergir: quien
+     * toque el marco lo toca en los dos estados a la vez.
+     *
+     * Sin desplegable: el autocompletado de "@" y "/" es del prompt de verdad, que
+     * es quien tiene el teclado. Aqui lo tecleado solo se encola.
+     */
+    private lineasDeEntrada;
     stop(): void;
 }
+/**
+ * DEJA EL PIE PUESTO MIENTRAS CORRE ALGO
+ *
+ * El spinner solo vivia mientras hablaba el modelo. En cuanto empezaba una
+ * herramienta se paraba, y ahi se acababa lo unico fijo de la pantalla: durante
+ * un `run_command` de veinte segundos, o una lectura de un archivo enorme, no
+ * habia ni cronometro ni forma de saber que seguia vivo. Justo el rato en que
+ * uno se pregunta si se ha colgado.
+ *
+ * EL RETRASO NO ES UN CAPRICHO
+ *
+ * La mayoria de las herramientas tardan milisegundos. Pintar el pie y borrarlo
+ * en el mismo suspiro es un parpadeo en cada llamada, y encima el pie mueve
+ * lineas: veinte herramientas seguidas serian veinte sacudidas. Con 150 ms de
+ * espera, lo rapido no pinta nada y lo lento sale igual.
+ *
+ * El `finally` es obligatorio. Un spinner que se queda corriendo repinta el pie
+ * ocho veces por segundo encima de lo que venga despues -incluido el prompt-, y
+ * de ahi no se sale sin cerrar el programa.
+ */
+export declare function conSpinner<T>(etiqueta: string, tarea: () => Promise<T>, retrasoMs?: number): Promise<T>;

package/dist/ui/spinner.js

@@ -2,6 +2,23 @@ import chalk from "chalk";
 import process from "node:process";
 import { typedText, queuedCount } from "./typeAhead.js";
 import { modeBadge } from "./modes.js";
+import { fijarSecciones, quitarSeccion } from "./pieFijo.js";
+import { buildPromptFrame } from "./marco.js";
+/**
+ * LA LINEA QUE DICE QUE ESTO SIGUE VIVO
+ *
+ * Antes se pintaba con `\r\x1b[2K` sobre la fila donde estuviera el cursor. Eso
+ * la deja clavada a esa fila, y en cuanto la respuesta empieza a salir el
+ * terminal desplaza el contenido y se lleva el spinner hacia arriba con el.
+ * Palabras del usuario: "la nubecita y el rayito suben con lo que me respondes".
+ *
+ * Ahora se entrega a `pieFijo`, que la vuelve a pintar abajo despues de cada
+ * escritura. La linea deja de moverse aunque salgan cien lineas de respuesta.
+ *
+ * Y por eso mismo ya no hace falta pararlo al llegar el primer trozo: el
+ * contador de segundos y de tokens sigue a la vista MIENTRAS el modelo habla,
+ * que es justo cuando interesa saber cuanto lleva.
+ */
 const GLYPHS = ["✢", "✳", "∗", "✻", "✽"];
 const VERBS = [
     "Analizando",
@@ -15,6 +32,9 @@ const VERBS = [
     "Tejiendo",
     "Cocinando",
 ];
+function sinColores(texto) {
+    return texto.replace(/\x1b\[[0-9;]*m/g, "");
+}
 export class DynamicSpinner {
     timer = null;
     glyphIdx = 0;
@@ -23,8 +43,6 @@ export class DynamicSpinner {
     isRunning = false;
     prefix = "";
     tokenCount = 0;
-    /** Lineas extra pintadas debajo del spinner en el ultimo tick. */
-    extraRows = 0;
     constructor(prefix = "") {
         this.prefix = prefix;
     }
@@ -37,7 +55,7 @@ export class DynamicSpinner {
         this.startTime = Date.now();
         this.glyphIdx = 0;
         this.verbIdx = 0;
-        this.extraRows = 0;
+        this.tick();
         this.timer = setInterval(() => {
             this.tick();
         }, 120);
@@ -47,55 +65,71 @@ export class DynamicSpinner {
             return;
         this.glyphIdx = (this.glyphIdx + 1) % GLYPHS.length;
         const elapsedSec = Math.floor((Date.now() - this.startTime) / 1000);
-        // Rotate verbs every 2.5 seconds
         this.verbIdx = Math.floor(elapsedSec / 2.5) % VERBS.length;
+        // Las dos juntas: por separado se repinta el bloque dos veces por tick.
+        fijarSecciones([
+            ["spinner", [this.lineaDelSpinner(elapsedSec)]],
+            ["entrada", this.lineasDeEntrada()],
+        ]);
+    }
+    /**
+     * `✳ Compactando historial… (3s · ↓ 1.2k tokens · esc para pausar)   ⇥ modo`
+     *
+     * El prefijo se pasaba en `start("Compactando historial")` y no se pintaba en
+     * ningun sitio: `tick()` usaba siempre los verbos rotatorios. Asi que las
+     * cuatro esperas con nombre propio -compactar, optimizar memoria, verificar-
+     * salian todas como "Rumiando…", indistinguibles de una peticion normal.
+     */
+    lineaDelSpinner(elapsedSec) {
+        const cols = Math.max(20, process.stdout.columns || 80);
         const glyph = chalk.hex("#D97757")(GLYPHS[this.glyphIdx]);
-        const verb = chalk.italic.hex("#D97757")(`${VERBS[this.verbIdx]}…`);
-        const timeStr = chalk.gray(`(${elapsedSec}s`);
-        const tokenStr = this.tokenCount > 0 ? chalk.gray(` · ↑ ${(this.tokenCount / 1000).toFixed(1)}k tokens`) : "";
-        const escStr = chalk.gray(` · esc para pausar)`);
+        const verbo = this.prefix || VERBS[this.verbIdx];
+        const verb = chalk.italic.hex("#D97757")(`${verbo}…`);
+        // El contador va hacia abajo: son los tokens que ESTAN LLEGANDO del modelo.
+        const tokenStr = this.tokenCount > 0 ? ` · ↓ ${(this.tokenCount / 1000).toFixed(1)}k tokens` : "";
+        const cola = chalk.gray(`(${elapsedSec}s${tokenStr} · esc para pausar)`);
+        const izquierda = `${glyph} ${verb} ${cola}`;
+        const anchoIzq = 1 + 1 + verbo.length + 1 + 1 + `(${elapsedSec}s${tokenStr} · esc para pausar)`.length;
+        // La chapa del modo se pega a la derecha, y solo si sobra sitio: antes se
+        // concatenaba siempre y en una consola estrecha empujaba la linea a una
+        // segunda fila, que es justo lo que descuadra el repintado.
         const badge = modeBadge();
-        const modeStr = badge ? `  ${badge}` : "";
-        this.clearExtraRows();
-        process.stdout.write(`\r\x1b[2K${glyph} ${verb} ${timeStr}${tokenStr}${escStr}${modeStr}`);
-        this.drawTypeAhead();
+        if (!badge)
+            return izquierda;
+        const anchoBadge = sinColores(badge).length;
+        const hueco = cols - anchoIzq - anchoBadge;
+        return hueco >= 2 ? `${izquierda}${" ".repeat(hueco)}${badge}` : izquierda;
     }
     /**
-     * Segunda linea con lo que el usuario esta escribiendo mientras se genera.
+     * LA BARRA. La MISMA que se ve al escribir una orden, no una parecida.
      *
-     * Antes el teclado se tragaba todo sin pintar nada y parecia que el terminal
-     * se habia colgado. Se dibuja debajo y el cursor vuelve arriba, para que el
-     * siguiente tick sobrescriba las dos lineas sin dejar rastro.
+     * Antes habia dos: al esperar salia el marco entero -barra, entrada, barra,
+     * linea de ayuda-; al trabajar, una version recortada con otro texto. Se
+     * parecian lo justo para que el cambio de una a otra se viera como un salto.
+     * Palabras del usuario: "aun no es fija... debe ser fija y por debajo deben
+     * pasar los otros mensajes".
+     *
+     * Ahora las dos salen de `buildPromptFrame`, asi que no pueden divergir: quien
+     * toque el marco lo toca en los dos estados a la vez.
+     *
+     * Sin desplegable: el autocompletado de "@" y "/" es del prompt de verdad, que
+     * es quien tiene el teclado. Aqui lo tecleado solo se encola.
      */
-    drawTypeAhead() {
-        const typing = typedText();
+    lineasDeEntrada() {
+        const marco = buildPromptFrame({
+            cols: Math.max(20, process.stdout.columns || 80),
+            rows: process.stdout.rows || 24,
+            input: typedText(),
+            cursorIndex: typedText().length,
+            items: [],
+        });
+        const filas = [...marco.lines];
         const pendientes = queuedCount();
-        const rows = [];
-        if (typing.length > 0) {
-            rows.push(`${chalk.hex("#D97757")("❯")} ${chalk.white(typing)}${chalk.gray("  (enter para encolarlo)")}`);
-        }
         if (pendientes > 0) {
             const plural = pendientes === 1 ? "mensaje en cola" : "mensajes en cola";
-            rows.push(chalk.gray(`  ${pendientes} ${plural}; se enviará al terminar este turno`));
+            filas.push(chalk.gray(`  ${pendientes} ${plural}; se enviará al terminar este turno`));
         }
-        if (rows.length === 0) {
-            this.extraRows = 0;
-            return;
-        }
-        for (const row of rows) {
-            process.stdout.write(`\n\r\x1b[2K${row}`);
-        }
-        process.stdout.write(`\x1b[${rows.length}A\r`);
-        this.extraRows = rows.length;
-    }
-    clearExtraRows() {
-        if (this.extraRows === 0)
-            return;
-        for (let i = 0; i < this.extraRows; i++) {
-            process.stdout.write("\x1b[1B\r\x1b[2K");
-        }
-        process.stdout.write(`\x1b[${this.extraRows}A\r`);
-        this.extraRows = 0;
+        return filas;
     }
     stop() {
         if (!this.isRunning)
@@ -105,7 +139,48 @@ export class DynamicSpinner {
             clearInterval(this.timer);
             this.timer = null;
         }
-        this.clearExtraRows();
-        process.stdout.write("\r\x1b[2K");
+        // Solo se va la linea del spinner. La BARRA se queda.
+        //
+        // Es lo que la hace fija de verdad: entre una herramienta y la siguiente el
+        // spinner se para y vuelve a arrancar, y si la barra se fuera con el, se
+        // veria desaparecer y reaparecer en cada llamada. Quien la retira es el
+        // prompt al abrirse (soltarPie), y ahi el relevo no se nota porque lo que
+        // dibuja justo despues es exactamente el mismo marco.
+        quitarSeccion("spinner");
+    }
+}
+/**
+ * DEJA EL PIE PUESTO MIENTRAS CORRE ALGO
+ *
+ * El spinner solo vivia mientras hablaba el modelo. En cuanto empezaba una
+ * herramienta se paraba, y ahi se acababa lo unico fijo de la pantalla: durante
+ * un `run_command` de veinte segundos, o una lectura de un archivo enorme, no
+ * habia ni cronometro ni forma de saber que seguia vivo. Justo el rato en que
+ * uno se pregunta si se ha colgado.
+ *
+ * EL RETRASO NO ES UN CAPRICHO
+ *
+ * La mayoria de las herramientas tardan milisegundos. Pintar el pie y borrarlo
+ * en el mismo suspiro es un parpadeo en cada llamada, y encima el pie mueve
+ * lineas: veinte herramientas seguidas serian veinte sacudidas. Con 150 ms de
+ * espera, lo rapido no pinta nada y lo lento sale igual.
+ *
+ * El `finally` es obligatorio. Un spinner que se queda corriendo repinta el pie
+ * ocho veces por segundo encima de lo que venga despues -incluido el prompt-, y
+ * de ahi no se sale sin cerrar el programa.
+ */
+export async function conSpinner(etiqueta, tarea, retrasoMs = 150) {
+    let girando = null;
+    const aviso = setTimeout(() => {
+        girando = new DynamicSpinner(etiqueta);
+        girando.start();
+    }, retrasoMs);
+    try {
+        return await tarea();
+    }
+    finally {
+        clearTimeout(aviso);
+        if (girando)
+            girando.stop();
     }
 }

package/extension/background.js

@@ -747,7 +747,13 @@ async function typeTrusted(tabId, frameId, ref, text, submit, replace) {
 async function capturar(tabId) {
   try {
     return await withTrustedTab(tabId, async (target) => {
-      const res = await cdp(target, "Page.captureScreenshot", { format: "png", captureBeyondViewport: false });
+      // JPEG y no PNG, y no es cosmetico. Una captura en PNG de un monitor
+      // normal son 1,3 MB, que en base64 se convierten en 1,75 MB dentro de la
+      // peticion al modelo de vision. Eso no llega: la peticion se muere por el
+      // camino, no vuelve nada, y se lleva por delante uno de los cuatro huecos
+      // de la licencia durante minutos. En JPEG al 70 la misma captura ocupa
+      // unos 120 KB y se lee igual de bien.
+      const res = await cdp(target, "Page.captureScreenshot", { format: "jpeg", quality: 70, captureBeyondViewport: false });
       return { data: res.data, via: "cdp" };
     });
   } catch (err) {
@@ -762,9 +768,9 @@ async function capturar(tabId) {
         if (activa && activa.id !== tabId) previaId = activa.id;
         if (!tab.active) await chrome.tabs.update(tabId, { active: true });
         await sleep(250);
-        const dataUrl = await chrome.tabs.captureVisibleTab(windowId, { format: "png" });
+        const dataUrl = await chrome.tabs.captureVisibleTab(windowId, { format: "jpeg", quality: 70 });
         return {
-          data: String(dataUrl).replace(/^data:image\/png;base64,/, ""),
+          data: String(dataUrl).replace(/^data:image\/\w+;base64,/, ""),
           via: "tabs",
           warning: "el depurador no estaba disponible (¿DevTools abierto?): captura por la via normal",
         };

package/extension/iconos/ORIGEN.md

@@ -0,0 +1,48 @@
+# De dónde salen estos iconos
+
+**Fuente:** `assets/logos/mascota-chocolatito-code.png` — el zorrito **pixelado**, el mismo
+que aparece en la cabecera del CLI y en la ficha del producto.
+
+## Cuidado con cuál se coge
+
+En `assets/logos/` hay dos zorros y **no son la misma marca**:
+
+| Archivo | Qué es | ¿Sirve para la extensión? |
+| --- | --- | --- |
+| `mascota-chocolatito-code.png` | El zorrito pixelado. **Chocolatito Code** | ✅ Este |
+| `logo-chocolatito.png` | El zorro vectorial. **Chocolatito**, la marca madre | ❌ Este no |
+
+Ya se coló el equivocado una vez: la extensión salió con el zorro de la marca madre y lo
+detectó el dueño de un vistazo. No hay prueba automática que lo cace — se distinguirían por el
+número de colores (674 contra 1707), pero ese umbral se rompe con cualquier retoque legítimo, y
+una prueba frágil es peor que ninguna. Por eso está escrito aquí.
+
+## Cómo se regeneran
+
+Con Python y Pillow, desde la raíz del repositorio:
+
+```python
+from PIL import Image
+img = Image.open("assets/logos/mascota-chocolatito-code.png").convert("RGBA")
+img = img.crop(img.split()[3].getbbox())          # fuera el aire de alrededor
+
+lado = max(img.size)
+margen = max(1, int(lado * 0.08))                  # sin margen, Chrome recorta el borde
+lienzo = Image.new("RGBA", (lado + margen * 2,) * 2, (0, 0, 0, 0))
+lienzo.paste(img, ((lienzo.width - img.width) // 2, (lienzo.height - img.height) // 2), img)
+
+for tam in (16, 32, 48, 128):
+    # NEAREST hasta 48: es pixel art, y suavizarlo lo convierte en un borron.
+    # A 16 px la diferencia es entre verse y no verse.
+    filtro = Image.NEAREST if tam <= 48 else Image.LANCZOS
+    lienzo.resize((tam, tam), filtro).save(f"extension/iconos/{tam}.png")
+```
+
+**Míralos a 16 px antes de darlos por buenos.** A 128 todo parece correcto; el tamaño real es
+donde se cae. Es lo que fallo con el primer intento, que recortaba una "C" del logotipo y salían
+las dos "C" de las dos filas apiladas.
+
+## El otro archivo
+
+`logotipo.png` es el logotipo completo de dos filas a 320 px, y va en la cabecera de
+`popup.html` — ahí sí hay sitio para que se lea entero.

package/extension/manifest.json

@@ -1,60 +1,60 @@
-{
-  "manifest_version": 3,
-  "minimum_chrome_version": "102",
-  "name": "Chocolatito Code",
-  "version": "1.2.0",
-  "description": "Deja que Chocolatito Code trabaje dentro de tu Chrome, en segundo plano y con tus sesiones ya iniciadas.",
-  "permissions": [
-    "tabs",
-    "tabGroups",
-    "scripting",
-    "debugger",
-    "webNavigation",
-    "storage",
-    "downloads"
-  ],
-  "host_permissions": [
-    "<all_urls>"
-  ],
-  "icons": {
-    "16": "iconos/16.png",
-    "32": "iconos/32.png",
-    "48": "iconos/48.png",
-    "128": "iconos/128.png"
-  },
-  "background": {
-    "service_worker": "background.js"
-  },
-  "content_scripts": [
-    {
-      "matches": [
-        "<all_urls>"
-      ],
-      "js": [
-        "content.js"
-      ],
-      "run_at": "document_idle",
-      "all_frames": true
-    }
-  ],
-  "action": {
-    "default_title": "Chocolatito Code",
-    "default_popup": "popup.html",
-    "default_icon": {
-      "16": "iconos/16.png",
-      "32": "iconos/32.png",
-      "48": "iconos/48.png"
-    }
-  },
-  "web_accessible_resources": [
-    {
-      "resources": [
-        "iconos/*",
-        "fuentes/*"
-      ],
-      "matches": [
-        "<all_urls>"
-      ]
-    }
-  ]
-}
+{
+  "manifest_version": 3,
+  "minimum_chrome_version": "102",
+  "name": "Chocolatito Code",
+  "version": "1.3.1",
+  "description": "Deja que Chocolatito Code trabaje dentro de tu Chrome, en segundo plano y con tus sesiones ya iniciadas.",
+  "permissions": [
+    "tabs",
+    "tabGroups",
+    "scripting",
+    "debugger",
+    "webNavigation",
+    "storage",
+    "downloads"
+  ],
+  "host_permissions": [
+    "<all_urls>"
+  ],
+  "icons": {
+    "16": "iconos/16.png",
+    "32": "iconos/32.png",
+    "48": "iconos/48.png",
+    "128": "iconos/128.png"
+  },
+  "background": {
+    "service_worker": "background.js"
+  },
+  "content_scripts": [
+    {
+      "matches": [
+        "<all_urls>"
+      ],
+      "js": [
+        "content.js"
+      ],
+      "run_at": "document_idle",
+      "all_frames": true
+    }
+  ],
+  "action": {
+    "default_title": "Chocolatito Code",
+    "default_popup": "popup.html",
+    "default_icon": {
+      "16": "iconos/16.png",
+      "32": "iconos/32.png",
+      "48": "iconos/48.png"
+    }
+  },
+  "web_accessible_resources": [
+    {
+      "resources": [
+        "iconos/*",
+        "fuentes/*"
+      ],
+      "matches": [
+        "<all_urls>"
+      ]
+    }
+  ]
+}