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

我對firefox的插件開發相當陌生。我選擇了用於將我的Chrome擴展程序移植到Firefox的addon sdk。Firefox Addon SDK：向用戶顯示選項的方法？

對於向用戶顯示選項頁面/選項面板/選項窗口，您會有什麼建議？加載一個options.html文件從我的插件目錄工作得很好（addTab（data.url（「options.html」））;），但我不能附加頁面mods到它，儘可能ai知道。因此，我無法與main.js通信以保存我的選項，對吧？

用戶還應該如何訪問它？在鉻這很容易。右鍵點擊你的圖標 - >選項，它爲你打開。有沒有辦法爲Firefox創建一個simliar行爲？

對此有何建議？

來源

2012-02-08 dvcrn

從附加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不支持內聯選項。

來源

2012-02-08 15:15:10

好吧，使用simple-prefs模塊。工作正常，謝謝你！ – dvcrn 2012-02-08 19:04:34

謝謝@Wladimir ..不錯的貼子.. – pratikabu 2012-11-06 19:59:57

終於我完成了你說的很好的實現。我肯定會發布我所做的工作示例..感謝提示.. – pratikabu 2012-11-07 13:02:31

-1

在這種情況下，您需要使用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")], 
        }); 
       } 
      });

來源

2015-12-08 16:52:19

我試過了，它沒有工作，特別是，從'options.html'中訪問'self.port'是不可能的。 – 2016-02-08 09:26:45

感謝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

來源

2016-02-08 10:06:22

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

回答

相關問題