Mods: ¿Modificaciones? Si te gustan los juegos, sabes que no hay nada como jugar un juego modificado. Es tu juego favorito, pero con potencia, funciones y diversión adicionales. Ahora, imagina llevar esa misma emoción a tu experiencia de navegación web. Eso es exactamente lo que hacen las extensiones del navegador: son como modificaciones para tu navegador, que lo potencian de maneras que nunca creíste posibles.

Con una extensión de Chrome, puedes modificar tu navegador para que se adapte perfectamente a tus necesidades, ya sea bloqueando URL específicas, agregando nuevas funciones o incluso dándole una apariencia completamente nueva. ¿Y la mejor parte? Puede crear estas extensiones usted mismo. En esta guía, te guiaré paso a paso por el proceso de creación de tu propia extensión de Chrome.

¡Comenzar a utilizar extensiones web es más fácil de lo que crees! Si conoces JavaScript, es muy sencillo: solo es cuestión de aprender una nueva API. Después de todo, su esencia sigue siendo JavaScript.

Este artículo es un complemento de: Manual de extensiones de Chrome: desde mucha memoria hasta listo para producción

Tabla de contenido

• Extensiones web 101
• Desglosando el manifiesto:
• Creación de un descargador de imágenes sencillo
• La función de descarga:
• Estamos listos para probar nuestra extensión
• Cargando la extensión
• Conclusión

Extensiones web 101

Las extensiones web son como mods, pero para navegadores. Puedes personalizar completamente el comportamiento del navegador (piensa en AdBlock) o su apariencia, como los temas de Mozilla.

¡Para comenzar, crea una nueva carpeta!

Todo lo que necesitas es un manifest.json. Es la función principal pero para extensiones web. ¡Es el primer archivo que busca el navegador!

{
    "manifest_version": 3,
    "name": "img-downl",
    "version": "1.0",
    "description": "image ac?",
    "content_scripts": [
        {
            "matches": [""],
            "js": ["content.js"]
        }
    ],
    "permissions": [
        "activeTab"
    ]
}

El manifiesto contiene todos los metadatos de su extensión. Así es como los navegadores entienden su extensión y lo que puede hacer.

Desglosando el manifiesto:

• "versión_manifestación": 3, Esto le indica al navegador la versión de API que utilizará. Siendo la versión 2 la anterior, la versión 3 (V3) es la API más reciente. Es más seguro y eficaz, y la mayoría de los navegadores, incluido Chrome, han pasado a la versión 3 únicamente.

Una diferencia clave es el paso de scripts en segundo plano persistentes a trabajadores de servicios. Los scripts en segundo plano en V2 se ejecutaron durante toda la vida útil de una extensión (mientras el usuario navega), de ahí el aspecto "persistente". ¡En V3, solo se ejecutan cuando es necesario!

• Guiones de contenido: Los scripts de contenido se inyectan en la propia página web. En nuestra pequeña extensión, content.js se inyectará en cualquier URL que coincida con "matches": [""]. Entonces, cuando navega a cualquier URL o abre una nueva pestaña, content.js se inyectará en la página y se ejecutará.

Los scripts de contenido, a diferencia de los scripts en segundo plano, tienen acceso al DOM.

Esta es la anatomía básica de un complemento simple. A medida que cree más proyectos de extensión, aprenderá sobre permisos y funciones adicionales. A modo de introducción, este sencillo desglose es suficiente.

Creación de un descargador de imágenes sencillo

¿Listo?

Esta extensión está inspirada en un curso de visión por computadora que tomé hace un tiempo. Se nos pidió que implementáramos una herramienta para descargar imágenes de la búsqueda de Google.

Nota: No recomiendo tener esta extensión ejecutándose en todo momento a menos que quieras descargar imágenes cada vez que navegas.

En la misma carpeta que tu manifest.json, crea content.js y pega lo siguiente:

async function processAllImages() {
    const images = document.querySelectorAll('img');
    let count = 0;
    for (const img of images) {
        const url = img.src;
        const filename = `image${count  }.png`; // Generate a filename for each image
        try {
            await downloadImage(url, filename);
            console.log(`Downloaded ${filename}`);
        } catch (error) {
            console.error(`Error downloading image from ${url}:`, error);
        }
    }
}
// Run the function to process and download images
processAllImages();

Recuerde, se inyecta un script de contenido en una página web. Por ejemplo, cuando navegas a ejemplo.com, se ejecutará ProcessAllImages.

Todo lo que hace es tomar todos los elementos de la imagen y pasarlos a una función de descarga:

const images = document.querySelectorAll('img');

La función de descarga:

async function downloadImage(url, filename) {
    return new Promise((resolve, reject) => {
        fetch(url)
            .then(response => {
                if (!response.ok) throw new Error('Network response was not ok.');
                return response.blob();
            })
            .then(blob => {
                const a = document.createElement('a');
                a.href = URL.createObjectURL(blob);
                a.download = filename;
                a.style.display = 'none';
                document.body.appendChild(a);
                a.click();
                URL.revokeObjectURL(a.href); // Clean up the object URL
                document.body.removeChild(a);
                resolve();
            })
            .catch(error => reject(error));
    });
}

Nota: Esto solo funcionará para imágenes estáticas. Las imágenes dinámicas y cargadas de forma diferida pueden estar dañadas; eso es algo que podrás solucionar en iteraciones futuras.

Estamos listos para probar nuestra extensión

Estoy usando Brave, que está basado en Chrome, pero el proceso es similar en todos los navegadores.

Para realizar la prueba, debes habilitar el modo de desarrollador en el navegador que hayas elegido.

Cargando la extensión

Esta extensión, sin cambios, debería funcionar también en Mozilla, ya que no dependemos del espacio de nombres de Chrome.

Corajudo:

              Escribe valiente://extensiones/ en la barra de direcciones.        

              Habilita el modo desarrollador.      

              Carga la extensión seleccionando la carpeta.
             

   Chrome y Edge: sigue pasos similares a los de Brave.

         (chrome://extensiones/ o edge://extensiones/)

Conclusión

Mods: ¡las modificaciones son divertidas! Esta extensión puede ser simple, pero muestra los fundamentos para comenzar. MDN de Mozilla tiene un recurso perfecto para ampliar sus conocimientos sobre las extensiones web (tanto extensiones web generales como específicas del navegador).

Recuerda: desactiva la extensión o desinstálala cuando hayas terminado para evitar descargas no deseadas.

O mejor aún…

Un desafío: encuentre una manera de recibir información (pista: clic, ícono y secuencia de comandos de fondo) y ejecutar la función de imágenes de proceso solo cuando el usuario hace clic en un botón.