Question

我对使用firefox的插件开发很新。我选择了addon sdk来将我的chrome扩展程序移植到firefox。

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

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

用户应如何访问它？在chrome中这很容易。右键单击您的图标 - ＆gt;选项，它为您打开。有没有办法为firefox创建一个simliar行为？

有关于此的任何建议吗？

Answer 1

从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不支持任何内联选项。

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

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

3 个答案: