Firefox Addon SDK：向用户显示选项的方式？

Question

我对使用 Firefox 进行插件开发还很陌生。我选择了 addon sdk 将我的 chrome 扩展移植到 Firefox。

您建议如何向用户显示选项页面/选项面板/选项窗口？

从我的插件目录加载 options.html 文件工作得很好（addTab（data.url（“options.html”））;），但据我所知，我无法将页面修改附加到它。因此我无法与 main.js 通信来保存我的选项，对吗？

另外用户应该如何访问它？ 在 Chrome 中这很容易。右键单击您的图标 ->选项将为您打开。 有没有办法为 Firefox 创建类似的行为？

对此有何建议？

Answer 1

从附加 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不支持支持除内联选项之外的任何内容。

Answer 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：（此页面也位于内容脚本上下文）

$(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 发送控制选项，例如单击设置按钮。和“选项卡”模块

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