Constructor de Extensiones de Chrome TL;DR Crawler

Construye una extensión de Chrome (Manifest V3) llamada "TL;DR Crawler" que funcione en cualquier página web normal. QUÉ HACE Haz clic en el ícono de la barra de herramientas: aparece una araña dibujada con líneas en la página actual, sigue tu cursor (también mientras te desplazas), lee el texto sobre el que camina y crea un breve TL;DR en un panel flotante. Haz clic en el ícono nuevamente: todo desaparece y la página queda exactamente como antes. 1. ALTERNAR - background.js: chrome.action.onClicked inyecta content.js con chrome.scripting.executeScript. - content.js verifica un indicador global. Si el rastreador ya está en ejecución, se apaga y limpia. De lo contrario, se inicia. Solo una instancia por pestaña, siempre. 2. ENCONTRAR EL TEXTO - Encuentra el área legible principal: prefiere <article> o <main>; de lo contrario, el elemento con más texto de párrafo. Omite nav, header, footer, aside, menús, formularios, código, anuncios y elementos ocultos. - Recopila bloques de texto (p, li, blockquote, h2-h4) y divídelos en oraciones. Almacena cada oración como un Rango DOM (las oraciones pueden abarcar enlaces y texto en negrita, así que NO las envuelvas en elementos). - Observa el área con un MutationObserver con debounce (1s) para capturar texto cargado más tarde (scroll infinito, contenido diferido). 3. SELECCIONAR ORACIONES CLAVE - Puntúa cada oración: +2 por dígitos, +2 por %, $, €, million, billion; +1.5 por palabras como first, record, launch, announce, new, only, biggest, fastest, warns, raises, cuts; +0.3 por nombre en mayúscula (máx. +2); -2 si tiene menos de 40 o más de 260 caracteres. - Marca el 25% superior como oraciones clave (mín. 5, máx. 80), distribuidas para que la mayoría de los párrafos tengan una. - Resúmenes, máx. 9 palabras cada uno: - Si hay una clave API configurada: envía todas las oraciones clave en UNA solicitud a Claude y pide un arreglo JSON de resúmenes cortos y simples (máx. 9 palabras, conserva números y nombres exactamente, sin exageraciones). Solicita nuevamente en lotes cuando aparezca texto nuevo. - Sin clave: resumen alternativo = la oración con palabras de relleno eliminadas (and, but, however, also, according to), cortada en un límite de palabra con "…". 4. LA ARAÑA - Host de Shadow DOM en la raíz del documento que contiene un <canvas> fijo de pantalla completa (pointer-events: none, z-index 2147483646) y el panel. - Apariencia: cuerpo pequeño de rectángulo redondeado, abdomen elíptico, cabeza con dos ojos blancos, contornos en #5ab8ff. 8 patas como líneas azules de 3px con puntos de articulación rosados (#ff4f7a), dos segmentos cada una con cinemática inversa, rodillas dobladas hacia afuera. - Marcha: dos grupos de patas alternados. Una pata solo da un paso cuando está a ~80px de su punto ideal y el otro grupo está plantado. Los pasos duran 0.13s con una pequeña elevación, aterrizando ligeramente adelante en la dirección del movimiento. - Movimiento: objetivo = posición del cursor + scroll, para que siga mientras te desplazas. Máx. ~420 px/s, aceleración suave, se detiene a ~40px del cursor, gira suavemente hacia su dirección. Si el cursor está inactivo durante 8s, deambula por el viewport. - requestAnimationFrame con un paso de física fijo de 1/120s. Soporta devicePixelRatio y redimensionamiento de ventana. 5. RASTREO - Cada 80ms y en cada aterrizaje de pata, encuentra el texto bajo la araña con document.caretRangeFromPoint (ignora los elementos propios de la extensión). - Si ese punto está dentro de una oración clave aún no encontrada: resáltala con la API CSS Custom Highlight (::highlight(tldr-found) con un fondo amarillo suave) y agrega su resumen al panel. - Si una pata aterriza en una palabra normal: en ~25% de los casos, altera solo esa palabra. Envuelve solo esa palabra en un span (es un solo nodo de texto, así que es seguro) y aplica un efecto aleatorio: fuente monoespaciada, contorno azul, resaltado azul, ligera rotación, espaciado amplio de letras, desenfoque o mayúsculas. Máx. 2 efectos por palabra. Registra cada cambio para poder deshacerlo. 6. PANEL - Arriba a la derecha, arrastrable por su encabezado, dentro del Shadow DOM para que el CSS del sitio no pueda afectarlo. - Oscuro (#16181c), título mono "TL;DR" en amarillo (#ffd166), un contador "encontrado / total", una barra de progreso rosa y una lista numerada en orden de artículo. El elemento más nuevo parpadea en amarillo y la lista se desplaza automáticamente hacia él. La lista se desplaza dentro de una altura máxima. - Botones: "Copiar TL;DR" (texto plano al portapapeles), "Reiniciar" (limpia resaltados, alteraciones y la lista) y "Cerrar" (apagado completo). - Si hay una clave configurada, agrega "Escribir TL;DR con Claude": envía todas las oraciones encontradas y devuelve 3 líneas cortas usando solo sus hechos, números sin cambios. Muestra un estado "Pensando...", luego la respuesta debajo de la lista. 7. CLAVE API - options.html: un campo para la clave API de Anthropic del usuario y un nombre de modelo, almacenados en chrome.storage.local. - Todas las llamadas API pasan por background.js con fetch a https://api.anthropic.com, con encabezados x-api-key, anthropic-version: 2023-06-01 y content-type: application/json. - Maneja errores silenciosamente: si una llamada falla, conserva los resúmenes alternativos y muestra una pequeña nota "IA no disponible". 8. REGLAS DE CALIDAD - Nunca rompas el desplazamiento, los clics, los enlaces o la selección de texto del sitio. - Limpieza completa al apagar: canvas, panel, resaltados, spans envueltos, estilos en línea, listeners, observadores, temporizadores. - prefers-reduced-motion: sin alteraciones, caminar más lento. - JavaScript puro, sin librerías. Archivos: manifest.json, background.js, content.js, options.html, options.js, íconos (16, 48, 128). - Permisos: activeTab, scripting, storage. Permiso de host: https://api.anthropic.com/*. Al final, da los pasos de instalación: abre chrome://extensions, activa el modo desarrollador, haz clic en "Cargar descomprimida", selecciona la carpeta, luego abre opciones y pega la clave API.