Agregar una opción al Menú Contextual

Para agregar opciones y submenús al menú contextual de Firefox, se usa el módulo context-menu.

Aquí se presenta un add-on que agrega una nueva opción al menú contextual. La opción es mostrada en cualquier parte donde sea seleccionado algo en la página. Cuando se hace clic, la selección es enviada al código principal del add-on, el cual simplemente lo registra:

var contextMenu = require("sdk/context-menu");
 var menuItem = contextMenu.Item({
  label: "Log Selection",
  context: contextMenu.SelectionContext(),
  contentScript: 'self.on("click", function () {' +
                 '  var text = window.getSelection().toString();' +
                 '  self.postMessage(text);' +
                 '});',
  onMessage: function (selectionText) {
    console.log(selectionText);
  }
});

Pruebe lo siguiente: ejecute el add-on, cargue una página web, seleccione algún texto y haga clic derecho sobre el. Debe aparecer una nueva opción:

Haga clic en ella, y la selección es registrada en la terminal:

info: elephantine lizard

Detalles

Todo lo que hace este add-on es construir una opción en el menú contextual. No se necesita agregarla: una vez construida la opción, esta es agregada automáticamente en el contexto correcto. En este caso el constructor toma cuatro opciones: label, context, contentScript, y onMessage.

label

El label es simplemente la cadena de caracteres que es mostrada.

context

El context describe las circunstancias en las cuales la opción debe ser mostrada. El módulo context-menu  provee varios contextos simples integrados, incluyendo el SelectionContext(), el cual refiere: muestra la opción cuando algo es seleccionado en la página.

Si estos contextos simples no son suficientes, puede definir contextos más sofisticados usando scripts.

contentScript

Este adjunta un script a la opción. En este caso el script escucha hasta que se hace clic en la opción, luego envía un mensaje al add-on que contiene el texto seleccionado.

onMessage

La propiedad onMessage proporciona una vía para que el código del add-on responda a los mensajes del script integrado a la opción del menú contextual. En este caso solo registra el texto seleccionado.

Por lo tanto:

1. El usuario o la usuaria hace clic en la opción
2. se activa el evento click del script de contenido, retorna el texto seleccionado y envía un mensaje al add-on
3. se activa el evento message del add-on, la función responsable en el código del add-on pasa el texto seleccionado, el cual registra

Más opciones

Agregar una imágen

Se puede agregar una imagen a la opción del menú contextual con la opción image. Esta es una URL que apunta a un icono de tamaño 16x16 que es mostrado a la izquierda de la opción en el menú contextual. Generalmente se guarda la imagen en el directorio "data" del add-on, y se construye la URL usando self.data.url():

var self = require("sdk/self");

var contextMenu = require("sdk/context-menu");
var menuItem = contextMenu.Item({
  label: "Log Selection",
  context: contextMenu.SelectionContext(),
  contentScript: 'self.on("click", function () {' +
                 '  var text = window.getSelection().toString();' +
                 '  self.postMessage(text);' +
                 '});',
  image: self.data.url("icon-16.png"),
  onMessage: function (selectionText) {
    console.log(selectionText);
  }
});

Agregar tecla de acceso directo

Desde Firefox 35 es posible especificar una tecla de acceso directo usando la opción accessKey. Esta debe ser una cadena de un solo carácter. Al presionar la tecla se selecciona la opción cuando el menú contextual esta abierto:

var contextMenu = require("sdk/context-menu");
var menuItem = contextMenu.Item({
  label: "Log Selection",
  context: contextMenu.SelectionContext(),
  contentScript: 'self.on("click", function () {' +
                 '  var text = window.getSelection().toString();' +
                 '  self.postMessage(text);' +
                 '});',
  accessKey: "l",
  onMessage: function (selectionText) {
    console.log(selectionText);
  }
});

Conozca más

Para conocer más sobre el módulo context-menu, puede ver la referencia de la API context-menu.