Firefox Addon SDK：向用戶顯示選項的方法？

Question

我對使用firefox的插件開發很新。 我選擇了addon sdk來將我的chrome擴展程序移植到firefox。

您建議向用戶顯示選項頁面/選項面板/選項窗口？

從我的addon目錄加載options.html文件工作得很好（addTab（data.url（“options.html”））;），但是我知道不能將page-mod附加到它上面。 因此我無法與main.js溝通以保存我的選項，對吧？

用戶應該如何訪問它？ 在chrome中這很容易。 右鍵單擊您的圖標 - >選項，它會為您打開。 有沒有辦法為firefox創建一個simliar行為？

有什么建議嗎？

Answer 1

從Add-on 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 （ Wladimir Palant指出方向，但是我還需要花很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（）從options.html發送controll選項，例如單擊設置按鈕。 和“標簽”模塊

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