Firefox有一個側欄功能，包括歷史記錄、書簽等功能都可以在側欄打開，不影響當前浏覽的網頁，如果使用快捷鍵會更加方便。既然Firefox可以有，我們自己的擴展當然也可以添加咯。
現在的需要就是增加一個側欄，側欄的內容暫時空著，可以通過工具欄按鈕或者菜單兩種方式打開，工具欄按鈕和菜單應該設計成checkbox的形式，就是要體現出側欄的打開狀態。
既然增加了側欄，當然首先要建立一個xul文件，來對應側欄顯示的內容，比如下面這個：
sidebar.xul
<?XML version="1.0"?>
<page id="test-sidebar" title="test" XMLns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" >
<label id="welcome" value="hello, i am a sidebar" />
</page>
無論我們要在側欄裡面做什麼，都只需要在page元素裡面進行擴展就可以啦。有了側欄，就要開始調用了，我們增加一個xul，這個xul最後要綁定到主界面，也就是Chrome://browser/content/browser.xul中。
overlay.xul
<?XML version="1.0"?>
<overlay id="test-overlay" XMLns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
<toolbarpalette id="BrowserToolbarPalette">
<toolbarbutton image="icon.png" observes="vIEwMySidebar" />
</toolbarpalette>
<menupopup id="vIEwSidebarMenu">
<menuitem key="myKey" observes="vIEwMySidebar" />
</menupopup>
<keyset id="mainKeyset">
<key id="myKey" command="viewMySidebar" key="w" modifIErs="control alt" />
</keyset>
<broadcasterset id="mainBroadcasterSet">
<broadcaster id="vIEwMySidebar" label="測試" autoCheck="false" type="checkbox"
group="sidebar" sidebarurl="sidebar.xul" sidebartitle="test" oncommand="toggleSidebar('vIEwMySidebar');" />
</broadcasterset>
</overlay>
這段代碼可以分為四部分：
我們先定義了一個toolbarbutton，並把這個按鈕置於id為BrowserToolbarPalette的toolbarpalette中，這個容器對應的就是“定制工具欄”那個窗口裡的內容。也就是說添加到這個容器的工具欄圖標，不會馬上顯示在界面上，需要在“定制工具欄”窗口中手動添加。
在第二部分我們定制了一個菜單項，並添加vIEwSidebarMenu中，這個菜單對應的就是“查看/側欄”。
第三部分我們定義了一個快捷鍵，並綁定到菜單項上，這樣就可以使用快捷鍵直接切換側欄的狀態。
第四部分我們定義了一個廣播器（broadcaster），和toolbarbutton和menuitem中定義的觀察器屬性（observes）配合，就可以達到同時更新這兩個元素相應屬性的目的。比如我們點擊側欄的關閉按鈕，工具欄圖標和菜單項的check狀態就會同時變成false。
通過以上幾個步驟，我們就定義了一個側欄，這個側欄可以通過三種方式切換：工具欄圖標、菜單項和快捷鍵。至於內容就要根據需要往sidebar.xul中填充了。