Aunque mi opinión no sea compartida por la línea editorial del Blog, me gusta Google. Google sabe hacer las cosas… Google… queremos un hijo tuyo!!! 🙂

Hoy vamos a ver como se crea un plugin o extensión para Chrome (ese navegador!) mediante un ejemplo simple.

Las extensiones o plugins incorporan funcionalidades al navegador de Google. En este ejemplo utilizaremos la versión normal de Chrome para Windows (hay otras distribuciones para Linux o Mac).

1) Crear y cargar una extensión:

En este paso se creará la extensión y se añadirá un a acción a la barra de herramientas de Google.

– Se crea un directorio que contenga el código de la extensión

– Se añade en dicho directorio un archivo de texto llamado manifest.json (hemos visto en este blog un artículo sobre json no hace mucho)

1. {

2. "name": "Mi primera extensión para Google",

3. "version": "1.0",

4. "description": "Google Rules",

5. "browser_action": {

6. "default_icon": "icon.png"

7. },

8. "permissions": [

9. "http://api.flickr.com/"

10. ]

11. }

– Se copia en el mismo directorio el icono a mostrar en la barra del explorador.

– Se carga la extensión.

— Se abre la pestaña de gestión de extensiones utilizando el botón y seleccionando Extensiones.

— Se despliega la opción modo desarrollador.

— Se pulsa sobre el botón “Cargar extensión descomprimida”, y seleccionamos el directorio que hemos creado.

– Si hemos hecho todo como debería ser, aparecerá el icono junto a la barra de direcciones e información sobre la extensión.

2) Añadir funcionalidad a la extensión

Se añade funcionalidad en el archivo manifest.json para que se ejecute una acción cuando se pulse el botón (en este caso abrir una pagina html que muestra imágenes desde flicker).

El código a añadir sería:

1. "browser_action": {

2.  "default_icon": "icon.png",

3.  "popup": "popup.html"

4. },

Código de popup.html

<style> 

body {

 min-width:357px;

 overflow-x:hidden;

}

img {

 margin:5px;

 border:2px solid black;

 vertical-align:middle;

 width:75px;

 height:75px;

}

</style>

<script> 

var req = new XMLHttpRequest();

req.open(

 "GET",

 "http://api.flickr.com/services/rest/?" +

 "method=flickr.photos.search&" +

 "api_key=90485e931f687a9b9c2a66bf58a3861a&" +

 "text=hello%20world&" +

 "safe_search=1&" + // 1 is "safe"

 "content_type=1&" + // 1 is "photos only"

 "sort=relevance&" + // another good one is "interestingness-desc"

 "per_page=20",

 true);

req.onload = showPhotos;

req.send(null);

function showPhotos() {

 var photos = req.responseXML.getElementsByTagName("photo");

 for (var i = 0, photo; photo = photos[i]; i++) {

 var img = document.createElement("image");

 img.src = constructImageURL(photo);

 document.body.appendChild(img);

 }

}

// See: http://www.flickr.com/services/api/misc.urls.html

function constructImageURL(photo) {

 return "http://farm" + photo.getAttribute("farm") +

 ".static.flickr.com/" + photo.getAttribute("server") +

 "/" + photo.getAttribute("id") +

 "_" + photo.getAttribute("secret") +

 "_s.jpg";

}

</script>

Se recarga la extensión desde el gestor de extensiones.

Al pulsar sobre el botón de nuestra extensión, se mostrará el contenido de popup.html

Y con esto hemos terminado. No ha sido muy difícil ¿no? En posteriores artículos mostraremos como integrar un plugin de Chrome con Google App Engine (del que ya hemos visto una introducción en este blog).