chocolatito-code 1.3.0 → 1.3.2

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/selector.d.ts

@@ -0,0 +1,37 @@
+/**
+ * UNA LISTA POR LA QUE SE PUEDE SUBIR Y BAJAR
+ *
+ * `/effort` no era un menu: era un `console.log` con las cuatro opciones y una
+ * frase al final que decia "selecciona con /effort 2.0". El usuario lo vio en
+ * pantalla como una lista, hizo lo unico razonable -pulsar las flechas- y no
+ * paso nada. Sus palabras: "me salen en pantalla los modelos pero no puedo
+ * subir y bajar entre ellos con las flechitas".
+ *
+ * Una lista que parece elegible y no lo es engaña dos veces: primero no
+ * funciona, y despues hay que leerse la letra pequeña para descubrir que habia
+ * que escribir el comando otra vez con un argumento.
+ *
+ * POR QUE NO SE REUTILIZO EL DIALOGO DE PERMISOS
+ *
+ * Hace lo mismo -flechas y Enter- pero tiene dentro toda la logica de aprobar,
+ * rechazar, recordar patrones y pedir explicacion por escrito. Sacar de ahi la
+ * parte de elegir habria sido tocar el camino por el que pasa CADA accion con
+ * consecuencias del agente, y por un menu que se abre de higos a brevas. Esto
+ * son sesenta lineas que no tocan nada de eso.
+ */
+export interface OpcionDeLista {
+    /** Lo que se devuelve al elegirla. */
+    id: string;
+    /** Primera linea, la que se lee. */
+    titulo: string;
+    /** Segunda linea en gris. Opcional. */
+    detalle?: string;
+}
+/**
+ * Enseña la lista y devuelve el id elegido. `null` si se sale con Esc.
+ *
+ * Sin terminal no hay nada que elegir: devuelve null en el acto en vez de
+ * quedarse esperando una tecla que no va a llegar nunca. Es lo que pasaria al
+ * correrlo desde un script o dentro de las pruebas.
+ */
+export declare function elegirDeLista(titulo: string, opciones: OpcionDeLista[], indiceInicial?: number): Promise<string | null>;

package/dist/ui/selector.js

@@ -0,0 +1,81 @@
+import chalk from "chalk";
+import process from "node:process";
+import readline from "node:readline";
+import { dibujar } from "./salida.js";
+/**
+ * Enseña la lista y devuelve el id elegido. `null` si se sale con Esc.
+ *
+ * Sin terminal no hay nada que elegir: devuelve null en el acto en vez de
+ * quedarse esperando una tecla que no va a llegar nunca. Es lo que pasaria al
+ * correrlo desde un script o dentro de las pruebas.
+ */
+export async function elegirDeLista(titulo, opciones, indiceInicial = 0) {
+    if (opciones.length === 0)
+        return null;
+    if (!process.stdin.isTTY)
+        return null;
+    return new Promise((resolve) => {
+        let elegido = Math.max(0, Math.min(indiceInicial, opciones.length - 1));
+        if (!readline.__choco_keypress) {
+            readline.emitKeypressEvents(process.stdin);
+            readline.__choco_keypress = true;
+        }
+        const eraCrudo = process.stdin.isRaw;
+        if (process.stdin.setRawMode)
+            process.stdin.setRawMode(true);
+        process.stdin.resume();
+        /** Filas del ultimo dibujo. Se repinta encima, sin dejar restos. */
+        let filas = 0;
+        function pintar() {
+            const lineas = ["", chalk.bold.hex("#E4CDEC")(titulo), ""];
+            opciones.forEach((o, i) => {
+                const puesto = i === elegido;
+                const punta = puesto ? chalk.bold.hex("#D97757")(" ❯ ") : "   ";
+                const nombre = puesto ? chalk.bold.white(o.titulo) : chalk.hex("#A855F7")(o.titulo);
+                lineas.push(`${punta}${nombre}`);
+                if (o.detalle)
+                    lineas.push(`     ${chalk.gray(o.detalle)}`);
+            });
+            lineas.push("", chalk.gray("   ↑↓ para moverte · enter para elegir · esc para salir"), "");
+            // Se sube justo lo que se escribio la vez anterior: ni una fila mas, ni
+            // una menos. Contar de mas se come la linea de encima.
+            const salida = (filas > 0 ? `\x1b[${filas}A` : "") + lineas.map((l) => `\r\x1b[2K${l}`).join("\n") + "\n";
+            dibujar(salida);
+            filas = lineas.length;
+        }
+        function terminar(valor) {
+            process.stdin.removeListener("keypress", alPulsar);
+            // Se devuelve el modo que habia, no se fuerza uno: si el prompt tenia el
+            // teclado en crudo y aqui se dejara en cocido, la sesion se queda sin
+            // poder escribir y no se sabe por que.
+            if (process.stdin.setRawMode)
+                process.stdin.setRawMode(eraCrudo || false);
+            resolve(valor);
+        }
+        function alPulsar(_str, key) {
+            if (!key)
+                return;
+            if (key.name === "up" || (key.name === "k" && !key.ctrl)) {
+                elegido = (elegido - 1 + opciones.length) % opciones.length;
+                pintar();
+            }
+            else if (key.name === "down" || (key.name === "j" && !key.ctrl)) {
+                elegido = (elegido + 1) % opciones.length;
+                pintar();
+            }
+            else if (key.name === "return" || key.name === "enter") {
+                terminar(opciones[elegido].id);
+            }
+            else if (key.name === "escape") {
+                terminar(null);
+            }
+            else if (key.ctrl && key.name === "c") {
+                // Ctrl+C aqui es "sal del menu", no "cierra el programa": estas
+                // eligiendo, no ejecutando nada.
+                terminar(null);
+            }
+        }
+        pintar();
+        process.stdin.on("keypress", alPulsar);
+    });
+}

package/dist/ui/spinner.d.ts

@@ -19,13 +19,41 @@ export declare class DynamicSpinner {
      */
     private lineaDelSpinner;
     /**
-     * La barra de escribir, debajo del spinner.
+     * LA BARRA. La MISMA que se ve al escribir una orden, no una parecida.
      *
-     * Antes solo aparecia si ya habias escrito algo, asi que mientras el agente
-     * trabajaba no habia ninguna senal de que se pudiera escribir: el teclado es
-     * del vigilante y lo tecleado se acumulaba a ciegas. Ahora la barra esta
-     * siempre, y es la misma que se ve al escribir el prompt.
+     * 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

@@ -1,8 +1,8 @@
 import chalk from "chalk";
 import process from "node:process";
 import { typedText, queuedCount } from "./typeAhead.js";
-import { modeBadge } from "./modes.js";
-import { fijarSecciones } from "./pieFijo.js";
+import { fijarSecciones, quitarSeccion } from "./pieFijo.js";
+import { buildPromptFrame } from "./marco.js";
 /**
  * LA LINEA QUE DICE QUE ESTO SIGUE VIVO
  *
@@ -31,18 +31,6 @@ const VERBS = [
     "Tejiendo",
     "Cocinando",
 ];
-const PISTA_VACIA = "escribe para encolar un mensaje…";
-function sinColores(texto) {
-    return texto.replace(/\x1b\[[0-9;]*m/g, "");
-}
-/** Deja las ULTIMAS `ancho` columnas: al escribir, lo que importa es el final. */
-function colaVisible(texto, ancho) {
-    if (ancho <= 0)
-        return "";
-    if (texto.length <= ancho)
-        return texto;
-    return `…${texto.slice(-(ancho - 1))}`;
-}
 export class DynamicSpinner {
     timer = null;
     glyphIdx = 0;
@@ -89,42 +77,43 @@ export class DynamicSpinner {
      * 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 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();
-        if (!badge)
-            return izquierda;
-        const anchoBadge = sinColores(badge).length;
-        const hueco = cols - anchoIzq - anchoBadge;
-        return hueco >= 2 ? `${izquierda}${" ".repeat(hueco)}${badge}` : izquierda;
+        // El modo YA NO va aqui. Vive en la linea de estado de la barra, que ahora
+        // es la misma en los dos estados: repetirlo era decir dos veces lo mismo en
+        // dos sitios que no siempre coincidian, y ademas obligaba a cuadrar anchos a
+        // mano justo en la linea mas propensa a partirse en dos filas.
+        return `${glyph} ${verb} ${cola}`;
     }
     /**
-     * La barra de escribir, debajo del spinner.
+     * 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.
      *
-     * Antes solo aparecia si ya habias escrito algo, asi que mientras el agente
-     * trabajaba no habia ninguna senal de que se pudiera escribir: el teclado es
-     * del vigilante y lo tecleado se acumulaba a ciegas. Ahora la barra esta
-     * siempre, y es la misma que se ve al escribir el prompt.
+     * Sin desplegable: el autocompletado de "@" y "/" es del prompt de verdad, que
+     * es quien tiene el teclado. Aqui lo tecleado solo se encola.
      */
     lineasDeEntrada() {
-        const cols = Math.max(20, process.stdout.columns || 80);
-        const typing = typedText();
+        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 simbolo = chalk.bold.hex("#D97757")("❯");
-        const cuerpo = typing.length > 0
-            ? `${chalk.white(colaVisible(typing, cols - 3))}${chalk.hex("#D97757")("▌")}`
-            : chalk.gray(colaVisible(PISTA_VACIA, cols - 2));
-        const filas = [chalk.gray("─".repeat(cols)), `${simbolo} ${cuerpo}`];
         if (pendientes > 0) {
             const plural = pendientes === 1 ? "mensaje en cola" : "mensajes en cola";
             filas.push(chalk.gray(`  ${pendientes} ${plural}; se enviará al terminar este turno`));
@@ -139,11 +128,48 @@ export class DynamicSpinner {
             clearInterval(this.timer);
             this.timer = null;
         }
-        // Las dos de golpe: quitarlas por separado deja un fotograma con la barra
-        // de escribir suelta y sin spinner encima.
-        fijarSecciones([
-            ["spinner", []],
-            ["entrada", []],
-        ]);
+        // 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/manifest.json

@@ -1,60 +1,60 @@
-{
-  "manifest_version": 3,
-  "minimum_chrome_version": "102",
-  "name": "Chocolatito Code",
-  "version": "1.3.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.2",
+  "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>"
+      ]
+    }
+  ]
+}