jun 21 2011

Cómo crear una extensión para Google Chrome!

Un saludo a toda la gente de IFXPerú y a nuestros seguidores, este es mi primer post como editor y espero que, aparte de ser de su agrado, les sea de mucha utilidad.

Bueno, el objetivo de este pequeño tutorial será, hacer una extensión para Google Chrome que nos permita obtener las últimas menciones de un usuario de twitter específico.

Antes de empezar, algunos requerimientos que se necesitan, es saber cosas básicas acerca de HTML, CSS, JavaScript, JQuery (Básico) y Formato JSON.

Ahora, abróchense los cinturones que vamos a empezar.

Según nuestros amigos de Google:

“Las extensiones son funciones adicionales que puedes añadir fácilmente a tu navegador. Las extensiones te permiten personalizar tu navegador con las funciones que quieras y mantienen el navegador libre de elementos que no vas a utilizar”

Según esta definición, nuestra extensión nos permitirá obtener las “Menciones en Twitter” de un determinado usuario.

Nuestro primer paso, será detallar un único archivo llamado manifiesto (“manifest.json”) donde en formato JSON debemos declarar las variables de configuración de nuestra extensión.

Todos los posibles añadidos a realizar en Google Chrome parten del archivo de manifiesto y por lo tanto tenemos que aprender a codificarlo.



El manifest.json deberá tener siempre un nombre y una versión. Además se recomienda el uso de un icono y una breve descripción.

Con este paso, ya podemos cargar nuestra extensión en el toolbar de nuestro navegador. Para lo cual debemos activar el “Modo de Desarrollador”

Y aquí vemos nuestra extensión ya cargada:

Ahora, lo más importante:  el contenido de nuestra extensión. Para esto vamos a crear una página HTML básica que contendrá lo siguiente:

Luego modificamos nuestro manifiesto (manifest.json) para poder mostrar nuestra página HTML como popup, al hacer click sobre el ícono de nuestro toolbar.

Volvemos a cargar nuestra extensión y con esto, obtenemos lo siguiente:

Nuestro siguiente paso será obtener las menciones de twitter de un usuario especificado en el cuadro de texto del formulario.

Para esto, utilizaremos el plugin jquery.twitter.mentions.js de nuestros amigos de Infectedfx.net, asi que modificaremos nuestra página HTML de la siguiente manera:

Ahora probaremos nuestra extensión con el usuario @vitucheando. Y obtendremos como resultado lo siguiente:

Y por último, como la “cereza de la torta” de nuestra extensión, vamos a aplicar un poco de Hojas de Estilo para hacer que nuestra extensión tenga una buena vista. 

Crearemos un archivo “.css” que va a contener los estilos para nuestra página HTML.

Luego modificamos nuestra página HTML para cargar los estilos declarados en el archivo “.css”

Y con eso ya tenemos nuestro resultado final. Probaremos nuevamente con el mismo usuario @vitucheando y se vería de esta forma:

Como verán, de una manera sencilla, hemos conseguido obtener las últimas menciones de un determinado usuario de twitter, esta sería sólo la forma básica de crear extensiones para Chrome … como complemento podemos intentar aplicar notificaciones, pero eso se los dejó para que Uds. investiguen un poco de cómo poder hacerlo.

Aquí les dejo el código para que puedan descargarlo!!

Un saludo a todos y hasta pronto!!!

By vitucheando • Twitter, Web, Web2.0 • 4 • Tags: chrome, CSS, extensiones, html, javascript, jquery, Twitter