Creando nuestra propia extensión para Chrome

Crear nuestras propias extensiones para Google Chrome o Chromium no es un proceso complicado. Veremos a continuación un ejemplo muy simple para crear nuestra primera extensión para Chrome. Nota: este articulo esta basado en el siguiente tutorial.

Bien, lo primero que tenemos que hacer es crear una carpeta donde iremos dejando todos los recursos que queramos utilizar en la extensión, es decir, imagenes, ficheros javascript, páginas HTML y similares. El nombre que le des a esta carpeta es indiferente pero seria bueno que la llamaras de la misma manera que la extensión que quieres crear.

Ahora tenemos que crear un fichero llamado “manifest.json” que contiene la información principal de la extensión y que sera utilizada por el navegador cuando queramos desplegarlo. Un ejemplo de fichero “manifest.json” podria ser el siguiente:

{
"name": "Ubuntu Release",
"version": "1.0",
"description": "Mi primera extension",
"browser_action": {
"default_icon": "ubuntu.png",
"popup":"popup.html"
}
}

En este fichero puedes indicar el nombre de la extensión, su número de version y una descripción de la misma. Esta información es la que luego se mostrara desde el gestor de extensiones de Chrome. Fijate en las entradas “default_icon” y “popup”, contienen el nombre del icono que se usara para la extensión y el nombre de la pagina html que se invocara cuando hagas click sobre ese icono. Naturalmente estos ficheros deben existir y residir en la misma carpeta donde ubicas “manifest.json”, si además tus páginas emplearan más codigo (p.ej ficheros javascript), imágenes o algún otro tipo de recurso web, deberias incluirlos en la carpeta. Aqui puedes ver una captura de mi extensión en desarrollo:

Como puedes ver he incorporado la imagen “ubuntu.png” que usare como icono de la extensión. Y una imagen llamada “ubunturelease.png” que usare dentro de la pagina “popup.html”. El código de popup.html es el siguiente:

<html>
<body>
<b>Ubuntu Release:</b>
<br/>
<img src="ubuntu-release.png" />
</body>
</html>

Es una paginita muy sencilla que solo muestra la imágen anterior. Aquí ya podrias tú programar algo más complejo o colocar el código HTML y javascript que te interese.

Bien, ya lo tenemos todo. Necesitamos la versión de desarrollo de Chrome. Ve a la última opción del menu y selecciona la entrada: “Extensiones”.

Se abrira una nueva pestaña que te mostrara las extensiones que tienes instaladas. Si haces click en el botón “Developer Mode”, se desplegara un panel con 3 botones nuevos: Load unpacked extension (cargar extension desempaquetada), Pack extension (empaquetar extension), Update extensions now (actualizar lista de extensiones ahora).

Nos interesa el primero de ellos (Load unpacked extension), si lo pulsamos se nos abrira una nueva ventana donde podemos indicar la ruta de la carpeta donde estamos dejando los recursos (entre ellos manifest.json). Al indicar la ruta de esa carpeta y aceptar. De manera automática se carga la extensión en el navegador:

Enhorabuena!! ya has creado tu primera extensión. En el panel superior de Chrome habrá aparecido un icono nuevo y al hacer click sobre él se ejecuta el código asociado.

Si te fijas en el gestor de extensiones, veras que por cada extensión aparecen las opciones: Cargar de nuevo, Disable y Desinstalar. Las opciones son claras. Disable se usa para deshabilitar la extensión, Desinstalar para eliminarla y Cargar de nuevo, para leer de nuevo la carpeta de recursos o la extensión ya instalada previamente. Esta opcion “Cargar de nuevo” es útil cuando estamos cambiando código (modo debug) en las páginas HTML o javascript de la extensión y queremos ver los nuevos cambios.

Si todo va bien, puede que te interese compilar la extensión a un fichero en formato .crx, para ello usa la opción “Pack extension…”, te pedira la ruta de la carpeta y en ese mismo directorio te creara un fichero crx que podrás llevar a otro equipo o utilizar sobre tu propio browser para instalar de manera permanente la extensión. Estos ficheros .crx realmente son .zip, si le cambias la extension de .crx a .zip y lo descomprimes podrás ver la estructura de carpetas de la extensión que has creado y que se corresponde con la estructura de tu carpeta de recursos.

Y si creas una extensión realmente buena, no te olvides de añadirla a las Extensiones de Google chrome. para que el resto de usuarios la podamos disfrutar.

Relacionado | Personaliza tu chrome/chromium, crea tu propio tema .crx

8 Responses to “Creando nuestra propia extensión para Chrome”


  1. 1 Alesete febrero 4, 2010 de 8:42 pm

    Entonces las extensiones chrome, son páginas web no? html y javascript?

  2. 3 Inukaze febrero 5, 2010 de 3:15 am

    Yo nunca encontre una extension que te colocara la barra de las extensiones en la parte inferior , por donde por lo general se muestran las descarga , como la tuvo alguna vez una de sus versiones beta , esque una vez tenia como 52 extenciones y 32 cubiran casi toda la barra de direcciones y asi que basicamente no veia en que sitio estaba xD

  3. 4 Alexis septiembre 24, 2011 de 3:55 am

    Hola, por si le ocurre algo lo mismo que a mí de al cargar la extensión aparezca un mensaje por problema con el manifest, lo que deben hacer es cambiar la codificación a UTF-8, esto me ocurrió al hacerlo con Notepad++

    Salu2

  4. 5 Alexis septiembre 24, 2011 de 4:20 am

    pd: 1 pregunta, sabes que se puede hacer para que al hacer click fuera de la extensión, esta no se cierre??


  1. 1 Un ejemplo de Web Database en Chrome « Ubuntu Life Trackback en febrero 22, 2010 de 9:28 pm
  2. 2 Un ejemplo de Web Database en Chrome | Ayuda Linux Trackback en febrero 22, 2010 de 11:24 pm
  3. 3 Crear Nuestra Propia Extension Para Google Chrom | Informatica Trackback en julio 4, 2011 de 8:13 pm

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 )

Google photo

Estás comentando usando tu cuenta de Google. 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 )

Conectando a %s







¿Es compatible tu equipo con Ubuntu?


( Muchos fondos de pantalla, aqui )

DESCARGATE SCIFI LIFE

365 Dias de Soledad
Me debes los sueños, las promesas y las noches rotas. Me debes la paz, la sonrisa y la esperanza robadas. Me debes la sangre, las lágrimas y el sudor vertido. Me debes las noches vacías, los abrazos anhelados. Me debes un beso de ajenjo de tu amarga boca.

The Ubuntu Counter Project - user number # 11961
Geo Visitors Map

Archivos

febrero 2010
L M X J V S D
« Ene   Mar »
1234567
891011121314
15161718192021
22232425262728

Blog Stats

  • 30.989.430 hits

A %d blogueros les gusta esto: