FirefoxアドオンSDKを使用したパネルの配置

Question

私は、新しいSDKを使用してアドオンメイクの中にパネルを配置しています。

私はドキュメントは、パネルの位置を制御するだけ方法を示しており、それはあなたがそれを show()際にアンカーを渡すことであることがわかり

：

show(anchor)

Displays the panel. [ anchor : handle ]

A handle to a DOM node in a page to which the panel should appear to be anchored. If not given, the panel is centered inside the most recent browser window. Note that it is not currently possible to anchor panels in this way using only the high level APIs.

を理想的には、私はアンカーを希望そのウィジェットがクリックされたときにパネルが固定されているように見えるウィジェットですが、ウィジェットは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); 
     }); 
    } 

データ/ 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

あなたのウィジェットを定義するとき、あなたは、パネルのインスタンスであるパネルのプロパティを追加することができますが：

[ panel : Panel ]

An optional panel to open when the user clicks on the widget. Note: If you also register a "click" listener, it will be called instead of the panel being opened. However, you can show the panel from the listener by calling 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 */ } 
}); 

Answer 2

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問題を解決します。