Как создать Firebug-подобное нижнее окно Расширение Firefox

Question

Несколько расширений предлагают «нижнее окно» для просмотра их содержимого. Firebug и ScribeFire являются хорошими примерами, где основное содержание отображается в нижней части браузера. Это похоже на функциональность боковой панели браузера.

Есть ли лучший способ/метод создания нижнего окна в расширении, так как нет боковой панели для нижней части браузера?

Answer 1

Вы должны создать свой пользовательский интерфейс расширения с помощью наложения. В оверлее вы указываете точку вставки вашего пользовательского интерфейса в отношении главной страницы браузера browser.xul.

Извлеченный из главных страниц в 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 для определения как наложение совпадает с наложенной страницей. Если вы посмотрите на browserOverlay.xul, вы также увидите другие точки вставки для commandset, statusbar и т. Д.

Для получения дополнительной информации обратитесь к Mozilla Developer Center.