El Problema: El «Done» no me daba dopamina
Hablemos claro. El momento más esperado del día de un desarrollador es mover la tarjetita de «Doing» a «Done». O darle al tick verde en ClickUp.
Pero seamos sinceros… es decepcionante. Un pequeño «pop» y ya está. ¿Dónde está la gloria? ¿Dónde está el desafío? ¿Dónde está la fanfarria?
La semana pasada, harto de la burocracia de cerrar tareas, pensé: «Si voy a trabajar, al menos quiero que sea un reto».
Y así, en una tarde de vibe coding y cafeína, nació TaskQuest.
¿Qué demonios es TaskQuest?
Es la extensión de Chrome más anti-productiva (y a la vez satisfactoria) que vas a instalar.
Su función es simple: Secuestra tu ClickUp.
- Intentas darle al botón de «Completar Tarea».
- ¡QUIETO AHÍ! 🛑 Nada de cerrar tickets gratis.
- Aparece un overlay con un minijuego (tipo Flappy Bird o Marcianitos).
- ❌ Si pierdes: La tarea se queda abierta. Tu jefe te mira mal. Tu dignidad cae.
- ✅ Si ganas: Se dispara el evento, la tarea se cierra y sientes que eres el rey del mundo.
Mira el desastre en acción:
(Aquí incrustas el vídeo de Screen Studio)
La parte técnica: Cómo hackear una SPA sin morir en el intento
Nota: Si no eres dev, puedes saltarte esto e ir a la descarga. Si eres dev, esto te interesa.
Lo gracioso de TaskQuest no es el juego (es un Canvas básico de JS). Lo difícil fue la «fontanería» para que funcionase en una web moderna como ClickUp.
ClickUp es una SPA (Single Page Application) hecha en React. Esto significa que el botón de «Completar» no existe cuando cargas la página; aparece y desaparece dinámicamente según navegas.
El reto técnico: Si usas un document.querySelector normal al cargar la página, te devolverá null y tu extensión fallará.
La solución: Tuve que implementar MutationObservers para vigilar el DOM de ClickUp en tiempo real. La extensión «espía» la web y, en el milisegundo exacto en que React renderiza el botón de cerrar tarea, le inyecta mi Event Listener malicioso que bloquea la acción original.
Es sucio. Es complejo. Pero funciona de maravilla.
Descargas (Elige tu píldora)
He preparado dos opciones. Una para los que quieren sufrir jugando y otra para los que quieren aprender cómo lo hice.
🎮 Para Usuarios (Gratis)
Bájate la extensión, cárgala en tu Chrome y empieza a gamificar tu sufrimiento. (Nota: Requiere activar «Modo Desarrollador» en Chrome).
👨💻 Para Desarrolladores (Source Code)
¿Quieres crear tu propia extensión que modifique webs como Gmail, Twitter o LinkedIn?
Te ahorrarás unas 10-15 horas de pelearte con la documentación de Chrome Manifest V3 y la inyección de scripts en SPAs.
¿Qué incluye el ZIP?
- 📂 Proyecto completo (HTML/JS/CSS).
- 📜 El
manifest.jsonV3 configurado correctamente. - 🧠 El script de inyección con
MutationObserver(la joya de la corona). - 📝 README en español explicando dónde tocar para adaptarlo a otra web.