8

新しい SDK を使用して、アドオン メイクでパネルを配置するための前進を試みています。

ドキュメントには、パネルの位置を制御する方法が1 つだけ示されていることがわかります。それは、次の場合にアンカーを渡すshow()ことです。

ショー（アンカー）

パネルを表示します。【アンカー：ハンドル】

パネルが固定されているように見えるページ内の DOM ノードへのハンドル。指定しない場合、パネルは最新のブラウザ ウィンドウの中央に配置されます。現在、高レベル API のみを使用してこの方法でパネルを固定することはできないことに注意してください。

理想的には、ウィジェットがクリックされたときにパネルが固定されているように見えるウィジェットをアンカーにしたいのですが、ウィジェットではないDOM node in a pageので、そうではないと思います...

おそらくこれを回避できますが、パネルをDOMノードに固定する方法の実例さえ見つけることができません。contentScript次のようにスルーで DOM ノードを返すと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);
      }); 
    }

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要素にうまく固定するのに役立つ情報、またはパネルを配置する他の方法を見つけるのに役立つ情報は素晴らしいでしょう.

ありがとう。

4

2 に答える 2

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

于 2013-05-15T06:51:14.700 に答える
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 */ }
});
于 2011-08-01T20:26:30.213 に答える