Adicione um Item ao Menu de Contexto

Para adicionar itens e submenus ao menu de contexto do Firetox, use o módulo  context-menu.

Aqui está um add-on que adiciona um novo item ao menu de contexto. O item é mostrado sempre que alguma coisa na página é selecionada. Quando é clicado, a seleção é enviada para o código principal do add-on, que apenas registra ele:

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);
  }
});

Teste: execute o add-on, carregue uma página web, selecione algum texto e clique com o botão direito. Você verá o novo item aparecer:

Clique nele, e a seleção é registrada no console (ou na shell, se você estiver executando uma instância do Firefox na linha de comando):

info: elephantine lizard

Detalhes

Tudo que este add-on faz é criar um item no menu de contexto. Você não precisa adicioná-lo: uma vez que você criou o item, ele é automaticamente adicionado no contexto correto. O construtor nesse caso possui quatro opções: label, context, contentScript, e onMessage.

label

O label é tão somente a string que será mostrada.

context

O context descreve a circunstância em que o item será mostrado. O módulo context-menu oferece uma série de contextos embutidos, incluindo este SelectionContext(), que significa: mostrar o item quando alguma coisa na página for selecionada.

Se estes simples contextos não forem suficiente, você pode definir contextos mais sofisticados usando scripts.

contentScript

Este anexa um script ao item. Nesse caso o script espera pelo clique do usuário no item, então envia uma mensagem para o add-on contendo do texto selecionado.

onMessage

A propriedade onMessage oferece um modo para o código do add-on responder mensagens do script anexado ao item do menu de contexto. Nesse caso é apenas registrado o texto selecionado.

Então:

1. O usuário clica no item
2. o conteúdo do script do evento click dispara, e o conteúdo do script recupera o texto selecionado e envia a mensagem para o add-on
3. o evento message do add-on dispara, e ao código manipulador da função é passado o texto selecionado, que é registrado

Mais opções

Adicionando uma imagem

Você pode adicionar uma imagem ao menu de contexto por meio da opção image. Isto é uma URL apontando para um ícone 16x16 que é mostrado do lado esquerdo do item do menu de contexto. Geralmente você armazenaria sua imagem no diretório "data" do seu add-on, e construiria a 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);
  }
});

Adicione uma tecla de atalho

A partir do Firefox 35 você pode especificar uma tecla de atalho usando a opção  accessKey. Deve ser somente um caracter. Pressione a tecla selecionada na opção quando o menu de contexto estiver aberto:

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);
  }
});

Aprendendo mais

Aprendendo mais sobre o módulo context-menu, veja a referência da API context-menu.