Cómo extender la nueva Barra de desarrolladores

8 octubre, 2012 4:38 por

Firefox 16 será lanzado próximamente. Entre sus mejoras se incluyen nuevas herramientas para desarrollo web, incluyendo la Barra de desarrollares. Ésta permite ejecutar comandos como inspeccionar elementos, iniciar el depurador, y generar imágenes de páginas web. La barra está diseñada para ser extendida fácilmente, así que hice la prueba y éstos son mis resultados.

Me pareció particularmente útil que se pudieran generar imágenes con esta herramienta utilizando el comando screenshot, así que decidí llevarlo un paso más allá. Creé un nuevo comando imgur, que genera una imagen con los mismos parámetros, pero la sube a imgur.com en vez de guardarla localmente. El proceso de desarrollo fue más o menos así:

  1. Investigar cómo se crea un comando. Por el momento no hay documentación pública al respecto, así que esto requirió algo de exploración. Afortunadamente ya sabía dónde estaba el código, así que fue fácil ubicar el comando screenshot. El comando consiste en poco más de 100 líneas de código, y es fácil de entender.
  2. Investigar el API de imgur. El API está bien documentado en api.imgur.com.
  3. Probar, probar, probar…

imgur instalado

El resultado está en Github. Vale notar que el código como tal no va a funcionar, dado que no publiqué la llave del API de imgur. Para que les funcione, tienen que generar una llave propia y colocarla en el código (es gratuita y fácil de generar). Pero, para los que quieren ver el complemento en acción, está disponible aquí. Debería funcionar bien en Firefox 16 y versiones más nuevas.

Mi intención no fue crear un producto finalizado, así que no voy a publicarlo más que en este artículo y una presentación de desarrollo web que tenemos en Costa Rica. Hay unas cuantas cosas que arreglarle, como la (falta de) localización y los datos que se envían a imgur (título, descripción, etc.). Si alguien quiere encargarse de pulir este proyecto, adelante :).

Actualización: Mike Ratcliffe me señaló que existe esta documentación para crear comandos.

The following two tabs change content below.

jorgev

Add-ons Developer Relations Lead at Mozilla
Jorge trabaja para el equipo de complementos de Mozilla, y se dedica a Mozilla Hispano y Mozilla Costa Rica en su tiempo libre. Actualmente está encargado del blog de Mozilla Hispano Labs.

Compartir artículo:

  • ¡Participa!

    Firefox Flicks »
    Crear un vídeo sobre Firefox ahora tiene premio.
    Firefox Affiliates »
    Agrega botones de Firefox en tu sitio web y comparte tu amor por Mozilla Firefox.
    Armada alucinante »
    Ayuda a otros usuarios en Twitter.
    Desafío para desarrolladores »
    Envía tu demo y gana muchos premios.
    Colabora con la comunidad »
    En Mozilla lo importante son las personas. Descubre cómo puedes colaborar.

    Boletín Firefox

    Suscríbete al boletín de novedades de Firefox.

  • Descargas

    Descarga los programas de Mozilla.

    Lo más visto

    cc-by-sa