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

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

17 голосов
/ 08 февраля 2012

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

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

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

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

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

Ответы [ 3 ]

25 голосов
/ 08 февраля 2012

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

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

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

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

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

1 голос
/ 08 февраля 2016

Спасибо 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

0 голосов
/ 08 декабря 2015

В этом случае вам необходимо использовать 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")],
                    });
                }
            });
...