使用Firefox附加SDK進行面板定位

我正試圖在我的面板中使用新SDK安裝附加組件。使用Firefox附加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節點的示例。當我傳回的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); 
     }); 
    }

數據/ 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元素的信息，或者找到其他方法來定位面板都會很棒。

謝謝。

來源

2011-07-18 doctororange

當你定義你的widget，你可以添加一個面板屬性，它是你的面板的實例：

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

來源

2011-08-01 20:26:30 canuckistani

感謝您的回答canuckistani，但這不會幫助將Panel以編程方式打開時以可視方式錨定到窗口小部件（或DOM元素）。 – doctororange

如果您想要將一個Panel錨定到DOM元素，您需要1）獲取DOM元素的句柄，然後2）調用PanelThingy.show（DOMHandle） – canuckistani

不幸的是，根據myk的說法，「Panel.show（）期望一個真正的DOM對象作爲錨點，並且消息將它們的有效載荷序列化爲JSON，並在過程中剝離它們的對象標識。「因此，您不能將DOM對象傳遞迴主JS。相關的錯誤正在這裏討論：https：//bugzilla.mozilla.org/show_bug.cgi？id = 638142 – doctororange

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;。它會解決我做同樣的問題。

來源

2013-05-15 06:51:14

使用Firefox附加SDK進行面板定位

回答

相關問題