Herramientas internas · Extensión de Chromium en JavaScript
Extensión de Chromium que redujo 80 % los errores en tickets en HSBC México
Una extensión en JavaScript para buscar en el DOM, guardar itempaths y verificar los pasos de desarrollo y control de calidad de cada ticket, usada por un equipo de más de 20 desarrolladores.
- Rol
- Web Production Manager
- Año
- 2025
- Tecnologías
- JavaScript · HTML · CSS · Manifest V3 · API de extensiones de Chromium · Git · GitHub
El popup de la extensión: las pestañas Ticket QC y Doc Search, renderizadas desde el repositorio público.
En HSBC México desarrollé una extensión de Chromium en JavaScript, versionada y distribuida con Git, para los tickets del equipo de desarrollo web. Busca en el DOM, guarda itempaths y verifica los pasos de desarrollo y control de calidad de cada ticket. Su uso redujo los errores un 80 % en un equipo de más de 20 desarrolladores, según auditorías mensuales. Es una herramienta interna que no expone contenido sensible, y su código es público en GitHub.
Problema
Cada ticket seguía pasos que debían aplicarse siempre igual: revisar el contexto, clasificar adjuntos, agregar itempaths, comentarios y QA links, y pasos adicionales en los tickets que eliminan páginas. En un equipo de más de 20 desarrolladores, omitir un paso generaba errores, y ubicar los elementos correctos en el DOM de cada página requería trabajo manual.
Solución
Construí una extensión con Manifest V3, JavaScript puro, HTML y CSS y sin dependencias externas. Un popup con pestañas agrupa las herramientas, un content script corre en la página y se comunica con el popup mediante mensajes, y la configuración persiste en el navegador. La versioné con Git y la distribuí al equipo.
Cómo funciona
Construí una extensión con Manifest V3, JavaScript puro, HTML y CSS y sin dependencias externas. Un popup con pestañas agrupa las herramientas, un content script corre en la página y se comunica con el popup mediante mensajes, y la configuración persiste en el navegador. La versioné con Git y la distribuí al equipo.
Búsqueda DOM
Ubicar los elementos en la página
Itempaths
Guardar las rutas de los items
Checklist
Verificar pasos de desarrollo y QC
Ticket
Comentarios y QA links agregados
Trabajo realizado
Búsqueda en el DOM, itempaths y checklist de control de calidad.
Búsqueda y resaltado en el DOM
Link Finder resalta enlaces de la página por URL o por texto visible, con búsqueda parcial o exacta y color y tamaño personalizados.
Búsqueda de documentos
Doc Search escanea la página con un selector de referencia y un selector de cuerpo, lista los elementos encontrados y aplica el resaltado a cada uno con su propio color y tamaño.
Checklist de control de calidad
Un checklist por tipo de ticket (amend, demise y new page) cubre el contexto, la clasificación de adjuntos, los TODOs y los pasos que exige cada tipo, como redirecciones, crawl y entrypoints en los tickets demise.
Itempaths y comentarios
La extensión conserva los itempaths, copia los comentarios de los TODOs y confirma que se agregaron itempaths, comentarios y QA links al ticket.
Limpiador de texto
Un limpiador convierte texto a formato tipo slug y lo copia.
Versionado y distribución
Versioné la extensión con Git y la distribuí al equipo; el repositorio es público en GitHub.
Resultados
Menos errores en el equipo de desarrollo.
80 % menos errores
Los errores bajaron un 80 % en un equipo de más de 20 desarrolladores, según auditorías mensuales.
Los mismos pasos en cada ticket
El checklist volvió explícitos y repetibles los pasos de desarrollo y control de calidad de cada tipo de ticket.
Herramienta interna, código público
La extensión no expone contenido sensible y su código fuente está disponible en GitHub.
Habilidades aplicadas
- Desarrollo de extensiones de Chromium
- JavaScript
- Manipulación del DOM
- Manifest V3
- Control de calidad
- Herramientas internas
- Git y GitHub