DevExtractor

Qué hace

• Medios. Encuentra las imágenes (también las de <picture>), los SVG inline, los vídeos, el audio y las imágenes de fondo de CSS de la página. Se filtran por tipo, dominio, URL y tamaño, y se ven en cuadrícula o en lista.
• SVG inline como archivos. Cada <svg> incrustado en el HTML sale como un .svg descargable, sin copiar y pegar desde el inspector.
• Descargas. Sueltas o todas juntas en un ZIP, con una barra de progreso.
• Sustituir en vivo. Cambia una imagen, un SVG o un fondo de la página por un marcador o por una imagen tuya, y lo deshace con un clic. También ocultar elementos y aplicar filtros CSS.
• Por elemento. Localizarlo en la página, copiar su URL o su CSS y sacar su paleta de colores.
• Enlaces. Todos los de la página, internos y externos, con búsqueda, copia y exportación a .txt o .json.
• Fuentes. Qué tipografías usa la página, en cuántos elementos, con vista previa editable, resaltado en la página y descarga de los archivos de las fuentes web.
• Instagram. Botones para descargar historias, posts, reels y fotos de perfil.
• Popup y panel de DevTools, tema claro u oscuro, en español e inglés. Nada sale del navegador.

Cómo está hecho

Una extensión Manifest V3 con WXT

WXT genera el manifiesto y los puntos de entrada: el service worker, los content scripts, el popup, el panel de DevTools y un documento offscreen. El popup y el panel montan los mismos componentes de Vue 3.

Descargas desde un documento offscreen

El service worker no puede crear blobs, así que las descargas y el ZIP (con JSZip) se hacen en un documento offscreen. Para las webs que exigen su Referer, una regla temporal de declarativeNetRequest se aplica solo a las peticiones de la propia extensión.

Un motor de reemplazo que se puede deshacer

Antes de tocar un elemento se guarda su estado original: src y srcset, fondos, máscaras, pseudo-elementos y el contenido de los SVG. Un MutationObserver aplica el cambio a lo que aparece después y, al navegar dentro de una SPA, todo se restaura.

Problemas que resolví

• Reglas de red que se salían de su sitio. La primera versión usaba reglas persistentes que calculaban mal el dominio (co.uk) y podían quedarse tocando las cabeceras de la navegación normal en ese dominio. Ahora son reglas de sesión, solo para el host exacto del archivo y solo para peticiones que no salen de una pestaña.
• Descargas que se pisaban. Dos descargas a la vez compartían el progreso. Cada una lleva ahora su id, y la pestaña que la pidió queda guardada en storage.session para sobrevivir a un reinicio del service worker a mitad de un ZIP largo.
• Una barra de progreso que no se iba. Un aviso de "terminado con errores" se quedaba fijo y parecía que la extensión se había colgado. Ahora se limpia sola y el popup recupera el estado real al reabrirse.
• Instagram cambia de idioma y de clases. Los botones se colocan detectando la estructura de la página, no el texto, y los datos de las historias se leen también del HTML inicial.