En breve aparecerá la primera versión de Chrome/Chromium con soporte de extensiones. Es el mecanismo ofrecido por el navegador para modificar y mejorar la funcionalidad, personalizándola al gusto del usuario. En el caso de Chromium, bastará con tener conocimientos de HTML, CSS y JavaScript para poder escribirlas. Por ejemplo:
- Mostrar iconos en la barra de direcciones al visitar ciertas páginas:
- Añadir botones a la barra de herramientas (con opción a mostrar un desplegable con más acciones):
- Modificar la apariencia y comportamiento de las páginas web mostradas
Tutorial: Hola mundo!
Nota: traducido de aquí. Vamos a crear un nuevo botón en Chrome que al ser pulsado mostrará una página generada automáticamente. Algo así:Para empezar, necesitarás la versión de Chrome del canal de desarrolladores, ya que aún no está disponible (al menos a fecha de hoy 26/nov/09) en los canales estable o beta. Los pasos para crear la extensión son los siguientes:
- Crea una carpeta llamada "hola".
- Crea un archivo llamado
manifest.json
con este contenido:
{ "name": "Mi Primera Extension", "version": "1.0", "description": "Esta es la primera extension.", "browser_action": { "default_icon": "icon.png" }, "permissions": [ "http://api.flickr.com/" ] }
- Descarga el siguiente icono a la misma carpeta.
- Carga la extensión:
- Abre la página de gestión de extensiones pulsando el menú
y seleccionando
Extensiones...
- Si el
modo desarrollador
tiene un símbolo+
, púlsalo para añadir información sobre el desarrollador. El símbolo+
cambia a-
y aparecerán más botones e información.
- Pulsa el botón
Carga extensión...
y aparecerá un diálogo de selección de archivo. - En el diálogo selecciona la carpeta "hola" y pulsa
OK
.
Si la extensión es válida, aparecerá el icono junto a la barra de direcciones y la información sobre la extensión en la página de gestión, tal y como se ve en la siguiente imagen:
- Abre la página de gestión de extensiones pulsando el menú
- Añade código a la extensión. Edita el archivo
manifest.json
y agrega la siguiente línea:
... "browser_action": { "default_icon": "icon.png", "popup": "popup.html" }, ...
- Dentro de la carpeta "hola", crea un archivo de texto llamado
popup.html
y añade el siguiente código: Sigue este enlace para ver el código
- Vuelve a la página de gestión de las extensiones y recárgala para ver la nueva versión de la extensión.
- Pulsa el icono de la nueva extensión que aparece en la barra de herramientas. Debería aparecer una ventana emergente con el contenido de
popup.html
:
Esta ha sido una introducción básica al sistema de extensiones de Chrome/Chromium. Puedes continuar leyendo sobre las opciones disponibles y sobre cómo realizar tareas más concretas en la Developer's Guide. Intentaré publicar un tutorial más completo enfocando más en el código JavaScript y la API ofrecida para acceder a las opciones del navegador.
0 comentarios:
Publicar un comentario