← Todos los artículos

Publicado 2013-09-20 ·4 min de lectura

Crea una extensión de Google Chrome para tu Blog

#blog ·#Chrome Store ·#extension ·#Google Chrome ·#Herramientas

Para crear una extensión de Chrome para tu Blog en 5 minutos sin saber programar: descarga la plantilla ZIP, edita popup.html, popup.js y manifest.json con el título, URL y feed RSS de tu Blog, sustituye los iconos y súbela a la Chrome Store mediante un pago único de 5 USD (sin cuotas anuales).

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

Qué necesitas

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.

Archivos de una Extensión

Archivo popup.html

En el archivo popup.html tendrás que modificar los campos que están indicados en los comentarios:

  • Línea 12: pon el título de tu Blog.
  • Líneas 29 y 36: sustituye las URLs de MetricSpot por las de tu Blog.
  • Líneas 46 a 49: modifica los enlaces a las Redes Sociales para que apunten a las tuyas.

También hay una imagen embebida en la línea 31 que está alojada en la Web de MetricSpot. Modifica la URL para que apunte a una imagen 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 modificar:

  • Línea 6: la dirección del Feed RSS de tu Blog.
  • Línea 9: el número de entradas que quieres que aparezcan en la extensión.

Por defecto la extensión mostrará las 5 últimas entradas.

Archivo manifest.json

En el archivo manifest.json modifica los siguientes campos:

  • Línea 2 - name: título de tu Blog.
  • Línea 3 - description: descripción de tu Blog. Debe tener una longitud inferior a 132 caracteres para que no aparezca cortada.
  • Línea 9 - default_title: título que aparece en el tooltip del icono.

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.

Subir a la Chrome Store

Cuando ya lo tengas todo listo, comprímelo todo en formato ZIP y súbelo a la Chrome Store.

ConceptoDetalle
Pago de registro5 USD único (con Google Wallet)
Aplicaciones permitidasHasta 20
Cuota anualNo aplica
Tiempo de publicaciónAprox. 15 minutos tras pulsar “publicar”

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.

Preguntas frecuentes

¿Hace falta saber programar para crear la extensión?

No. Basta con editar 3 archivos de texto (popup.html, popup.js y manifest.json) cambiando título, URLs, feed RSS y metadatos. No tocas lógica de programación, solo sustituyes valores en líneas concretas que están comentadas en la plantilla.

¿La plantilla funciona si mi blog no usa WordPress?

Por defecto está pensada para WordPress, pero funciona con cualquier blog que tenga un feed RSS. Si usas otro CMS, ajusta la URL del feed en popup.js y posiblemente algunos selectores; el resto del flujo es igual.

¿Cuánto cuesta publicar una extensión en la Chrome Store?

5 USD una sola vez (con Google Wallet). No hay cuotas anuales y la cuenta te permite hasta 20 extensiones. Tras pulsar “publicar” tarda unos 15 minutos en estar disponible.

¿Por qué la descripción del manifest debe tener menos de 132 caracteres?

Porque la Chrome Store la corta a partir de ahí en la vista de listado. Si la dejas más larga, los usuarios verán la descripción con puntos suspensivos y perderás parte del mensaje que querías comunicar.

Conclusiones clave

  • No necesitas saber programar: basta con editar 3 archivos de la plantilla.
  • En popup.html se ajustan título, URLs y enlaces sociales; en popup.js el feed RSS; en manifest.json los metadatos.
  • La descripción del manifest debe tener menos de 132 caracteres.
  • La imagen embebida del popup debe ser de 200x40 px.
  • La Chrome Store cobra 5 USD una sola vez y permite hasta 20 extensiones por cuenta.