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

Question

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

我看到文档只显示了一种方法来控制面板的位置，那就是当你show()它时传递一个锚：

显示（锚）

显示面板。 [锚：句柄]

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

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

我可能可以解决这个问题，但我什至找不到如何将面板锚定到 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 元素或找到其他方式来定位面板的信息都会很棒。

谢谢。

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