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

Question

我正在尝试使用新的 SDK 将我的面板定位在附加组件中取得一些进展。

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

显示（锚点）

显示面板。 [锚：句柄]

面板应显示的页面中 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< /strong>

$('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

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

不要使用 mainPanel.show()，而是使用 view.panel = mainPanel;。它将解决问题，因为我也做了同样的事情。

Answer 2

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

[面板：面板]

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