Cómo crear una extensión de Chrome de tu sitio web

wwwhatsnew extension chrome web app

Amit Agarwal de Labnol.org ha publicado una excelente guía para crear una extensión de Chrome (similar a la que tiene WWWhat’snew que cualquiera puede instalar) y una Chrome Web App básica (un logo y un enlace, mucho más útil que cuando los usuarios agregan la página a Favoritos en su navegador) en aproximadamente 5 minutos. La clave: plantillas cuyas sencillas líneas se pueden editar hasta con el Bloc de notas de Windows. Claro, como la idea es dejarlas a disposición de todo el mundo en la Chrome Web Store, hace falta pagar una única pequeña cuota de registro de 5 dólares.

Para crear una Chrome Web App

1) Descarga la carpeta comprimida que contendrá la plantilla de la Chrome Web App. Dentro de ella hay un archivo llamado manifest.json, ábrelo con Bloc de notas o el editor que prefieras (clic derecho >> Abrir con…) y cambia las líneas indicadas con tus respectivos datos: nombre de tu sitio web, una corta descripción y su URL un par de veces. Guarda los cambios.

En la carpeta también hay una imagen en formato PNG llamada icon.png, reemplázala por un logotipo propio de 128×128 px pero teniendo cuidado de no cambiar el nombre. Eso es todo hasta allí, verifica que han quedado ambos archivos en la carpeta comprimida que es la que se va a subir luego.

2) Entra al panel de programadores de Chrome y carga tu carpeta comprimida (botón Elegir un archivo para seleccionarlo >> botón Subir), carpeta que no es más que tu Chrome Web App.

panel del programador

3) En la nueva página que se abre hará falta ir agregando detalles importantes de la Chrome Web App como una descripción larga de hasta 16000 caracteres, su icono (de 128×128 px), capturas de pantalla (1280×800 ó 640×400 px), categoría, precio, idioma y hasta el código de usuario de Google Analytics. Junto a cada ítem irá apareciendo la debida explicación para completarle.

wwwhatsnew chrome web app

Para publicarla en la Chrome Web Store:

4) Ya al final están los botones de publicación: Descartar borrador, Guardar borrador, Obtener vista previa de los cambios y Publicar cambios. Al pulsar en la última opción y luego de pagar los US$ 5 por el registro en la web de programadores (sólo se realiza una vez, luego no habrá límite en el número de creaciones de extensiones y/o apps) será publicada en la Chrome Web Store la webapp resultante.

vista previa chrome webapp

Opcionalmente al final y arriba de los botones de publicación, en Opciones de Visibilidad, puedes definir un público específico para probar la webapp; en la página de inicio del Panel de programadores se pueden definir un listado de emails de “verificadores de confianza” si es la opción que has preferido.

panel chrome

Para crear una extensión para Chrome

Esta extensión tomará el feed RSS de la página web de tal manera que al pulsar el botón correspondiente dentro de la barra de extensiones de Google Chrome, se despliegue un listado de enlaces a las más recientes entradas publicadas.

Su creación es bastante similar a la de la Chrome Web App: no es más que descargar una carpeta comprimida que a modo de plantilla minimizará el proceso de creación a ir reemplazando líneas por valores propios (nombre, descripción, URL, etc.) mediante Bloc de notas. Para evitar problemas con las referencias de archivos, esto es, que los archivos en su código “se llaman entre ellos” para trabajar conjuntamente, no es recomendable cambiar los nombres predeterminados a menos que se vaya a disponer del tiempo para sustituir una a una, y son decenas. Sólo hace falta cambiar las principales:

icon.png: Reemplázalo por tu logo en formato PNG y con un tamaño de 128×128 px.

labnol.css: En esta hoja de estilos podrás definir el tipo de fuente, colores, bordes, tamaños, etc. La combinación predeterminada es blanca con negro, con un tono de azul para los enlaces.
extension chrome labnol

labnol.html: Aquí hace falta cambiar la URL de Labnol (http://www.labnol.org/) por la URL propia en un par de ocasiones. También el texto que aparecerá dentro del cajón de búsqueda (está entre comillas, dice “Find something…” pero se puede cambiar por cualquier cosa). Casi al final hay una tercera referencia a una imagen en PNG almacenada en Labnol la cual es el logo de 264×39 px que aparece en la parte inferior del globo emergente de la extensión y que se puede cambiar por uno propio de similares características, enlazando a la URL del nuevo logo.

labnol.js: El punto más importante pues hará falta indicar la URL del feed RSS del blog, probablemente la de tu sitio web sea http://tusitioweb.com/feed o http://feeds.feedburner.com/elnombredetusitio, en vez de la predeterminada (la de Labnol). En el paréntesis de feed.setNumEntries(10) puedes cambiar el número 10 por el número de enlaces que quieras que se muestren en el globo emergente.

manifest.json: De manera similar al de la Chrome Web App, será el espacio donde se incluirá el nombre y la descripción pero ya no de tu sitio web sino de tu extensión, por ejemplo, “Noticias de tusitioweb.com” y “Sigue las actualizaciones de tusitioweb.com en tu navegador con un clic”.

Luego de que hayas actualizado todos los archivos dentro de la carpeta comprimida, restará que vuelvas al panel de programadores de Chrome y la subas. En la página que aparece tendrás que ejecutar los pasos 2 al 5 de la guía de la Chrome Web App. Eso es todo, en minutos debería aparecer ya tu extensión en la Chrome Web Store con una apariencia similar a las de Labnol y WWWhat’snew.

extension chrome wwwhatsnew

Para más ayuda puedes consultar la entrada original en Labnol donde al final se comparten varios enlaces y hasta un video (en inglés) de como se ve el sencillo proceso de edición.

Juan David Quiñónez

Estadístico. Amante de las nuevas tecnologías, la ciencia, el mundo académico y las aplicaciones de las anteriores temáticas en la red. Escribe en wwwhatsnew.com desde finales del 2011.

4 comentarios

  1. Buenas acabo de hacer el pago de 5$ y ya mi link aparece en la store de google pero le doy click a donde dice Launch App pero solamente me lleva al link de mi pagina mas no me instala el icono de la que cree y no se ve en extensiones. alguna idea?, segui todo los pasos que explican.

  2. Olide decirles pueden probar buscandolo como: subtitulos netflix ahi les saldrá el icono rojo con banderitas pero no me instala ese icono :(

  3. Ivan

    Alguno sabe como hacer para que la extensión notifique las nuevas noticias.

    Gracias.

  4. Yo lo hice, notifica las ultimas 10 posts