Crear una extensión para Google Chrome

Este pequeño tutorial que saqué de la página de Google Chrome nos explica como crear una extensión de una manera muy sencilla y práctica.

Preparando el navegador

Lo primero que tenemos que hacer es suscribirnos a la versión dev de Google Chrome (en el tutorial original recomiendan Windows, sin embargo yo lo probé con Mac y funcionó igual de bien).

Creando y cargando una extensión

Para este tutorial crearemos una extensión que ponga un botón en la barra de herramientas inferior de Google Chrome.

Creamos una carpeta con el nombre que queramos darle a la extensión, yo, por ejemplo, le puse hola_mundo.

Dentro de la carpeta creamos un archivo de texto llamado manifest.json, y ponemos lo siguiente en el archivo:

{
  "name": "Mi Primera Extension",
  "version": "1.0",
  "description": "Mi primer extensión para Google Chrome.",
  "toolstrips": [
    "mi_toolstrip.html"
  ],
  "permissions": [
    "http://api.flickr.com/"
  ]
}

En la misma carpeta creamos un archivo de texto llamado mi_toolstrip.html y ponemos esto en el archivo:

<div class="toolstrip-button">
  <span>Hola Mundo!</span>
</div>

Cargando la extensión

Abrimos el administrador de extensiones en Google Chrome escribiendo esta URL en la barra de dirección:

chrome://extensions

Le das click en el botón Load Extensions y seleccionas la carpeta donde tienes guardada tu extensión y le das click en OK.

Si la extensión es válida, la información de la extensión aparecerá en el apartado de Extensiones Instaladas.

Y si todo funcionó bien, verás el botón que dice Hola Mundo en la barra de abajo del navegador.

Agregando código a la extensión

Ahora hagamos que ese botón haga algo, aparte de verse bien.

Dentro de la carpeta de la extensión creamos un archivo llamado hola_mundo.html, y le ponemos el siguiente código:

<style>
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=95",
    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>

Editamos mi_toolstrip.html y hacemos que el código quede así:

<div class="toolstrip-button" onclick="window.open('hola_mundo.html')">
  <span>Hola Mundo!</span>
</div>

Regresamos a chrome://extensions, y damos click en Reload Extension para cargar la nueva versión de la extensión.

Luego le damos click en el botón y con esto, nos debe de aparecer el documento hola_mundo.html que se debe de ver algo así:

Felicidades por tu primera extensión para Google Chrome ^_^

Etiquetas: extension, extensiones, Google, google chrome, hola mundo, Programación