Dodatek SDK do przeglądarki Firefox: Sposoby wyświetlania opcji dla użytkownika?

Question

Jestem całkiem nowy w rozwoju dodatków z firefox. Wybrałem dodatek do sdk do przenoszenia mojego rozszerzenia chrome do firefox.

Co zasugerowałabyś wyświetlenie użytkownikowi strony opcji/panelu opcji/opcji?

Ładowanie pliku options.html z mojego katalogu addon działa całkiem dobrze (addTab (data.url ("options.html"));), ale nie mogę do niego dołączyć modów stron, aż do ai wiedzieć. Dlatego nie mogę komunikować się z plikiem main.js, aby zapisać opcje, prawda?

Również w jaki sposób użytkownik powinien mieć do niego dostęp? W chrome jest to dość łatwe. Kliknij prawym przyciskiem myszy ikonę -> opcje i otworzy się dla Ciebie. Czy istnieją sposoby na stworzenie prostego zachowania dla Firefoxa?

Jakieś sugestie na ten temat?

Answer 1

Począwszy od dodatku SDK 1.4, masz simple-prefs module. Automatycznie wygeneruje opcje liniowe dla Twojego dodatku - są one wyświetlane bezpośrednio na stronie rozszerzenia w Menedżerze dodatków. To powinien być preferowany sposób wyświetlania opcji. Wadą: otwarcie opcji programowo nie jest banalne, nawet w przypadku klasycznych dodatków. I SDK nie wydaje się obsługiwać skomplikowanych kontroli (documentation of what's possible with inline options), tylko te najbardziej podstawowe.

Jeśli chcesz rzucić własną, prawdopodobnie chcesz zintegrować przycisk "Opcje" z drop-down panel. Należy również być w stanie dołączyć skrypt do niej treści poprzez page-mod package, coś jak to powinno działać:

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

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

minusem tutaj: za pomocą ujednoliconego sposobu wyświetlania dodatek opcji (przez menedżera dodatków) wygrał” Jest to możliwe, SDK nie obsługuje niczego oprócz opcji wbudowanych.

Answer 2

W tym przypadku należy użyć Port.on()/Port.emit(), aby wysłać opcję controll z options.html, np. Kliknij przycisk ustawienia. I „wypustki” moduł

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

Dzięki Wladimir Palant za wskazanie kierunku, ale nadal zajęło mi trochę czasu, aby dowiedzieć się ostateczny kod. Osiągnąłem tutaj swój wynik, by móc w przyszłości nawiązać kontakt z innymi. (I uproszczony kod trochę tutaj dla celów opracowywania, ale podstawowa struktura powinna być prawidłowa.)

content.js: (Kliknij link, aby otworzyć stronę Opcje)

$("#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: (ta strona jest również od kontekstu skryptu zawartość)

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

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