SDK per Firefox Addon: modi per visualizzare le opzioni per l'utente?

Question

Sono abbastanza nuovo nello sviluppo di addon con firefox. Ho scelto l'addon sdk per il porting della mia estensione chrome su firefox.

Che cosa suggeriresti di visualizzare una pagina di opzioni/pannello opzioni/finestra delle opzioni per un utente?

Il caricamento di un file options.html dalla mia directory addon funziona abbastanza bene (addTab (data.url ("options.html"));), ma non posso allegare page-mods ad esso, per quanto conoscere. Quindi non posso comunicare con main.js per salvare le mie opzioni, giusto?

Inoltre, come dovrebbe accedervi l'utente? In chrome questo è abbastanza facile. Fai clic con il pulsante destro sull'icona -> Opzioni e si apre per te. Ci sono modi per creare un comportamento similare per firefox?

Qualche suggerimento?

Answer 1

A partire dall'SDK 1.4 aggiuntivo si dispone dello simple-prefs module. Genera automaticamente opzioni in linea per il componente aggiuntivo: queste vengono visualizzate direttamente nella pagina dell'estensione nella Gestione componenti aggiuntivi. Questo dovrebbe essere il modo preferito per visualizzare le opzioni. Il rovescio della medaglia: aprire le opzioni a livello di codice non è banale, anche per i componenti aggiuntivi classici. E l'SDK non sembra supportare controlli complicati (documentation of what's possible with inline options), solo quelli più basilari.

Se si desidera eseguire il rollover, probabilmente si desidera integrare un pulsante "Opzioni" in un drop-down panel. Si dovrebbe anche essere in grado di collegare uno script di contenuti ad esso tramite page-mod package, qualcosa come questo dovrebbe funzionare:

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

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

Downside qui: usando il modo standardizzato per visualizzare opzioni aggiuntive (tramite add-ons Manager) ha vinto' Sia possibile, l'SDK non supporta nulla se non le opzioni in linea.

Answer 2

In questo caso è necessario utilizzare Port.on()/Port.emit() per inviare un'opzione di controllo da options.html, come fare clic sul pulsante di impostazione. E "schede" modulo

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

Grazie Wladimir Palant per indicare la direzione, eppure ancora mi ha portato un po 'di tempo per capire il codice finale. Ho messo il mio risultato qui per riferimento ad altri in futuro. (Ho semplificato il codice un po 'qui per scopo l'elaborazione, ma la struttura principale dovrebbe essere corretto.)

content.js: (clicca un link per aprire la pagina delle opzioni)

$("#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: (questa pagina è anche al contesto di script contenuti)

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

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