Crea una extensión de Google Chrome para tu Blog

iniciar sesión

¿Quieres conseguir más ventas para tu negocio?

Aprende a crear y automatizar un proceso de generación de leads para tener un flujo constante de clientes para tu empresa, sin malgastar dinero en publicidad de pago.

Crea una extensión de Google Chrome para tu Blog

20-9-2013     Herramientas

Hoy te voy a enseñar en 5 minutos a hacer una extensión de Google Chrome para tu Blog.

Las extensiones de Google Chrome están compuestas por archivos HTML, CSS, JavaScript y JSON, pero no es necesario que sepas programar para tener una para tu Blog.

Extensión de Google Chrome

Puedes descargar este archivo ZIP que te servirá como plantilla para empezar. Tiene todos los ficheros que componen una extensión básica. Funciona perfecto si tu Blog está creado con WordPress. Si no, tendrás que modificar un poco el código.

Abre los archivos popup.html, manifest.json y popup.js con tu programa de editor de código. Si no tienes uno, puedes descargar Notepad++, que es gratuito.
 
Archivos de una Extensión
 

ARCHIVO POPUP.HTML

En el archivo popup.html tendrás que modificar los campos que están idicados en los comentarios. Pon el título de tu Blog (linea 12), sustituye las URLs de MetricSpot por las de tu Blog (líneas 29 y 36) y modifica los enlaces a las Redes Sociales (líneas 46 a 49)para que apunten a las tuyas.

También hay una imagen embebida (línea 31) que está alojada en la Web de MetricSpot. Modifica la URL para que apunte a una imágen alojada en tu Web. Tiene que ser un archivo de 200px de ancho por 40px de alto.
 

ARCHIVO POPUP.JS

En el archivo popup.js tendrás que incluir la dirección del Feed RSS de tu Blog (línea 6) y determinar el número de entradas que quieres que aparezcan en la extensión (línea 9). Por defecto la extensión mostrará las 5 últimas entradas.
 

ARCHIVO MANIFEST.JSON

En el archivo manifest.json modifica los campos «name» (línea 2), «description» (línea 3) y «default_title» (línea 9) para que muestren el título y la descripción de tu Blog. La descripción debe ser de una longitud inferior a 132 caracteres para que no aparezca cortada.
 
Plantilla de Iconos

LOS ICONOS

En la carpeta IMG tienes una serie de iconos con todos los tamaños que necesita la extensión para funcionar. Sustitúyelos por el tuyo y recuerda dejar los márgenes correspondientes en el icono de 128px (el archivo icon.png) para que se visualice correctamente.
 

CHROME STORE

Cuando ya lo tengas todo listo, comprímelo todo en formato ZIP y súbelo a la Chrome Store. Tendrás que abrir una cuenta y hacer un único pago de $5 dólares con Google Wallet. Esto te permitirá alojar hasta 20 aplicaciones y extensiones en tu cuenta, y no requiere pagos anuales de mantenimiento.
 
Sube el archivo ZIP
 
Añade un icono, un pantallazo de tu Blog e imágenes promocionales. Puedes descargar este archivo que contiene un ejemplo de cada uno para que te sirva de referencia. También tendrás que incluir una descripción detallada de tu Blog y rellenar una serie de campos informativos. No te llevará más de dos minutos.

Cuando hayas terminado, haz click en «publicar» abajo del todo y en 15 minutos estará lista para enlazar desde tu Blog.




Deja tu comentario:

Comentarios:

  1. Ignacio Garnica ha escrito:
    15/11/2013 a las 05:47 AM

    Que gran tutorial, lo aplicaré para algunos de mis proyectos, ¡muchísimas gracias!

  2. Maxi ha escrito:
    30/1/2014 a las 11:14 PM

    Perdon ya logre descargarlo gracias!!

  3. Jorge Vargas ha escrito:
    14/9/2014 a las 05:40 AM

    Hola, buen post. Mi consulta es cómo mostar la image destacada en la extensión.He probado con diferentes alternantivas pero no logro hacer que funcione:

    Esta es una de ellas;
    var media = $item.find(‘media\:content, content’).attr(‘url’);

    La imagen está en el tag

    No logro sacarla para mostarla en la extensión.

    Te agradecería si me ayudadrs en eso.
    Saludos


¡Deja tu comentario!

(Anti-Spam)