Primera Extension en Chrome

Ahora que Chrome se esta volviendo cada vez mas popular, es util saber desarrollar extensiones. Para ello tengo aqui les dejo un tutorial simple de una primera aplicacion.

Toda aplicacion empieza con un archivo manifest.json donde estara el nombre de la extension, descripcion, acciones a realizar, icono, etc. La siguiente estructura muestra algo basico:

{
  "name": "AboutIP",
  "version": "1.0",
  "description": "Averigua los datos con los que navegas en la red.",
  "browser_action": {
    "default_icon": "icon.png",
    "popup": "data.html"
  },
  "permissions": [
    "http://ifconfig.me/"
  ]
}
  • name: el nombre de nuestra aplicacion
  • version: la version de la aplicacion
  • description: un breve detalle de lo que hace la aplicacion
  • browser_action: aqui va el comportamiento de la aplicacion, en este caso indicamos el icono que aparecera en la barra del navegador, asi como el archivo html que mostrara al momento de clickear dicho icono.
  • permissions: este parametro indica con que direccion URL, con la cual interactuara nuestra extension. (En este caso sera el servicio ifconfig.me, un servicio para obtener los datos de nuestra conexion)

Una vez armado el archivo manifest.json tenemos que armar nuestro archivo data.html, con lo siguiente:

<!DOCTYPE html>
<head>
    <title>Equipo de Desarrollo</title>
    <meta http-equiv="content-type" content="text/html;charset=utf-8" />
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" language="javascript"> </script>
    <style type="text/css">
	body {
		background-color: #efefef;
	}

	h1 {
		color: #002966;
	}
	a {
		text-decoration: none;
	}
	.items {
		display: none;
	}
	</style>
    <script language="javascript">
		$(document).ready(function() {
			$.getJSON("http://ifconfig.me/all.json",
			{
				format: "json"
			},
			function(data) {
				$('#ajaxLoader').hide();
				$('body').width("500px");
				$('#equipo').append('<h1>Datos de su equipo</h1>');
				$('#equipo').append('<b>IP:</b>' + data.ip_addr + '<br />');
				$('#equipo').append('<b>User-Agent:</b>' + data.user_agent + '<br />');
				$('#equipo').append('<hr />');
				$('#equipo').append('<a id="ver" href="#" onClick="javascript: verMas();" >Ver mas datos</a>');
				$.each(data, function(i,item) {
					$('#equipo').append('<span class="items" ><b>' + i + '</b>' + ' : ' + item + '<br/></span>');
				});
			});
		});
		function verMas() {
			$('.items').show();
			$('#ver').hide();
		}
    </script>
</head>
<body>
    <div class="container" id="equipo">
        <img id="ajaxLoader" src="ajax-loader.gif" />
    </div>
</body>
</html>

Tambien tenemos un icono para nuestra aplicacion:

Con todos los archivos, nuestra carpeta sera algo asi:

Luego que tenemos nuestro icono y nuestro archivo html, procedemos a instalarlos. Ingresamos al panel de extension del Google Chrome y activamos la opcion “Modo Programador”:

Luego seleccionamos “Cargar Extension sin empaquetar” y subimos toda la carpeta donde esta nuestro plugin, y luego de ello veremos que el icono aparece al costado de la barra de direccion:

Chrome Extension

Al clickear veremos que muestra los datos de nuestra conexion:

Screen de la extension

Con esto habremos desarrollado nuestra primera aplicacion para Google Chrome.

Anuncios

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s