Saturday, October 29, 2011

QR URL - Mi primer Chrome Extension

Nuevo dia, nueva aplicación. Me pregunte, que hago? que quiero aprender? Hacia tiempo estaba curioso con las extensiones de Chrome. Pues dije: "Sabes que seria bueno, un boton al lado del URL que cuando le de vea un QR code de la dirección que tengo en pantalla". Que tal, luego de algunas busquedas atravez del todo sabio Google, me encontre con que esto no era algo complejo. Así que ni corto ni perezoso emprendí manos a la obra. Al cabo de un ratito ya funcionaba y sin mas ni menos lo publique en el WebStore de Chrome. La extensión se llama QR URL y puedes encontrarlo en el siguiente link: https://chrome.google.com/webstore/detail/nppbdeifhmhjlahlcplebmeklianffba?hl=en&gl=001

Ahora para los blogueros curiosos como yo, aquí el como funciona.
En el web hay muchos tutoriales y ejempos de como se hace una extensión para Chrome y la complejidad depende mucho de cuanto quieres hacer. No tengo el conocimiento suficiente como para escribir un tutorial así que mejor lo dejo los que saben. Por ahora la meta es romper el hielo en esto de las extensiones de Chrome así que vamos poco a poco.
Requerimientos:
1. Boton en el lado de la barra con la direccion web de chrome que cuando le de con el boton muestre un QR code con la direccion de la pagina actual.

Herramientas:
1. API publico para generar QR Codes disponible en http://zxing.appspot.com/generator/
2. Cualquier editor de texto.

Componentes:
Una extensión de chrome cuenta al menos de un archivo, en este caso son tres. Todo va a depender de la funcionalidad y la organizacion que desees.
Listado de archivos:
1. Icon.png ==> Imagen de 19x19 que se ve en el browser)
2. manifest.json ==> Contiene la información básica de la extensión así como el nombre del archivo para usar como icono y el nombre del archivo html que se encarga de mostrar el QR Code.
2. popup.html ==> Codigo en html que lee la dirección web actual y muestra la imagen.

Para crear esta extensión crear archivo manifest.json con el siguiente contenido. Como puedes ver es solo una descripción, los permisos y el icono que muestra.
manifest.json

{
  "name": "QR URL",
  "version": "1.0",
  "description": "Show current web URL as a QRCode so you may scan with your mobile device.",
  "browser_action": {
    "default_icon": "icon.png",
    "popup": "popup.html"
  },
  "permissions": [
    "http://chart.apis.google.com/",
    "tabs"
  ]
}


Crear archivo de popup.html (puedes cambiar el nombre solo recuerda cambiar la referencia a en el manifest.json. Como puedes ver en este archivo es simplemente leer el URL que esta en la pagina actual, concatenarle el link del web API que genera la imagen y cambiar la fuentre de la imagen definida en el <body> para que apunte a la imagen del QR Code generado por el web API.
Es una pagina html cualquiera donde tiene al principio unos estilos definidos para body y img. Pudieran crear un style sheet para esto si desean pero como es tan simple por que hacerlo. Ademas tome la idea de uno de los ejemplos y lo tenia ahí así que se quedo ahí con un cambio mínimo.
En la parte de <script> es que esta la acción. la función chrome.tabs.getSelected es la que nos permite traer la dirección actual. El primer argumento se deja null ya que queremos la ventana actual y el segundo argumento es una función que se usa como callback donde en el parámetro nos llega el "tab" que esta actualmente activo. De este "tab" es de donde obtenemos la direccion llamando tab.url. Luego solamente concatenas la dirección del web API a este url y se materializa una imagen con el QRCode. 
popup.html

<style>

body {

  min-width:150px;  

  overflow-x:hidden;

}

img {

  margin:5px;

  border:0px solid black;

  vertical-align:middle;

}

</style>

<script>

  chrome.tabs.getSelected(null, function(tab) { 

    var myTabUrl = tab.url; 

    document.getElementById("qrImage").src = buildQRCode(myTabUrl);

  });

function buildQRCode(linkURL) {

  return "http://chart.apis.google.com/chart?cht=qr&chs=230x230&chl=" + linkURL;

}

</script>

<body>

<center><img src="" id="qrImage" />

QR code for Current web address</center>

</body>




Una extensión de Chrome bien simple pero cumple el propósito de experimentar algo nuevo. Espero que les sirva de alguna utilidad esta información y despierte su curiosidad.

Mas información sobre los API de chrome están disponibles aquí http://code.google.com/chrome/extensions/api_index.html