Programar Aplicación
para Google Chrome II

En este caso veremos como crear una aplicación y ponerla en el popup, como se ve en la imagen. en esta segunda parte ya se juega con la mezcla de lenguajes, ahora vamos a tener que utilizar HTML5, opcional CSS3, Javascript, etc.
Como puede ver la aplicación que esta en el popup de la imagen es “avast! WebRep” (Reputación de sitios web), nosotros vamos a crear algo similar, no tan avanzado pero vamos a poder ver como colocar aplicaciones allí.
Primero y como siempre, una carpeta con el nombre de la aplicación, dentro de ella: imagenes “256×256”, “128×128”, “64×64”, “32×32” y “16×16”.

Ahora vamos a abrir nuestro Bloc de Notas y utilizaremos el siguiente código:

como veran es muy similar a la primer aplicación que hicimos hace unas horas atras, pero ahora tenemos un par de cositas nuevas. Ahora tenemos una función “browser_action”, la cual esta constituida por un icono “default_icon” y un nombre “default_title”; a esto se le agrega el archivo perteneciente al popup, un archivo “popup.html“, guardamos nuestro código como manifest.json.
Bien, ahora debemos crear nuestro otro archivo, así que ejecutamos de nuevo el Bloc de Notas, ahora vamos a utilizar el lenguaje de programación web que más nos guste, en mi caso haré un simple ejemplo con HTML. Vamos a utilizar el siguiente codigo:

como veran es un simple HTML, con una extructura normal que tan solo le agregue un simple texto. Ahora vamos a chrome://settings/extensions, cliqueamos en “cargar extención descomprimida…” y buscamos la carpeta donde esta nuestro POPUP. Una ves terminado nos aparecerá instalado y notificado:

Bien si todo salio bien veremos en el POPUP a nuestro iconito:

Ahora si presionamos sobre él veremos nuestro texto:

Ahora bien, colocamos un icono en el popup y pudimos ver como trabaja, pero no quiero que aparezca solamente un texto, quiero algo más… bueno sabiendo un poco de HTML y CSS3, puedes crear algo como lo que hizo Avast!:

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *