saas-tpl-chrome-ext

Chrome MV3 extension sub-template for d0a1 SDD. WXT 0.20.27, TypeScript strict, Biome 2.x, Vitest.

Instanciado vía sdd-init-tpl:

bash scripts/assemble.sh install chrome-extension my-extension

Stack

Layer	Tool	Version
Build	WXT	0.20.27
Language	TypeScript	6.0.3 (strict)
Lint/Format	Biome	2.5.1 (no ESLint/Prettier)
Testing	Vitest	4.1.9
Validation	Zod	4.4.3
Commits	commitlint	21.1.0
Hooks	lefthook	2.1.9 (Go binary)

Develop

pnpm install
pnpm wxt prepare
pnpm dev   # launches WXT dev browser

Build

pnpm build
# Load .output/chrome-mv3 as unpacked extension in Chrome

Validate

pnpm validate  # typecheck + lint + test

License

Apache-2.0

Iconos

public/icons/icon-{16,32,48,128}.png se generan con python3 scripts/generate_icons.py (Pillow):

python3 scripts/generate_icons.py          # escribe public/icons/

Un solo diseño para los cuatro tamaños: cuadro redondeado oscuro con degradado vertical y halo cálido, y un único glifo — la cabeza del gato pixel-art (orejas, ojos y hocico) en naranja GS. Sin texto: a 16 px es ilegible y parece un placeholder. Los cuatro PNG salen del mismo máster de 1024 px con LANCZOS, así que no hay cuatro dibujos distintos. No editar los PNG a mano.

Internacionalización (i18n)

Inglés por defecto (default_locale: "en") y castellano completo, mismo juego de claves en public/_locales/{en,es}/messages.json. Nada de texto de UI hardcodeado en HTML o TS.

• El HTML marca los elementos con data-i18n, data-i18n-aria-label o data-i18n-title.
• applyI18n() en src/entrypoints/sidepanel/main.ts rellena textos y atributos, y fija <html lang> al idioma del navegador (chrome.i18n.getUILanguage()).
• Regla dura: cada clave usada existe en los dos ficheros; una clave ausente se renderiza vacía sin lanzar error, así que se revisa en el PR.
• Valores con número van por plantilla ($1): xpProgress, xpMax, minutesShort.

Onboarding y ayuda

El panel incluye <details id="how-section"> con cinco puntos: la mascota nace como huevo y evoluciona por 6 etapas con XP; 2 XP por minuto de foco; el pomodoro completo da +50 XP y sube salud (abandonarlo cuesta 10 XP); la salud baja al distraerse; la racha cuenta sesiones de foco completadas seguidas y se reinicia con una distracción; una distracción es cambiar de pestaña en menos de 30 s. Cierra con la nota de privacidad: el Modo IA analiza el texto en el dispositivo.

Se abre solo la primera vez (flag gs-how-seen en browser.storage.local) y queda accesible después desde el propio panel.

v0.3.2 — aclaraciones de UX y mascota estable

• Bajo "Distracciones" hay un subtítulo: qué cuenta como distracción (−5 XP, −3 salud) y sobre qué pestaña se mide (título de la pestaña activa) o, si el navegador no la expone, que no hay pestaña objetivo fija y se mide la pestaña en la que estás.
• "Cómo funciona" añade ese mismo detalle y el modelo implícito: no hay pestaña fija, se mide la pestaña activa (5+ min en ella dan XP).
• La mascota ya no se repinta en cada ciclo: el canvas solo se redibuja si cambian etapa o ánimo, y cada nodo se escribe solo cuando su valor cambia. Al tocarla hace un rebote (respeta prefers-reduced-motion) y nunca se desmonta.