26 noviembre, 2009

Empezando con las extensiones de Chrome

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:

  1. Mostrar iconos en la barra de direcciones al visitar ciertas páginas:



  2. Añadir botones a la barra de herramientas (con opción a mostrar un desplegable con más acciones):



  3. 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:
  1. Crea una carpeta llamada "hola".

  2. 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/"
      ]
    }
    
    
  3. Descarga el siguiente icono a la misma carpeta.


  4. 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:




  5. 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"
    },
    ...
    


  6. 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

  7. Vuelve a la página de gestión de las extensiones y recárgala para ver la nueva versión de la extensión.

  8. 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:

Si no ves la ventana, sigue las instrucciones de nuevo prestando atención. No intentes cargar un HTML que no esté dentro de la carpeta de la extensión porque no funcionará.

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.

Publicar un comentario en la entrada

Últimos links en indiza.com