📚 Gestor de Marcadores Browser Extension

Una extensión moderna para navegadores Chromium (Brave, Chrome, Edge) que transforma la gestión de marcadores con ventanas flotantes arrastrables y herramientas integradas.

✨ Características Principales

🪟 Ventanas Flotantes Arrastrables

• Organiza marcadores en ventanas independientes por carpeta
• Drag & drop optimizado con sincronización precisa del cursor
• Posicionamiento inteligente: grilla organizada (no cascada caótica)
• Persistencia automática de posiciones y tamaños

🔍 Herramientas Integradas

• Búsqueda Web: Google, Brave, DuckDuckGo, Ecosia
• Traductor: Google Translate, DeepL, Reverso Context
• Búsqueda de Marcadores: Filtrado en tiempo real

🎨 Personalización Completa

• Temas: Modo claro/oscuro automático
• Fondos: 4 gradientes predefinidos + colores personalizados
• Imágenes: Fondos personalizados (archivo local o URL)
• Color Picker: 11 colores temáticos para headers de ventanas
• Auto-detección: Colores automáticos por categoría de carpeta (Desarrollo=Azul, Trabajo=Naranja, etc.)

⚡ Alto Rendimiento

• Arquitectura modular con Vanilla JavaScript
• Solo 3MB de uso de memoria
• Carga instantánea sin dependencias

🚀 Instalación Rápida

Brave Browser

1. Descargar ZIP → Extraer
2. brave://extensions/ → Modo desarrollador ON
3. "Cargar extensión sin empaquetar" → Seleccionar carpeta
4. ¡Listo! 🎉

Google Chrome

1. Descargar ZIP → Extraer  
2. chrome://extensions/ → Modo desarrollador ON
3. "Cargar extensión sin empaquetar" → Seleccionar carpeta
4. ¡Listo! 🎉

Microsoft Edge

1. Descargar ZIP → Extraer
2. edge://extensions/ → Modo desarrollador ON (panel izquierdo)
3. "Cargar extensión sin empaquetar" → Seleccionar carpeta  
4. ¡Listo! 🎉

📦 Descarga

Opción 1: Release (Recomendado)

📥 Descargar bookmark-manager-v1.0.3-by_asturwebs.zip

Opción 2: Desde Código Fuente

git clone https://github.com/asturwebs/bookmark-manager-extension.git
cd bookmark-manager-extension
# Usar la carpeta 'public/' para instalar

🎯 Uso

Primera Vez

1. Al instalar aparecen 2 ventanas: Búsqueda Web y Traductor
2. Clic en ➕ para agregar ventanas de carpetas de marcadores
3. ⚙️ para personalizar temas y fondos

Controles

• Arrastrar: Desde barra superior de ventana (cursor sincronizado)
• Cerrar: Botón × (solo ventanas de marcadores)
• Buscar: Campo de búsqueda en cada ventana
• Temas: Botón 🌙/☀️ en header
• Cambiar color: Botón 🎨 en cada ventana para personalizar header

Personalización

• 4 gradientes: Azul, Verde, Rojo, Morado
• Color personalizado: CSS/gradientes propios
• Imagen de fondo: Archivo local o URL externa

🏗️ Arquitectura Técnica

Estructura Modular

public/js/
├── main.js                 # Orquestador principal
├── managers/
│   ├── state-manager.js    # Estado centralizado + Observer pattern
│   ├── bookmark-manager.js # Operaciones de marcadores + cache
│   ├── window-manager.js   # Gestión ventanas + drag&drop
│   └── theme-manager.js    # Temas + fondos personalizados
└── utils/
    ├── security-utils.js   # Validación URLs + sanitización XSS
    └── performance-utils.js # Debouncing + caching + throttling

Flujo de Datos

main.js (Orchestrator)
    ↓
StateManager (Observer Pattern) ←→ Chrome Storage API
    ↓
BookmarkManager (Data Layer) ←→ Chrome Bookmarks API  
    ↓
WindowManager (UI Logic) ←→ DOM Events
    ↓
ThemeManager (Styling) ←→ CSS Classes

🛠️ Desarrollo

Debug Console

// Consola del navegador (F12)
window.bookmarkManagerApp.getDebugInfo()   // Estado + métricas + logger info
window.bookmarkManagerApp.restart()        // Reiniciar app
window.bookmarkManagerApp.clearStorage()   // Limpiar storage

// Sistema de Logging Configurable (v1.0.3+)
window.bookmarkManagerApp.setLogLevel('DEBUG')  // ERROR/WARN/INFO/DEBUG/TRACE
window.bookmarkManagerApp.getLogConfig()        // Ver configuración actual
window.bookmarkManagerApp.exportLogs(100)       // Exportar últimos 100 logs

// Tests Unitarios (v1.0.3+)
window.bookmarkManagerApp.runTests()       // Ejecutar tests de funciones críticas
window.bookmarkManagerApp.clearTests()     // Limpiar resultados de tests

Performance Metrics

• Memoria: ~3MB (vs 25MB+ extensiones similares)
• Carga: <500ms inicial
• Arquitectura: 7 módulos especializados vs monolito
• Sin dependencias: 100% Vanilla JavaScript

Características de Seguridad

• ✅ Content Security Policy (CSP) estricta
• ✅ Validación URLs + prevención XSS
• ✅ Sin tracking ni telemetría
• ✅ Storage local únicamente

📋 Permisos Requeridos

{
  "permissions": [
    "bookmarks",  // Acceso a marcadores del navegador
    "storage"     // Persistencia de configuración  
  ]
}

🆕 Changelog v1.0.3

🔴 Arreglado - Finalmente!

• ✅ Scroll Definitivo: Ventanas con muchos enlaces muestran scroll correctamente (CSS !important + altura fija)
• ✅ Anchos Optimizados: Herramientas 360px vs Bookmarks 320px para mejor usabilidad
• ✅ Alineación Perfecta: Ventanas búsqueda/traductor alineadas con parte superior del título

✨ Sistema de Ventanas Perfeccionado

• 📏 Anchos Diferenciados: 360px herramientas, 320px bookmarks (uniformidad + funcionalidad)
• 📏 Scroll Forzado: Altura fija cuando contenido >250px + CSS !important inviolable
• 📏 Posicionamiento Inteligente: Auto-organización sin superposiciones + detección de límites

🚀 Mejoras de UX

• ⚡ Tamaños Dinámicos: Ventanas compactas (≤3 items) vs normales (scroll automático)
• ⚡ Logs Detallados: Consola muestra cálculos exactos + activación de scroll
• ⚡ Grilla Inteligente: Algoritmo mejorado con verificación de viewport

---

---

🆕 Changelog Anterior

v1.0.3 - Sistema Logging + Tests + Z-Index

v1.0.2 - Bugs Críticos Chrome Storage

🔴 Bugs Críticos Arreglados

• ✅ Chrome Storage Fix: Validación robusta de permisos y disponibilidad de chrome.storage
• ✅ Condición de carrera: Mutex implementado para evitar eliminaciones simultáneas de ventanas
• ✅ Validación de bookmarks: Manejo granular de errores + filtrado de bookmarks inválidos
• ✅ Fondo y pie de página: Corregido layout flexbox para mostrar correctamente el fondo y footer
• ✅ Auto-organización: Ventanas ya no se salen del área visible al auto-organizarse

🚀 Mejoras de Rendimiento

• ⚡ CSS Optimizado: Eliminados duplicados de scrollbars y animaciones (-20% tamaño)
• ⚡ Algoritmos mejorados: Posicionamiento inteligente que respeta viewport
• ⚡ Manejo de errores: Notificaciones específicas para permisos, timeout y red

🛠️ Mejoras Técnicas

• 🔧 Async/await: Operaciones de eliminación ahora son asíncronas y seguras
• 🔧 Validación URL: Prevención de javascript: y URLs malformadas
• 🔧 Consistencia: Versiones sincronizadas en todos los archivos

---

🆕 Changelog v1.0.1

🐛 Bugs Críticos Corregidos

• ✅ Cascada de ventanas: Las ventanas ya no aparecen apiladas tras resetear → Ahora usan posicionamiento en grilla organizada
• ✅ Color picker fantasma: Ya no cambia el color de la ventana incorrecta → Sistema robusto de identificación de ventanas
• ✅ Ventanas que desaparecen: Ya no se pierden ventanas al añadir nuevas → Actualizaciones incrementales del DOM
• ✅ Cursor desincronizado: Mouse ya no se desplaza mal al arrastrar → Sistema de posicionamiento basado en deltas
• ✅ Carpetas fantasma: Carpetas eliminadas ya no aparecen en diálogos → Verificación dual estado+DOM
• ✅ Distorsión de contenido: Restaurados tamaños originales (350x400) → Mejor legibilidad

🎨 Nuevas Funcionalidades

• 🆕 Selector de colores interactivo: Menú desplegable con 11 colores temáticos
• 🆕 Detección automática de colores: Desarrollo=Azul, Trabajo=Naranja, Social=Rosa, etc.
• 🆕 Posicionamiento inteligente: Ventanas fijas junto al título, bookmark windows en grilla
• 🆕 Sistema de debugging mejorado: Logs exhaustivos para resolución de problemas
• 🆕 Notificaciones animadas: Feedback visual para acciones del usuario

🚀 Mejoras de Rendimiento

• ⚡ Búsqueda optimizada: Throttling y caché para filtros más rápidos
• ⚡ Gestión de memoria: Limpieza automática de event listeners
• ⚡ Renderizado incremental: Solo actualiza ventanas que cambian

🔧 Configuración Avanzada

Motores de Búsqueda Soportados

• Google (predeterminado)
• Brave Search
• DuckDuckGo
• Ecosia

Servicios de Traducción

• Google Translate (predeterminado)
• DeepL
• Reverso Context

Almacenamiento

• Chrome Storage: Configuración esencial (sync entre dispositivos)
• LocalStorage: Datos completos + imágenes personalizadas
• Auto-backup: Posiciones ventanas + preferencias

🐛 Troubleshooting

Problema	Solución
Extensión no carga	Verificar modo desarrollador activado
Marcadores no aparecen	Comprobar permisos de bookmarks
Ventanas no se mueven	Recargar extensión desde chrome://extensions/
Storage quota exceeded	Usar gradientes en lugar de imágenes pesadas

🚀 Roadmap

v1.1.0 (Próximo)

• Favicons reales (solución CSP)
• Categorías personalizadas de marcadores
• Atajos de teclado
• Exportar/importar configuración

v1.2.0 (Futuro)

• Sincronización nube
• Estadísticas de uso
• Widgets personalizables
• API para terceros

📊 Comparación

Característica	Esta Extensión	Extensiones Típicas
Memoria	~3MB	15-30MB
Carga	<500ms	1-3s
Dependencias	0	5-20+
Personalización	Alta	Básica
Performance	Optimizada	Variable

🤝 Contribuir

1. Fork el repositorio
2. Crear rama: git checkout -b feature/nueva-caracteristica
3. Commit: git commit -m 'Add: nueva característica'
4. Push: git push origin feature/nueva-caracteristica
5. Pull Request con descripción detallada

📄 Licencia

MIT License - Ver LICENSE para detalles completos.

🔗 Enlaces

• 🌐 Website: asturwebs.es
• 🐛 Issues: GitHub Issues
• 📧 Contact: Disponible en asturwebs.es

🙏 Agradecimientos

• Brave Browser por su excelente API de extensiones
• Chrome Extension APIs por la funcionalidad base
• Comunidad Open Source por inspiración y feedback

---

Desarrollado con ❤️ por AsturWebs

Transformando la gestión de marcadores desde 2025