2012-02-08 3 views
17

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

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

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

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

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

ответ

25

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

Если вы хотите свернуть самостоятельно, вы, вероятно, захотите интегрировать кнопку «Параметры» в drop-down panel. Вы также должны иметь возможность прикрепить скрипт контента к нему через 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 не поддерживает ничего, кроме встроенных опций.

+0

Хорошо, используется модуль простых префов. Отлично работает, спасибо за это! – dvcrn

+0

спасибо @Wladimir .. хороший пост .. – pratikabu

+0

наконец я завершил хорошую реализацию того, что вы сказали. Я обязательно опубликую рабочий пример того, что я сделал .. спасибо за подсказки. – pratikabu

-1

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

Я пробовал, и это не сработало. В частности, невозможно получить доступ к 'self.port' из' options.html'. –

1

Благодаря 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

Смежные вопросы