Introducción
En la
programación de extensiones para Google Chrome se necesita crear una serie de
archivos los cuales crean una estructura que es la que el navegador interpreta
como la “Extensión”. Ya que las extensiones son como programas; pueden
llegar a realizar miles de funciones, la
función o necesidad que satisfaga dicha extensión o programa depende total y
enteramente del programador y del publico al cual valla dirigido, por lo cual es
imposible para mi enseñarles a crear una extensión propiamente dicha, ya que
como acabo de mencionar depende de lo que ustedes como programadores quieran
hacer.
Pero si les voy a enseñar a realizar la estructura básica
que debe tener toda extensión para este navegador y además les voy a dar unas
pautas de programación para los que no tienen el conocimiento en programación
tan avanzado
Información
ü
El lenguaje que se utiliza para las extensiones
es un poco de HTML y mucho JavaScript, así que si no manejas este lenguaje de
programación o si lo manejas muy básico, te recomendaría que antes de continuar
con este tutorial investigues y practiques un poco este lenguaje.
Te recomiendo iniciar
leyendo “Introducción a JavaScript” escrito por Javier Eguiluz Que puedes encontrar en este sitio web:
O la versión PDF en:
En donde se da una breve explicación
de todo lo que es JavaScript y está muy
bien explicado.
ü Si
tienes experiencia en programación web, seguramente tienes Dreamweaver
instalado en tu ordenador, en caso de que no lo tengas puedes usar un editor de
texto muy sencillo y liviano para la descarga llamado NotePad2. Puedes utilizar
cualquiera de los dos programas, ya que el código en ambos es exactamente
igual.
ü Y
lo último que debes tener en cuenta es que la documentación para extensiones de
Google en español es muy escasa, por no decir inexistente, así que no estará de
más manejar un poco el ingles, ya que las paginas de las que nos guiaremos
están en este idioma
Contenido
Lo primero que vamos a hacer es crear una carpeta en el
escritorio, esta carpeta la vamos a llamar “Mi_Extension” o si ya tienes un
nombre pensado para tu extensión le puedes llamar de esa manera.
Archivo Manifiest
Una vez tengas la carpeta “Mi_Extension” creada nos vamos al
NotePad2 y pegamos el siguiente código:
{
"manifest_version": 2,
"name": "My Extension",
"description": "Extencion que realiza tal funcion",
"version": "1.0",
"icons": { "16": "icon.png",
"48": "icon.png",
"128": "icon.png" },
"author": "Tu nombre va aquí, blog:
miprogramador.blogspot.com",
"options_page": "Opciones.html",
"background": {
"persistent":
true,
"page": "background.html"
},
"permissions": [
"tabs",
"storage",
"*://*/"
],
"browser_action": {
"default_icon": "iconpup.png",
"default_popup": "popup.html"
}
}
Les debería quedar algo como esto:
Ahora damos click en Archivo, Guardar Como, y guardamos el
archivo en la carpeta que acabamos de crear
con el nombre “manifest.json”
Y lo que acabamos de crear es el archivo manifest, el cual
lo describiría yo como la “Cabeza” de la extensión, ya que es donde se guarda
la información básica de dicha extensión. Les explicare lo que representa cada
línea para que de esta manera ya lo puedan modificar según la necesidad que
tengan para su extensión
- Name:
En la línea número cuatro esta la etiqueta “Nombre” que es en donde
especificamos el nombre de nuestra extensión.
- Description:
Mas abajo esta la etiqueta “Descripción” que es donde incluimos una breve
descripción de nuestra aplicación para que el usuario final pueda ver de qué se
trata nuestra extensión
- Version: La
versión de nuestra extensión, en este caso 1.0 porque es la primera
- Icons: Aquí
especificamos las imágenes que nuestra extensión utilizara como iconos, como
vemos necesitamos diferentes tamaños de la misma imagen para ubicar en
distintos lugares, se puede utilizar la misma para todos los tamaños pero es
recomendable usar la misma imagen con sus respetivos tamaños
- Author:
Le sigue la etiqueta “Autor” En este lugar ponemos nuestro nombre y también un
correo electrónico o sitio web para que los usuarios puedan contactar con
nosotros si así lo deseamos
- Options_page:
En este lugar especificamos la dirección de una página que se abrirá cuando el
usuarios desee acceder a las opciones de la extensión, hay que tener en cuenta
que esto es opcional, si no quieres poner una página de configuración o
opciones; elimina esta etiqueta de tu archivo. Otra cosa a tener en cuenta es
que esta página debe estar dentro de la carpeta, mas adelante programaremos una
para los que deseen tenerla.
- Background:
En este espacio es donde
especificamos el archivo principal de la extensión.
- Permissions:
En este espacio es donde especificamos los permisos que nuestra extensión
debe tener, si nuestra extensión debe utilizar un recurso, pero el permiso para
dicho recurso no se encuentra especificado en este espacio entonces se
producirá un error ya que el navegador no permitirá el uso del recurso
necesitado.
- browser_action:
cuando tenemos una extensión instalada en el navegador, nos aparece un
icono en la esquina superior izquierda del navegador, que en algunas ocasiones
nos muestra información sobre la extensión
En donde “default_icon” seria
donde especificamos el icono con extensión .png y “default_popup” el archivo
html que se expandirá cuando se haga click sobre el icono
Puedes consultar más
información sobre el archivo manifiest en:
Archivo background.js
Nuevamente abrimos el
NotePad2 y creamos un documento nuevo y pegamos este código
<html>
<head></head>
<body>
<script src="background.js"></script>
<script>
</script>
</body>
</html>
Y lo
guardamos con el nombre background.html (Nótese que este nombre concuerda con el
especificado en la línea Background
del archivo manifiest)
Archivo background.js
Para crear este archivo
volvemos a crear un documento nuevo y lo guardamos con el nombre background.js (Nótese que concuerda con el
nombre en la línea 4 del archivo background.html) pero ¿que se pone en este
archivo?
Este es el archivo en
donde se plasmara el código de nuestra extensión, como les mencione
anteriormente esto depende de lo que quieras que realice tu extensión, pero
aquí les dejo un pequeño ejemplo:
chrome.tabs.onUpdated.addListener(OnLoginHandler);
if(localStorage['Registro']==undefined){
var user = prompt('Introduzca su Nombre');
localStorage['User']=user;
}
Else {
alert ("Bienvenido"+ localStorage.User);
}
Tener en cuenta:
La primera línea es un
evento originario de de Google Chrome, para programas extensiones necesitamos
manejar y conocer todos estos eventos, puedes aprender más de estos eventos en
este link https://developer.chrome.com/extensions/events
El resto de código no es
mas JavaScript simple utilizando el Local Storage, el cual si me hicieron caso
al inicio de este artículo y leyeron un poco sobre javascript o si eres
programador de este, ya lo debes de conocer e interpretar perfectamente.
Archivo Opciones.html
Creamos el archivo Opciones.html este es un archivo que
sirve para que el usuario pueda especificar opciones o configuración de la
extensión o si deseas mostrar alguna información al usuario. Lo podemos crear
si lo deseamos, si queremos ahorrarnos el trabajo o no lo necesitamos solo
eliminamos la etiqueta del archivo mafiest y listo. Nótese que como su
extensión lo dice; el lenguaje en este archivo debe ser HTML. Y nótese también
que el nombre de este archivo concuerda con la etiqueta “options_page”
en el archivo manifiest.
Imagen iconpup.png
Este es la imagen que se mostrara como icono de la extensión
que será visible en la esquina superior derecha del navegador
Archivo popup.html
Este es un documento HTML que se ejecutara cuando el usuario
haga click en el icono de la extensión que se ubica en la esquina superior
derecha, que acabamos de ver como iconpup.png
Este archivo es opcional, y puede ser utilizado para mostrar
información o para lo que el programador dese.
Imagen icon.png
Cuando vamos a la lista de extensiones instaladas en Google
Chrome nos aparasen las extensiones con una serie de información que habremos
ingresado anteriormente en el archivo manifiest
Pero vemos también que cada extensión nos parece con un
icono o una imagen, esta es la imagen que guardamos con el nombre icon.png (Nótese que este nombre concuerda
con el especificado en el espacio “icons” del archivo manifiest)
Empaquetar extensión
Una vez tengamos todos nuestros archivos listos y que la
extensión haga lo que queremos que haga sin errores, entonces estamos listo
para empaquetar la extensión, que vendría siendo algo así como la compilación
para que podamos crear de estos un solo archivo que será el que instalaremos en
los otros ordenadores donde queramos tener nuestra extensión
Para hacerlo solo vamos a la lista de extensión instaladas y
pulsamos sobre el botón que dice “Empaquetar extensión”
Una vez hecho esto nos apareceré un mensaje como este:
En “Directorio Raíz” Examinaremos y colocaremos la dirección
de nuestra carpeta “Mi_extension” y el campo “Clave privada” lo dejaremos en
blanco, pulsamos “Empaquetar extensión” y listo.
Al realizar estas operaciones nos aparecerán dos archivos,
uno con extensión .crx y otro con .pem
El archivo con extensión .crx es nuestra extensión, la que
podremos instalar y el archivo .pem es la Clave privada de nuestra extensión (Especifico
lo que es esto al final del articulo)
Instalar extensión
Para instalar la extensión que acabamos de empaquetar, solo
tomamos el archivo que se genero en el empaquetado y lo arrastramos hasta la
lista de extensiones instaladas y listo, el navegador nos instalar la extensión.
Y si deseas subir tu extensión a la Google Store aquí les
dejo el link de un video que explica como
Clave privada
La clave privada es un archivo que el navegador nos
solicita si queremos realizar una segunda versión o superiores de nuestra extensión,
es como una llave que asegura que se trata de una versión más reciente de la
primera extensión, de este manera podemos asegurar que mas nadie haga o
suplante nuestra extensión, así que aseguren bien este archivo.
