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

Я новичок в разработке аддона с помощью firefox. Я выбрал addon sdk для переноса моего расширения chrome в firefox.

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

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

Также как пользователь должен получить к нему доступ? В хром это довольно просто. Нажмите правой кнопкой значок → параметры, и он откроется для вас. Существуют ли способы создания simliar-поведения для firefox?

Любые предложения по этому поводу?

Ответ 1

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

Если вы хотите сворачивать самостоятельно, вы, вероятно, захотите интегрировать кнопку "Параметры" в раскрывающийся список . Вы также можете подключить к нему контент script через 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 не поддерживает ничего, кроме встроенных параметров.

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

$(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

Ответ 3

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

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