Javascript Firefox插件SDK：向用户显示选项的方法？

我对firefox的插件开发非常陌生。我选择了插件sdk将我的chrome扩展移植到firefox

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

从我的插件目录加载options.html文件效果很好（addTab（data.url（“options.html”））；），但据我所知，我无法将页面mods附加到它。因此我无法与main.js通信以保存我的选项，对吗

用户应该如何访问它？ 在chrome中，这相当容易。右键单击图标->选项，它将为您打开。 有没有办法为firefox创建一个类似的行为

---

有什么建议吗？

从附加SDK 1.4开始，您就有了。它将自动为您的附加组件生成内联选项-这些选项直接显示在附加组件管理器中扩展的页面上。这应该是显示选项的首选方式。缺点：以编程方式打开选项是非常重要的，即使对于经典的附加组件也是如此。SDK似乎不支持复杂的控件（），只支持最基本的控件

如果你想自己动手，你可能想把一个“选项”按钮集成到一个应用程序中。您还应该能够通过以下方式将内容脚本附加到其中：

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

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

---

缺点：使用标准化的方式显示附加选项（通过附加组件管理器）是不可能的，SDK只支持内联选项。

在这种情况下，您需要使用Port.on（）/Port.emit（）从options.html发送控件选项，如单击设置按钮。和“选项卡”模块

---

感谢瓦迪米尔·帕兰特（Wladimir Palant）为我指明了方向，但我还是花了很长时间才找到最终的代码。我把我的结果放在这里，以供将来参考。（为了精化，我在这里稍微简化了代码，但主要结构应该是正确的。）

content.js：（单击链接打开选项页）

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

参考：

---

好的，使用简单的prefs模块。很好，谢谢你！最后，我很好地实现了你所说的。我一定会发布我所做的工作的样本。。感谢您的提示。要隐藏地址栏和搜索栏，您可以使用

加载项页面

模块。缺点是它要求文件名为“index.html”，所以在他们正确使用之前，有一个用户制作的模块。特别是，无法从

options.html

访问

self.port

。

  $("#options").click(function(){
    self.port.emit("open_options", {});
  });

//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

});

$(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
});