6
若干擴展功能提供了查看其內容的「底部窗口」。 Firebug和ScribeFire是主要內容出現在瀏覽器底部的好例子。這看起來與瀏覽器中的側邊欄功能非常相似。如何創建類似Firebug的底部窗口Firefox擴展
是否有最佳做法/方法在擴展中創建底部窗口,因爲瀏覽器沒有「底部邊欄」?
若干擴展功能提供了查看其內容的「底部窗口」。 Firebug和ScribeFire是主要內容出現在瀏覽器底部的好例子。這看起來與瀏覽器中的側邊欄功能非常相似。如何創建類似Firebug的底部窗口Firefox擴展
是否有最佳做法/方法在擴展中創建底部窗口,因爲瀏覽器沒有「底部邊欄」?
您將使用覆蓋來創建您的擴展UI。在疊加層中,您指定了與主瀏覽器頁面browser.xul相關的UI插入點。
從Firefox的主網頁摘錄browser.xul我們
<vbox id="appcontent" flex="1">
<tabbrowser id="content" disablehistory="true"
flex="1" contenttooltip="aHTMLTooltip"
contentcontextmenu="contentAreaContextMenu"
onnewtab="BrowserOpenTab();"
autocompletepopup="PopupAutoComplete"
ondragdrop="nsDragAndDrop.drop(event, contentAreaDNDObserver);"
onclick="return contentAreaClick(event, false);"
/>
</vbox>
,並從以前的版本的Firebug的摘錄文件browserOverlay.xul我們
<vbox id="appcontent">
<splitter id="fbContentSplitter" collapsed="true"/>
<vbox id="fbContentBox" collapsed="true" persist="height">
<toolbox id="fbToolbox">
<toolbar id="fbToolbar">
<toolbarbutton id="fbFirebugMenu" type="menu">
<menupopup onpopupshowing="return FirebugChrome.onOptionsShowing(this);">
<menuitem label="&firebug.DisableFirebug;" type="checkbox"
oncommand="FirebugChrome.onToggleOption(this)" option="disabledAlways"/>
<menuitem type="checkbox"
oncommand="FirebugChrome.onToggleOption(this)" option="disabledForSite"/>
<menuitem label="&firebug.AllowedSites;" command="cmd_openFirebugPermissions"/>
<menuseparator/>
<menu label="&firebug.TextSize;">
<menupopup>
<menuitem label="&firebug.IncreaseTextSize;"
oncommand="Firebug.increaseTextSize(1)"/>
<menuitem label="&firebug.DecreaseTextSize;"
oncommand="Firebug.increaseTextSize(-1)"/>
<menuitem label="&firebug.NormalTextSize;" oncommand="Firebug.setTextSize(0)"/>
</menupopup>
</menu>
<menu label="&firebug.Options;">
<menupopup onpopupshowing="return FirebugChrome.onOptionsShowing(this);">
<menuitem type="checkbox" label="&firebug.AlwaysOpenInWindow;"
oncommand="FirebugChrome.onToggleOption(this)"
option="openInWindow"/>
<menuitem type="checkbox" label="&firebug.ShowTooltips;"
oncommand="FirebugChrome.onToggleOption(this)"
option="showInfoTips"/>
<menuitem type="checkbox" label="&firebug.ShadeBoxModel;"
oncommand="FirebugChrome.onToggleOption(this)"
option="shadeBoxModel"/>
</menupopup>
</menu>
<menuseparator/>
<menuitem label="&firebug.Website;" oncommand="Firebug.visitWebsite('main')"/>
<menuitem label="&firebug.Documentation;" oncommand="Firebug.visitWebsite('docs')"/>
<menuitem label="&firebug.Forums;" oncommand="Firebug.visitWebsite('discuss')"/>
<menuseparator/>
<menuitem label="&firebug.Donate;" oncommand="Firebug.visitWebsite('donate')"/>
</menupopup>
</toolbarbutton>
<toolbarbutton id="fbDetachButton" class="toolbarbutton-iconic"
tooltiptext="&firebug.DetachFirebug;" command="cmd_detachFirebug"/>
<toolbarbutton id="fbCloseButton" class="toolbarbutton-iconic"
tooltiptext="&firebug.CloseFirebug;" command="cmd_toggleFirebug"/>
</toolbar>
</toolbox>
<hbox id="fbPanelBox" flex="1"/>
<hbox id="fbCommandBox"/>
</vbox>
</vbox>
注意,XUL標記開始的兩個塊與
<vbox id="appcontent".../>
這是Gecko引擎用來測定ne如何將疊加層與頁面疊加在一起。如果您查看browserOverlay.xul,您還會看到commandset, statusbar
等的其他插入點。
有關更多信息,請參閱Mozilla Developer Center。