Firefox Addon SDK: способы отображения параметров для пользователя?

Question

Я совершенно новичок в разработке аддонов с помощью Firefox. Я выбрал аддон SDK для переноса моего расширения Chrome на Firefox.

Что бы вы предложили для отображения страницы параметров / панели параметров / окна параметров для пользователя?

Загрузка файла options.html из моего каталога аддонов работает довольно хорошо (addTab(data.url("options.html"));), но я не могу прикрепить к нему мод-страницы, насколько я знаю. Поэтому я не могу общаться с main.js, чтобы сохранить мои настройки, верно?

Кроме того, как пользователь должен получить к нему доступ? В хроме это довольно просто. Щелкните правой кнопкой мыши значок -> параметры, и он откроется для вас. Есть ли способы создать симлиарное поведение для Firefox?

Есть предложения по этому поводу?

Answer 1

Начиная с дополнения SDK 1.4 у вас есть simple-prefs модуль. Он автоматически сгенерирует встроенные параметры для вашего дополнения - они отображаются прямо на странице вашего расширения в менеджере дополнений. Это должно быть предпочтительным способом отображения параметров. Недостаток: открывать опции программно нетривиально, даже для классических дополнений. И SDK, кажется, не поддерживает сложные элементы управления ( документирование того, что возможно с помощью встроенных опций), только самые простые.

Если вы хотите свернуть свои собственные, вы, вероятно, захотите встроить кнопку "Опции" в раскрывающуюся панель. Вы также должны иметь возможность прикрепить к нему скрипт контента через page-mod пакет, что-то вроде этого должно работать:

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

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

Недостаток: использование стандартного способа отображения параметров надстроек (с помощью диспетчера надстроек) будет невозможно, SDK не поддерживает ничего, кроме встроенных параметров.

Answer 2

Спасибо Wladimir Palant для указания направления, но мне все еще потребовалось много времени, чтобы выяснить окончательный код. Я положил свой результат здесь для ссылки других в будущем. (Я немного упростил код здесь для целей разработки, но основная структура должна быть правильной.)

content.js: (нажмите на ссылку, чтобы открыть страницу параметров)

  $("#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: (эта страница также находится в контексте скрипта контента)

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

Ссылка: https://developer.mozilla.org/en-US/Add-ons/SDK/High-Level_APIs/tabs

Answer 3

В этом случае вам нужно использовать Port.on()/Port.emit(), чтобы отправить опцию controll из options.html, например, нажав на кнопку настройки. И модуль "вкладки"

 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")],
                    });
                }
            });