Files

Carlos Narro 95d59acc91 CLAUDE.md: alta como proyecto — especialidad desarrollo de la extensión MV3

Manual operativo del proyecto: arquitectura (content.js + use.html snapshot),
cómo cargar/probar sin build, y gotchas (fragilidad ante cambios de claude.ai,
Boost 2x caduco, supuesto semanal-lunes).

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

2026-07-28 13:54:07 +02:00

3.6 KiB

Raw Permalink Blame History

Claude Usage Tracker — extensión de Chrome (MV3)

Extensión de navegador (Manifest V3) que mejora la página de uso de Claude (https://claude.ai/settings/usage): parte la barra de cuota semanal en los 7 días, muestra info de sesión, y añade un FAB con el uso usado/ideal. Todo local en el navegador; no manda nada a ningún servidor.

Objetivo de este proyecto: iterar sobre la extensión para mejorarla. No hay build ni servidor — es JS/CSS vanilla que se carga sin empaquetar en Chrome/Edge y actúa como content script sobre claude.ai.

Tu rol

Eres experto en extensiones Chrome MV3 y en la estructura del DOM de la página de uso de claude.ai. Mejora la extensión con cambios mínimos y probados. No inventes un pipeline: aquí no hay npm, ni bundler, ni tests automatizados — se edita el fichero y se recarga en el navegador.

Ficheros

Fichero	Qué es
`manifest.json`	MV3. `permissions: ["storage"]`, `content_scripts` con `matches: ["https://claude.ai/*"]`, `run_at: document_idle`, inyecta `content.js` + `styles.css`. No declara iconos ni `action`/popup ni `background` → es puramente content script
`content.js` (~38 KB)	El motor. Escanea el DOM de la página de uso, extrae el % de uso, dibuja el tracker semanal (7 días, verde/amarillo/rojo), la info de sesión (inicio/actual/duración) y el FAB miniatura (usado/ideal de sesión y semanal). Sesión guardada en `localStorage` (`claude_usage_tracker_session`, ventana de 4 h). Incluye una config de promo "Boost 2×" con fechas hardcodeadas (marzo 2026, peak hours ET)
`styles.css` (~11 KB)	Estilos del tracker, FAB y modal
`use.html` (~82 KB)	Snapshot de la página real de uso (`data-org-plan="claude_max"`, dark). Es el DOM que `content.js` debe parsear → úsalo como fixture para razonar sobre selectores sin depender de la web viva
`icons/icon.svg`	Icono fuente. No hacen falta PNGs (el manifest v3 no referencia iconos; el README los pedía pero está obsoleto)
`README.md`	Descripción de features + instalación (ojo: el paso "crear iconos PNG" está desfasado)

Cómo desarrollar y probar

Editar content.js / styles.css.
Cargar sin empaquetar (una vez): chrome://extensions → Modo de desarrollador → Cargar extensión sin empaquetar → esta carpeta.
Tras cada cambio: botón ↻ recargar de la extensión en chrome://extensions y recargar la pestaña https://claude.ai/settings/usage.
Para iterar sobre la lógica de parseo sin la web viva, abrir use.html en el navegador y probar contra ese DOM.

"Instalar" (cuando esté lista) = exactamente el paso 2. No hay despliegue web.

Gotchas

Frágil ante cambios de claude.ai: los selectores de content.js dependen de la estructura real de claude.ai/settings/usage, que Anthropic cambia sin avisar. Si el tracker deja de pintar, lo primero es re-inspeccionar el DOM (y el use.html snapshot puede haber quedado desfasado → recapturarlo).
Config "Boost 2×" caduca: fechas de marzo 2026 hardcodeadas en content.js (BOOST_END_DATE, PEAK_START_UTC…). Revisar si sigue vigente o generalizar.
Supuestos del cálculo: asume reinicio semanal los lunes y uso ideal 100%/7 ≈ 14.29%/día. El ciclo real de cuota de Anthropic puede no ser semanal-lunes; verificar antes de fiarse de los colores.
Privacidad: los datos de sesión viven solo en localStorage; nada sale a servidores. Mantenerlo así.

Git

Repo privado en Gitea: https://git.carlosnarro.com/carlos/claude-use-extension (rama main). No hay CI/deploy — commit + push y ya.

3.6 KiB Raw Permalink Blame History Unescape Escape