使用Firefox Add-on SDK进行面板定位

Question

我正在尝试在使用新的SDK创建的Add-on中定位我的面板。

我发现文档只显示了一种控制面板位置的方法，就是在show()时传递一个锚点：

show(anchor)

显示面板。[ anchor : handle ]

应将面板定位到页面上的DOM节点的句柄。如果未提供，则面板居中于最近的浏览器窗口内。请注意，目前无法仅使用高级API来以这种方式将面板锚定。

理想情况下，当单击小部件时，我希望将其固定为面板出现的小部件，但是小部件不是“页面上的DOM节点”，所以我猜不行......

我可能可以解决此问题，但我甚至找不到如何将面板固定到DOM节点的有效示例。当我通过port像这样在contentScript中返回DOM节点：

lib/main.js

  var scraper = pageMod.PageMod({
    include: ['*'],
    contentScriptWhen: 'ready',
    contentScriptFile: [data.url('jquery-1.6.2.min.js'), data.url('scraper.js')],
    onAttach: function(worker){
      worker.port.on('pageLoaded', function(page){
        widget.panel.show(page.anchor);
      }); 
    } 

data/scraper.js

$('body').append('
  <div id="anchor-to-me" style="position:fixed; bottom: 0; right: 0;">.</div>
');

var anchor = $('#anchor-to-me').get();
self.port.emit('pageLoaded', { anchor : anchor  }); 

我遇到了以下控制台错误：

error: An exception occurred.
Traceback (most recent call last):
  File "resource://jid1-wuvxefqtmptsnw-at-jetpack-addon-kit-lib/panel.js", line 147, in show
    let document = getWindow(anchor).document;
  File "resource://jid1-wuvxefqtmptsnw-at-jetpack-addon-kit-lib/panel.js", line 345, in getWindow
    let anchorWindow = anchor.ownerDocument.defaultView.top;
TypeError: anchor.ownerDocument is undefined

任何有助于我成功锚定到DOM元素或找到其他位置面板的方法都会很好。谢谢。

- doctororange

Answer 1

const panel = require("panel").Panel({
  width: 240,
  height: 320,
  contentURL: data.url("foo.html"),
  contentScriptFile: [data.url("jquery-1.4.4.min.js"),
                      data.url("panel.js")]
});

const widget = widgets.Widget({
  id: "some-id",
  label: "Some label",
  contentURL: data.url("icon.png"),
  //panel: panel,
  onClick: function(view) { /* cool stuff */ 
     view.panel = panel;
  }
});

使用 view.panel = mainPanel; 而不是使用 mainPanel.show()。这样可以解决问题，因为我也是这样做的。

- Pankaj Kharka

Answer 2

当您定义小部件时，可以添加一个面板属性，该属性是您面板的实例：

[ panel : Panel ]

可选面板，用户单击小部件时打开。注意：如果您还注册了“click”侦听器，则会调用该侦听器而不是打开面板。但是，您可以通过调用this.panel.show()从侦听器中显示面板。

以下是示例（不幸的是文档中没有此示例）：

const panel = require("panel").Panel({
  width: 240,
  height: 320,
  contentURL: data.url("foo.html"),
  contentScriptFile: [data.url("jquery-1.4.4.min.js"),
                      data.url("panel.js")]
});

const widget = widgets.Widget({
  id: "some-id",
  label: "Some label",
  contentURL: data.url("icon.png"),
  panel: panel,
  onClick: function() { /* cool stuff */ }
});

- therealjeffg

---

谢谢你的回答，canuckistani。但是这并没有帮助将面板在以编程方式打开时视觉上锚定到小部件（或DOM元素）。 - doctororange

如果您想将面板锚定到DOM元素上，您需要执行以下两个步骤：1）获取DOM元素的句柄，然后2）调用PanelThingy.show(DOMHandle)。 - therealjeffg

不幸的是，根据myk的说法，“Panel.show()期望一个真正的DOM对象作为锚点，而消息将它们的有效负载序列化为JSON，在此过程中剥离了它们的对象标识。”因此，您无法将DOM对象传回主JS。这里正在讨论一个相关的错误：https://bugzilla.mozilla.org/show_bug.cgi?id=638142 - doctororange

一个真正实现这个的例子：https://builder.addons.mozilla.org/addon/1013359/revision/33/ ...不幸的是，它依赖于xpcom，将来可能会出现问题。 - therealjeffg