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

Question

我正在尝试使用新SDK将我的面板定位在附加组件中.

我看到文档只显示了一种控制面板位置的方法,那就是通过传递一个锚点show():

秀(锚)

显示面板.[锚:手柄]

页面中DOM节点的句柄,面板应该显示为锚定的页面.如果没有给出,面板将在最近的浏览器窗口中居中.请注意,目前无法仅使用高级API以这种方式锚定面板.

理想情况下,我希望锚点是当单击该窗口小部件时面板显示为锚定的窗口小部件,但窗口小部件不是,DOM node in a page所以我猜不是......

我可以解决这个问题,但我甚至找不到如何将面板锚定到DOM节点的工作示例.当我传回一个DOM节点在contentScript经过port是这样的:

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

数据/ 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元素的信息,或者找到一些其他方法来定位面板都会很棒.

谢谢.

Answer 1

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

[面板：面板]

当用户单击小部件时打开的可选面板。注意：如果您还注册了“单击”侦听器，则会调用它将而不是打开面板。但是，您可以通过调用 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 */ }
});