Creating sidebar

This page is part of the extension development documentation project.

Ask your questions in MozillaZine Forums. Also try browsing example code.

Note: development documentation is in process of being moved to Mozilla Development Center (MDC).

This is how to add a sidebar (and a menu item to open it) using JavaScript and XUL. The first file is the XUL file:

<broadcasterset id="mainBroadcasterSet">
	<broadcaster id="nameofSidebar"
		autoCheck="false"
		label="label"
		type="checkbox" 
		group="sidebar"
		sidebarurl=""
		sidebartitle="title"
		oncommand="openSidebar();"/>
</broadcasterset>
<popup id="contentAreaContextMenu">
	<menuitem id="openSideBar"
               label="Open Sidebar"
               accesskey=""
               oncommand="openSidebar();"/>
</popup>

Here is the js file:

function openSidebar(){
	var url="The url, chrome or http";
	var sidebar = document.getElementById('nameofSidebar')
	sidebar.setAttribute('sidebarurl',url);
	toggleSidebar('nameofSidebar');
}

Thanks to mozedit for this code

---

If you do not need to preprocess the way your sidebar is opened here is an alternative method:

To add a sidebar requires two basic steps in your XUL overlay file. First add a broadcaster to the "mainBroadcasterSet":

<broadcasterset id="mainBroadcasterSet">
  <broadcaster id="nameofSidebar"
               autoCheck="false"
               label="label"
               type="checkbox" 
               group="sidebar"
               sidebarurl="chrome://extname/content/nameofsidebar.xul"
               sidebartitle="titleofSidebar"
               oncommand="toggleSidebar('nameofSidebar');"/>
 </broadcasterset>

Secondly add an item to the View->Sidebar menu:

<menupopup id="viewSidebarMenu">
  <menuitem key="nameofSidebarKey"
            accesskey="&NameofSidebar.accesskey;"
            observes="nameofSidebar"/>
</menupopup>

Optionally add a hotkey to invoke your sidebar:

 <keyset id="mainKeyset">
   <key id="keyopenNameofSidebar"
        key="&NameofSidebar.commandkey;"
        command="nameofSidebar"
        modifiers="accel" />
 </keyset>

And you are done. Adding an item to the context menu is also optional and depends on your needs and requirements.