20.671 - Desarrollo de aplicaciones interactivas - Aula 1

Pública

Autora: Nathalia Carolina Padrón

Proyecto: Desarrollo de una extensión para Firefox que registra y muestra el tiempo que le dedicas a cada sitio web

Introducción

En este proyecto se ha desarrollado una extensión para el navegador Mozilla Firefox con el objetivo de mejorar la experiencia de navegación del usuario. A lo largo del trabajo se han abordado distintas fases, desde la idea inicial hasta la implementación y pruebas finales.

Concepto

Una extensión de navegador es un pequeño software que añade funcionalidades adicionales a un navegador web. En este caso, la extensión desarrollada permite ampliar las capacidades de Firefox, adaptándolo a necesidades específicas del usuario.

Finalidad y uso

La aplicación tiene como finalidad principal ayudar al usuario a tomar conciencia del tiempo que dedica a distintas páginas web durante su navegación diaria.

A diferencia de otras herramientas de control, esta extensión no limita el uso ni interrumpe la experiencia, sino que ofrece una visualización constante y accesible del tiempo transcurrido.

Entre sus principales casos de uso se encuentran:

• Controlar el tiempo dedicado a tareas de trabajo o estudio
• Detectar el uso excesivo de páginas de entretenimiento o redes sociales
• Analizar hábitos de navegación a lo largo del día
• Consultar de forma rápida el tiempo acumulado mediante el registro diario

Estructura técnica del proyecto

La extensión ha sido desarrollada utilizando tecnologías web como HTML, CSS y JavaScript, creando una interfaz sencilla e interactiva dentro del navegador Mozilla Firefox.

El popup de la extensión está diseñado con HTML y CSS, mientras que JavaScript se encarga de actualizar dinámicamente los elementos del DOM para mostrar información en tiempo real. La interacción con el usuario se realiza mediante botones que permiten reiniciar el tiempo registrado y consultar el historial de actividad diaria.

Para la gestión de datos, se utiliza el sistema de almacenamiento local del navegador (browser.storage.local), donde se guarda el tiempo de uso organizado por día y dominio. Esto permite mantener la información incluso después de cerrar el navegador, facilitando su recuperación y visualización en cualquier momento.

A nivel técnico, el proyecto se estructura en varios archivos con funciones específicas:

• manifest.json, que define la configuración y permisos de la extensión
• background.js, encargado del seguimiento del tiempo y la lógica principal
• popup.html / popup-v2.html, que contiene la interfaz visible para el usuario
• style.css, que define el diseño visual
• popup.js, que gestiona la interacción y actualización de datos
• popup-sketch.js, que implementa la visualización gráfica mediante la librería p5.js

Esta organización modular permite separar la lógica, la interfaz y la visualización, facilitando el mantenimiento y la escalabilidad del proyecto.

Enlace al repositorio de Github

https://github.com/NattyDCI/firefox_extension_app

Pdf del proyecto