Firefox Addon SDK: formas de mostrar las opciones al usuario?

Question

Soy bastante nuevo en el desarrollo de complementos con Firefox. Escogí el addon sdk para portar mi extensión de Chrome a Firefox.

¿Qué sugeriría para mostrar una ventana de opciones/panel de opciones/opciones a un usuario?

Cargando un archivo options.html de mi directorio de complementos funciona bastante bien (addTab (data.url ("options.html"));), pero no puedo adjuntarle modificaciones de página, siempre que ai saber. Por lo tanto, no puedo comunicarme con main.js para guardar mis opciones, ¿verdad?

¿Cómo debería acceder el usuario? En Chrome esto es bastante fácil. Haga clic con el botón derecho sobre su icono -> opciones y se abrirá para usted. ¿Hay formas de crear un comportamiento similar para Firefox?

¿Alguna sugerencia sobre eso?

Answer 1

Comenzando con el Add-on SDK 1.4 tiene el simple-prefs module. Generará automáticamente opciones en línea para su complemento, que se muestran directamente en la página de su extensión en el Administrador de complementos. Esa debería ser la forma preferida de mostrar las opciones. La desventaja: abrir las opciones programáticamente no es trivial, incluso para complementos clásicos. Y el SDK no parece admitir controles complicados (documentation of what's possible with inline options), solo los más básicos.

Si desea hacer su propia versión, probablemente desee integrar un botón de "Opciones" en un drop-down panel. También debe ser capaz de colocar un guión de contenido a ella a través page-mod package, algo como esto debería funcionar:

var pageMod = require("page-mod"); 
pageMod.PageMod({ 
    include: data.url("options.html"), 
    ... 
}); 

var tabs = require("tabs"); 
tabs.open(data.url("options.html")); 

desventaja aquí: el uso de la forma estandarizada para mostrar opciones adicionales (a través de administrador de complementos) ganó' t posible, el SDK no admite nada más que las opciones en línea.

Answer 2

En este caso, necesita usar Port.on()/Port.emit() para enviar una opción de control desde options.html, como hacer clic en el botón de configuración. Y "fichas" módulo

options.html 

     var panelIsOpen = 0; 

     $('#settings').click(function() { 
       self.port.emit("statusoptions", {optionsIsOpen:1}); 
      }); 

popup.html 

     Panel.port.on("statusoptions", function (panda) { 
       if(panda.optionsIsOpen === 1){ 
        Panel.hide(); 
        tabs.open({ 
         url: "options.html", 
         onReady: function onReady(tab) { 
          Panel.hide(); 
         }, 
         contentScriptFile: [ 
          data.url("js/jquery-2.0.0.min.js"), 
          data.url("js/options.js")], 
        }); 
       } 
      }); 

Answer 3

Gracias Wladimir Palant para señalar la dirección, sin embargo, todavía me llevó bastante tiempo para averiguar el código final. Pongo mi resultado aquí para referencia de otros en el futuro. (Que simplifica el código un poco aquí con fines de elaboración, pero la estructura principal debe ser correcta.)

content.js: (clic en un vínculo para abrir la página de opciones)

$("#options").click(function(){ 
    self.port.emit("open_options", {}); 
    }); 

background.js :

//regsiter the event 
backgroundInit = function(worker) { 
    worker.port.on("open_options", function(request){ 
    var tabs = require("sdk/tabs"); 
    tabs.open({ 
     //open a new tab to display options page 
     url: self.data.url("options.html"), 
    }); 
    } 

    worker.port.on("pull_preferences", function(request){ 
    var preferences = null; 
    //get preferences (from simple storage or API) 
    woker.emit("update_content_preferences", {preferences:preferences}); 
    }); 


    worker.port.on("push_preferences", function(request){ 
    var preferences = request.preferences; 
    //write the preferences (to simple storage or API) 
    }); 
} 

//register the page, note that you could register multiple ones 
pageMod.PageMod({ 
    include: self.data.url('options.html'), 
    contentScriptFile: [ self.data.url("lib/jquery-1.11.3.min.js"), 
         self.data.url("options.js")], 
    contentScriptWhen: 'end', 
    onAttach: backgroundInit 

}); 

options.js: (esta página está también en el contexto de la escritura de contenido)

$(document).ready(function(){ 
    self.port.on("update_content_preferences", function(request){ 
    var preferences = request.preferences; 
    //update options page values using the preferences 
    }); 

    $("#save").click(function(){ 
    var preferences = null; 
    //get preferences from options page 
    self.port.emit("push_preferences", {preferences:preferences}); 
    }); 

    self.port.emit("pull_preferences", {}); //trigger the pull upon page start 
}); 

Referencia: https://developer.mozilla.org/en-US/Add-ons/SDK/High-Level_APIs/tabs