Cómo hacer tu primera extensión Chrome
Para eso estamos nosotros por estos lados. Ayudarlos a ver que esas cosas que tanto nos gustan no son tan difíciles como parecen. Hacer una extensión de Google Chrome puede ser algo muy útil para promocionar tu negocio, tu Web y muchas cosas ingeniosas más.
Y todos los tutoriales que vi están desactualizados! Así que somos los primeros en estar al día de momento con los nuevos cambios por parte de Google.
La complejidad de la extensión de Google Chrome que nosotros queremos hacer está completamente supeditada a nuestro conocimiento de: HTML y Java Script. Luego la parte del CSS (estética) está regida por un archivo CSS.
Toda extensión de Google Chrome posee un archivo llamado “manifest” o sea manifiesto. Es un archivo con extensión json, así que hay que ser muy cuidadosos con los espaciados.
Entonces debemos crear una carpeta con un archivo llamado manifest.json que contenga dentro lo siguiente:
{
"name": "Extensión Chrome de Acceso Directo",
"version": "1.0",
"manifest_version": 2,
"description": "La primera extension que hacemos.",
"browser_action": {
"default_icon": "icon.png"
},
"permissions": [
"http://api.flickr.com/"
]
}
Cualquier archivo que no tenga las líneas arriba mencionadas no funcionara. Como se puede ver tenemos un nombre, una versión, la versión del manifiesto (aquí es donde el 90% de la Web hispana esta desactualizado!) que debe tener el número 2, iconos a cargar y urls a las cuales se autoriza. ¿Se autoriza para qué? Para interactuar con la extensión.
El siguiente paso consiste en crear un archivo html que tendrá lógicamente lo que sería el cuerpo de nuestra extensión un poco quizás lo que veremos. Suelen tener el nombre de popup.html
Nosotros podríamos poner aquí algo de este tipo:
<html> <head><title>Hello World!</title></head> <body> <p>Hello World!</p> </body> </html>Y cuando cargáramos la extensión en el browser y hacer click en el botoncito veríamos lógicamente el benemérito: “hola mundo!”. En este caso tomamos el ejemplo de Google y ponemos (descarten el hola mundo anterior) este código.
Como podemos ver es una página Web normal con algunos estilos y un llamado a un archivo nuevo que se llama popup.js donde van las sentencias Java Script.
Esto es así porque (aquí nuevamente hay mucha desactualización al respecto) por medidas de seguridad no puede ponerse código java script en popup.html. Siempre se debe llamar archivos externos.
En este caso el popup.js tiene este código. Demasiado extenso para poner aquí. Pero a grandes rasgos es una simple llamada al API de Flickr y se le pide que traiga algunas fotos.
Lo cierto es que ustedes pueden hacer una serie de cosas inmensas para Google Chrome con tan solo saber HTML5, CSS y Java Script. El punto final es claro esta tener todos y cada uno de estos archivos en una carpeta con el nombre de la misma.
Ahora ustedes deben familiarizarse con algunos objetos y eventos predeterminados de Google Chrome. También deberían estudiar como trabajar con un segundo archivo html que hace de background para procesar peticiones y trabajar con AJAX. Todo eso esta aquí. El mismo lugar que sirvió de fuente para este tutorial. ;)
Es muy útil también tener a mano los depuradores clásicos del tipo Firebug. Para poder mirar códigos ajenos.
Fuente: Chrome Dev.
Acceso Directo en tu email gratis: