javascript - español - addeventlistener jquery

Firefox Addon SDK: ¿Formas de mostrar opciones al usuario?

Question

Soy bastante nuevo en el desarrollo de complementos con Firefox. Escogí el complemento SDK para trasladar mi extensión de Chrome a Firefox.

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

La carga de un archivo options.html desde mi directorio de complementos funciona bastante bien (addTab (data.url ("options.html"));), pero no puedo adjuntarle los modificadores de página, hasta donde sé. Por lo tanto, no puedo comunicarme con main.js para guardar mis opciones, ¿verdad?

Además, ¿cómo debe el usuario acceder a ella? En cromo esto es bastante fácil. Haz clic derecho en tu ícono -> opciones y se abrirá para ti. ¿Hay formas de crear un comportamiento similar para Firefox?

¿Alguna sugerencia sobre eso?

Answer 1

En este caso, debe 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 el módulo de "pestañas"

 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 2

Gracias a Wladimir Palant por señalar la dirección, pero aún así me tomó bastante tiempo averiguar el código final. Pongo mi resultado aquí para referencia de otros en el futuro. (He simplificado un poco el código aquí para fines de elaboración, pero la estructura principal debe ser correcta).

content.js: (haga clic en un enlace 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 también se encuentra en el contexto del script 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

Answer 3

Comenzando con el SDK 1.4 simple-prefs módulo simple-prefs . 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. El inconveniente: abrir las opciones programáticamente no es trivial, incluso para los complementos clásicos. Y el SDK no parece admitir controles complicados ( documentación de lo que es posible con las opciones en línea ), solo los más básicos.

Si desea hacer su propio rollo, probablemente desee integrar un botón de "Opciones" en un panel desplegable . También debería poder adjuntarle un script de contenido a través page-mod paquete page-mod , 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"));

Lo negativo aquí: no será posible utilizar la forma estandarizada de mostrar opciones adicionales (a través del Administrador de complementos), el SDK no admite nada más que opciones en línea.