Question

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

我看到文档只显示一种方式来控制面板的位置，即通过show()时传递一个锚点：

显示（锚）

显示面板。 [锚：手柄]

面板应显示的页面中DOM节点的句柄   被锚定。如果没有给出，面板最内部居中   最近的浏览器窗口请注意，目前无法进行此操作   以这种方式使用高级API锚定面板。

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

我可以解决这个问题，但我甚至找不到一个如何将面板锚定到DOM节点的工作示例。当我通过contentScript通过port传回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);
      }); 
    }

数据/ 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;。它会解决问题bcz我做了同样的事情。

Answer 2

定义窗口小部件时，可以添加面板属性的面板属性：

[panel：Panel]

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

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

2 个答案: