Creating a Firefox sidebar

  • Revision slug: Creating_a_Firefox_sidebar
  • Revision title: Creating a Firefox sidebar
  • Revision id: 94307
  • Created:
  • Creator: Andreas Wuest
  • Is current revision? No
  • Comment /* Introduction */ Fixed typo

Revision Content

This article describes how to create a registered sidebar for the Firefox browser.

Introduction

This article is a quick start for the creation of a new sidebar for Firefox. What we will do is create a sidebar and register it so it will be available in the menu. The goal is creating an empty sidebar that can be used as start for new sidebar applications.

Creating a sidebar requires some GUI creation and registration in the destination application. First a simple XUL page is created. Then the registration files are made and finally the sidebar is packed into an installable XPI file.

Pre-requisites

This article is a quick start, it won't explain all elements of XUL, packaging and XPI's. It's preferable you have some basic knowledge of how XUL works and how Firefox handles extensions.

Packages

Additions to Firefox are installed with packages. A packages exists of the XUL and application logics. Optionally locales and skins can be included. Most additions are provided with a default tree structure, although not required it is recommended to use this structure. Here the package for the sidebar is created, the files included are listed below.

Example 1. Package structure

emptysidebar
\- chrome
   |- content
   |- locale
   | \- en-US 
   \- skin

Create all folders, except for <tt>skin</tt>. It is not used for this tutorial.

The <tt>locale</tt> holds the locale, only the en-US locale is created. It is listed in Example 2. The locale includes the name and shortcut keys for the sidebar.

Example 2. chrome/locale/en-US/emptysidebar.dtd

<!ENTITY emptysidebar.title "EmptySidebar">
<!ENTITY openEmptySidebar.commandkey "E">
<!ENTITY openEmptySidebar.modifierskey "shift accel">

The content folder includes our sidebar, the <tt>emptysidebar.xul</tt> is printed in Example 3. It creates a page holding one label. Other elements can be included, please read the XUL tutorials for more information.

Example 3. chrome/content/emptysidebar.xul

<?xml version="1.0"?>
<?xml-stylesheet href="chrome://global/skin/" type"text/css" ?>
<?xml-stylesheet href="chrome://browser/skin/browser.css" type="text/css" ?>
<!DOCTYPE page SYSTEM "chrome://emptysidebar/locale/emptysidebar.dtd">

<page id="sbEmptySidebar" title="&emptysidebar.title;"
         xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" >
  <vbox flex="1">
    <label id="atest" value="&emptysidebar.title;" />
  </vbox>
</page>

New extensions can be registered in the menus or popups, Firefox uses an overlays for extending menus. This is an separate XUL file that specifies the location of menu items. The sidebar here is added to the View | Sidebar menu. The overlay file is listed in Example 4.

Example 4. chrome/contents/emptysidebar-overlay.xul

<?xml version="1.0"?>

<!DOCTYPE overlay SYSTEM "chrome://emptysidebar/locale/emptysidebar.dtd">
<overlay id="emptySidebarOverlay"
         xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
  
  <menupopup id="viewSidebarMenu">
    <menuitem key="key_openEmptySidebar" observes="viewEmptySidebar"  />
  </menupopup>
  
  <keyset id="mainKeyset">
    <key id="key_openEmptySidebar" command="viewEmptySidebar"
         key="&openEmptySidebar.commandkey;" 
         modifiers="&openEmptySidebar.modifierskey;" />
  </keyset>
  
  <broadcasterset id="mainBroadcasterSet"> 
    <broadcaster id="viewEmptySidebar" 
                 label="&emptysidebar.title;"
                 autoCheck="false"
                 type="checkbox"
                 group="sidebar"
                 sidebarurl="chrome://emptysidebar/content/emptysidebar.xul"
                 sidebartitle="&emptysidebar.title;"
                 oncommand="toggleSidebar('viewEmptySidebar');" />
  </broadcasterset>
</overlay>

The overlay file consists of three entries, the menu definition, shortcut keys and the event handler for UI elements. The broadcaster is linked to an UI element with the observes attribute. The broadcaster viewEmptySidebar defines how a click on the menu is handled or the shortcut keys are pressed.

Finally, the contents file are created. We create a <tt>contents.rdf</tt> for the folders <tt>content</code> and <tt>locale/en-US</tt> folder. The files are listed in Example 5 and Example 6.

Example 5. chrome/content/contents.rdf

<?xml version="1.0"?>

<RDF:RDF xmlns:RDF="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
	xmlns:chrome="http://www.mozilla.org/rdf/chrome#">

	<!-- list all packages -->
	<RDF:Seq about="urn:mozilla:package:root">
		<RDF:li resource="urn:mozilla:package:emptysidebar"/>
	</RDF:Seq>

	<!-- package information -->
	<RDF:Description about="urn:mozilla:package:emptysidebar"
		chrome:displayName="emptysidebar"
		chrome:author="www.occidopagus.nl"
		chrome:authorURL="http://www.occidopagus.nl"
		chrome:name="emptysidebar"
		chrome:extension="true"
		chrome:description="An example project"
		>
	</RDF:Description>

	<!-- Overlay information -->
	<RDF:Seq about="urn:mozilla:overlays">
		<RDF:li resource="chrome://browser/content/browser.xul" />
	</RDF:Seq>

	<RDF:Seq about="chrome://browser/content/browser.xul">
		<RDF:li>chrome://emptysidebar/content/emptysidebar-overlay.xul</RDF:li>
	</RDF:Seq>

</RDF:RDF>

Example 6. chrome/locale/en-US/contents.rdf

<?xml version="1.0"?>

<RDF:RDF xmlns:RDF="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
	xmlns:chrome="http://www.mozilla.org/rdf/chrome#">

	<RDF:Seq about="urn:mozilla:locale:root">
		<RDF:li resource="urn:mozilla:locale:en-US" />
	</RDF:Seq>

	<RDF:Description about="urn:mozilla:locale:en-US">
		<chrome:packages>
			<RDF:Seq about="urn:mozilla:locale:en-US:packages">
				<RDF:li resource="urn:mozilla:locale:en-US:emptysidebar" />
			</RDF:Seq>
		</chrome:packages>
	</RDF:Description>

</RDF:RDF>

Now that all files have been created the extension can be installed in Firefox. All installed packages are listed in the <tt>chrome.rdf</tt> but this file should not be changed manually. For developers the easiest way is using the <tt>installed-chrome.txt</tt> file for registration. When Firefox is started it reads this file to find out which packages are installed, if new packages are found they are added to the <tt>chrome.rdf</tt> file.

The <tt>installed-chrome.txt</tt> can be found in the Firefox <tt>chrome</tt> folder. Copy the <tt>emptysidebar</tt> folder to this folder and add the lines listed in Example 7 to <tt>installed-chrome.txt</tt>.

Example 7. installed-chrome.txt

content,install,url,resource:/chrome/emptysidebar/content/
locale,install,url,resource:/chrome/emptysidebar/locale/en-US/

Restart Firefox and the sidebar is included in the menu.

Image:EmptySidebar-menu.png
The firefox sidebar menu

Deployment

Now that we have a sidebar it is time to make it availible to the world. Installation requires the creation of an XPI file which is identified as extension in Firefox. The XPI is a ZIP file containing the content and locale files, an install script named <tt>install.js</tt> and a manifest called <tt>install.rdf</tt>.

Example 8. chrome/install.js

const APP_NAME			= "emptySidebar";
const CHROME_NAME		= "emptysidebar";
const APP_VERSION   		= "1.0";
const APP_FILE          	= "emptysidebar.jar";
const APP_CONTENT_PATH		= "content/";

initInstall(APP_NAME, APP_CHROME_NAME, APP_VERSION);

var chromeFolder = getFolder("Current User", "chrome");
setPackageFilder(chromFolder);
addFile(APP_NAME, "chrome/" + APP_FILE, chromeFolder, "");

var jarFoder = getFolder(chromeFolder, APP_FILE);
registerChrome(CONTENT | PROFILE_CHROME, jarFolder, APP_CONTENT_PATH);

var result = getLastError();
if (result == SUCCESS) {
	performInstall();
} else {
	cancelInstall(result);
}

Example 9. emptysidebar/install.rdf

<?xml version="1.0"?>

<!-- install.rdf template copied from http://kb.mozillazine.org/Install.rdf -->

<RDF xmlns="http://www.w3.org/1999/02/22-rdf-syntax-ns#" 
     xmlns:em="http://www.mozilla.org/2004/em-rdf#">

	<Description about="urn:mozilla:install-manifest">
	
		<em:id>{3B1B83AA-D06E-11D9-AF35-000D932E38A8}</em:id>
		<em:name>EmptySidebar Extension</em:name>
		<em:version>1.0</em:version>
		<em:description>Example extension for creation and registration of a sidebar.</em:description>
		<em:creator>J.C. Wesdorp</em:creator>
		<!-- optional items -->
		<em:homepageURL>http://occidopagus.nl/firefox/emptysidebar/</em:homepageURL>

                <!-- Firefox -->
		<em:targetApplication>
			<Description>
				<em:id>{ec8030f7-c20a-464f-9b0e-13a3a9e97384}</em:id>
				<em:minVersion>0.9</em:minVersion>
				<em:maxVersion>1.0</em:maxVersion>
			</Description>
		</em:targetApplication>

                <!-- This is not needed for Firefox 1.1 and later. Only include this 
                     if you want to make your extension compatible with older versions -->
		<em:file>
			<Description about="urn:mozilla:extension:file:emptysidebar.jar">
				<em:package>content/</em:package>
				<!-- optional items -->
				<em:locale>locale/en-US/</em:locale>
			</Description>
		</em:file>
	</Description>

</RDF>

Each extension is identified by a GUID code. A GUID has to be created for each extension. Tools for GUID creation are GuidGen from Microsoft or uuidgen on Unix systems.

The content and locale files are packed into <tt>emptysidebar.jar</tt>, create this file in the <tt>chrome</tt> folder. On unix systems:

~/src/emptysidebar$ cd chrome
~/src/emptysidebar/chrome$ zip -r emptysidebar.jar content/ locale/

Finally, create the XPI file. This is a ZIP file containing the JAR file and the install scripts.

~/src/emptysidebar/chrome$ cd ..
~/src/emptysidebar$ zip emptysidebar.xpi install.* chrome/emptysidebar.jar

Open Firefox and browse to the folder containing <tt>emptysidebar.xpi</tt>. Click on the file and the Extension installation window pops up. After a restart of Firefox the sidebar is installed. Or click here for the XPI.

Image:EmptySidebar-extension.png
The EmptySidebar extension

Resources

Original Document Information

  • Author: J.C. Wesdorp <jcwesdorp . at . occidopagus.nl> - May 30, 2005.
  • Permission granted to migrate in Jan 2006, including permission to relicense under the CC:By-SA.
  • Original Source: http://occidopagus.nl/firefox/emptysidebar/

Revision Source

<p>
</p><p>This article describes how to create a registered sidebar for the Firefox browser.
</p>
<h2 name="Introduction"> Introduction </h2>
<p>This article is a quick start for the creation of a new sidebar for Firefox. What we will do is create a sidebar and register it so it will be available in the menu. The goal is creating an empty sidebar that can be used as start for new sidebar applications.
</p><p>Creating a sidebar requires some GUI creation and registration in the destination application. First a simple XUL page is created. Then the registration files are made and finally the sidebar is packed into an installable XPI file.
</p>
<h2 name="Pre-requisites"> Pre-requisites </h2>
<p>This article is a quick start, it won't explain all elements of XUL, packaging and XPI's. It's preferable you have some basic knowledge of how XUL works and how Firefox handles extensions.
</p>
<h2 name="Packages"> Packages </h2>
<p>Additions to Firefox are installed with packages. A packages exists of the XUL and application logics. Optionally locales and skins can be included. Most additions are provided with a default tree structure, although not required it is recommended to use this structure. Here the package for the sidebar is created, the files included are listed
below.
</p>
<div class="example" id="package_structure">
<p><b>Example 1. Package structure</b>
</p>
<pre>emptysidebar
\- chrome
   |- content
   |- locale
   | \- en-US 
   \- skin
</pre>
</div>
<p>Create all folders, except for <tt>skin</tt>. It is not used for this tutorial.
</p><p>The <tt>locale</tt> holds the locale, only the en-US locale is created. It is listed in <a href="#en-us_emptysidebar.dtd">Example 2</a>. The locale includes the name and shortcut keys for the sidebar.
</p>
<div class="example" id="en-us_emptysidebar.dtd">
<p><b>Example 2. chrome/locale/en-US/emptysidebar.dtd</b>
</p>
<pre class="eval">&lt;!ENTITY emptysidebar.title "EmptySidebar"&gt;
&lt;!ENTITY openEmptySidebar.commandkey "E"&gt;
&lt;!ENTITY openEmptySidebar.modifierskey "shift accel"&gt;
</pre>
<p>The content folder includes our sidebar, the <tt>emptysidebar.xul</tt> is printed in <a href="#emptysidebar_xul">Example 3</a>. It
creates a <a class="external" href="http://books.mozdev.org/html/appc-77238.html">page</a> holding one label. Other elements can be included, please read the XUL tutorials for more information.
</p>
<div class="example" id="emptysidebar_xul">
<p><b>Example 3. chrome/content/emptysidebar.xul</b>
</p>
<pre>&lt;?xml version="1.0"?&gt;
&lt;?xml-stylesheet href="chrome://global/skin/" type"text/css" ?&gt;
&lt;?xml-stylesheet href="chrome://browser/skin/browser.css" type="text/css" ?&gt;
&lt;!DOCTYPE page SYSTEM "chrome://emptysidebar/locale/emptysidebar.dtd"&gt;

&lt;page id="sbEmptySidebar" title="&amp;emptysidebar.title;"
         xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" &gt;
  &lt;vbox flex="1"&gt;
    &lt;label id="atest" value="&amp;emptysidebar.title;" /&gt;
  &lt;/vbox&gt;
&lt;/page&gt;
</pre>
</div>
<p>New extensions can be registered in the menus or popups, Firefox uses an overlays for extending menus. This is an separate XUL file that specifies the location of menu items. The sidebar here is added to the View | Sidebar menu. The overlay file is listed in <a href="#overlay_xul">Example 4</a>.
</p>
<div class="example" id="overlay_xul">
<p><b>Example 4. chrome/contents/emptysidebar-overlay.xul</b>
</p>
<pre>&lt;?xml version="1.0"?&gt;

&lt;!DOCTYPE overlay SYSTEM "chrome://emptysidebar/locale/emptysidebar.dtd"&gt;
&lt;overlay id="emptySidebarOverlay"
         xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"&gt;
  
  &lt;menupopup id="viewSidebarMenu"&gt;
    &lt;menuitem key="key_openEmptySidebar" observes="viewEmptySidebar"  /&gt;
  &lt;/menupopup&gt;
  
  &lt;keyset id="mainKeyset"&gt;
    &lt;key id="key_openEmptySidebar" command="viewEmptySidebar"
         key="&amp;openEmptySidebar.commandkey;" 
         modifiers="&amp;openEmptySidebar.modifierskey;" /&gt;
  &lt;/keyset&gt;
  
  &lt;broadcasterset id="mainBroadcasterSet"&gt; 
    &lt;broadcaster id="viewEmptySidebar" 
                 label="&amp;emptysidebar.title;"
                 autoCheck="false"
                 type="checkbox"
                 group="sidebar"
                 sidebarurl="chrome://emptysidebar/content/emptysidebar.xul"
                 sidebartitle="&amp;emptysidebar.title;"
                 oncommand="toggleSidebar('viewEmptySidebar');" /&gt;
  &lt;/broadcasterset&gt;
&lt;/overlay&gt;
</pre>
</div>
<p>The overlay file consists of three entries, the menu definition, shortcut keys and the event handler for UI elements. The broadcaster is linked to an UI element with the <code>observes</code> attribute. The broadcaster <code>viewEmptySidebar</code> defines how a click on the menu is handled or the shortcut keys are pressed.
</p><p>Finally, the contents file are created. We create a <tt>contents.rdf</tt> for the folders <tt>content&lt;/code&gt; and &lt;tt&gt;locale/en-US</tt> folder. The files are listed in <a href="#content_contents.rdf">Example 5</a> and <a href="#locale_en-us_contents.rdf">Example 6</a>.
</p>
<div class="example" id="content_contents.rdf">
<p><b>Example 5. chrome/content/contents.rdf</b>
</p>
<pre>&lt;?xml version="1.0"?&gt;

&lt;RDF:RDF xmlns:RDF="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
	xmlns:chrome="http://www.mozilla.org/rdf/chrome#"&gt;

	&lt;!-- list all packages --&gt;
	&lt;RDF:Seq about="urn:mozilla:package:root"&gt;
		&lt;RDF:li resource="urn:mozilla:package:emptysidebar"/&gt;
	&lt;/RDF:Seq&gt;

	&lt;!-- package information --&gt;
	&lt;RDF:Description about="urn:mozilla:package:emptysidebar"
		chrome:displayName="emptysidebar"
		chrome:author="www.occidopagus.nl"
		chrome:authorURL="http://www.occidopagus.nl"
		chrome:name="emptysidebar"
		chrome:extension="true"
		chrome:description="An example project"
		&gt;
	&lt;/RDF:Description&gt;

	&lt;!-- Overlay information --&gt;
	&lt;RDF:Seq about="urn:mozilla:overlays"&gt;
		&lt;RDF:li resource="chrome://browser/content/browser.xul" /&gt;
	&lt;/RDF:Seq&gt;

	&lt;RDF:Seq about="chrome://browser/content/browser.xul"&gt;
		&lt;RDF:li&gt;chrome://emptysidebar/content/emptysidebar-overlay.xul&lt;/RDF:li&gt;
	&lt;/RDF:Seq&gt;

&lt;/RDF:RDF&gt;
</pre>
</div>
<div class="example" id="locale_en-us_contents.rdf">
<p><b>Example 6. chrome/locale/en-US/contents.rdf</b>
</p>
<pre>&lt;?xml version="1.0"?&gt;

&lt;RDF:RDF xmlns:RDF="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
	xmlns:chrome="http://www.mozilla.org/rdf/chrome#"&gt;

	&lt;RDF:Seq about="urn:mozilla:locale:root"&gt;
		&lt;RDF:li resource="urn:mozilla:locale:en-US" /&gt;
	&lt;/RDF:Seq&gt;

	&lt;RDF:Description about="urn:mozilla:locale:en-US"&gt;
		&lt;chrome:packages&gt;
			&lt;RDF:Seq about="urn:mozilla:locale:en-US:packages"&gt;
				&lt;RDF:li resource="urn:mozilla:locale:en-US:emptysidebar" /&gt;
			&lt;/RDF:Seq&gt;
		&lt;/chrome:packages&gt;
	&lt;/RDF:Description&gt;

&lt;/RDF:RDF&gt;</pre>
</div>
<p>Now that all files have been created the extension can be installed in Firefox. All installed packages are listed in the <tt>chrome.rdf</tt> but this file should not be changed manually. For developers the easiest way is using the <tt>installed-chrome.txt</tt> file for registration. When Firefox is started it reads this file to find out which packages are installed, if new packages are found they are added to the <tt>chrome.rdf</tt> file.
</p><p>The <tt>installed-chrome.txt</tt> can be found in the Firefox <tt>chrome</tt> folder. Copy the <tt>emptysidebar</tt> folder to this folder and add the lines listed in <a href="#chrome_txt">Example 7</a> to <tt>installed-chrome.txt</tt>.
</p>
<div class="example" id="chrome_txt">
<p><b>Example 7. installed-chrome.txt</b>
</p>
<pre class="eval">content,install,url,resource:/chrome/emptysidebar/content/
locale,install,url,resource:/chrome/emptysidebar/locale/en-US/
</pre>
<p>Restart Firefox and the sidebar is included in the menu.
</p>
<div class="figure" id="firefox_sidebar_menu">
<p><img alt="Image:EmptySidebar-menu.png" src="File:en/Media_Gallery/EmptySidebar-menu.png"><br>
<b>The firefox sidebar menu</b>
</p>
</div>
<h2 name="Deployment"> Deployment </h2>
<p>Now that we have a sidebar it is time to make it availible to the world. Installation requires the creation of an XPI file which is identified as extension in Firefox. The XPI is a ZIP file containing the content and locale files, an install script named <tt>install.js</tt> and a manifest called <tt>install.rdf</tt>.
</p>
<div class="example" id="install_js">
<p><b>Example 8. chrome/install.js</b>
</p>
<pre>const APP_NAME			= "emptySidebar";
const CHROME_NAME		= "emptysidebar";
const APP_VERSION   		= "1.0";
const APP_FILE          	= "emptysidebar.jar";
const APP_CONTENT_PATH		= "content/";

initInstall(APP_NAME, APP_CHROME_NAME, APP_VERSION);

var chromeFolder = getFolder("Current User", "chrome");
setPackageFilder(chromFolder);
addFile(APP_NAME, "chrome/" + APP_FILE, chromeFolder, "");

var jarFoder = getFolder(chromeFolder, APP_FILE);
registerChrome(CONTENT | PROFILE_CHROME, jarFolder, APP_CONTENT_PATH);

var result = getLastError();
if (result == SUCCESS) {
	performInstall();
} else {
	cancelInstall(result);
}
</pre>
</div>
<div class="example" id="install_rdf">
<p><b>Example 9. emptysidebar/install.rdf</b>
</p>
<pre>&lt;?xml version="1.0"?&gt;

&lt;!-- install.rdf template copied from http://kb.mozillazine.org/Install.rdf --&gt;

&lt;RDF xmlns="http://www.w3.org/1999/02/22-rdf-syntax-ns#" 
     xmlns:em="http://www.mozilla.org/2004/em-rdf#"&gt;

	&lt;Description about="urn:mozilla:install-manifest"&gt;
	
		&lt;em:id&gt;{3B1B83AA-D06E-11D9-AF35-000D932E38A8}&lt;/em:id&gt;
		&lt;em:name&gt;EmptySidebar Extension&lt;/em:name&gt;
		&lt;em:version&gt;1.0&lt;/em:version&gt;
		&lt;em:description&gt;Example extension for creation and registration of a sidebar.&lt;/em:description&gt;
		&lt;em:creator&gt;J.C. Wesdorp&lt;/em:creator&gt;
		&lt;!-- optional items --&gt;
		&lt;em:homepageURL&gt;http://occidopagus.nl/firefox/emptysidebar/&lt;/em:homepageURL&gt;

                &lt;!-- Firefox --&gt;
		&lt;em:targetApplication&gt;
			&lt;Description&gt;
				&lt;em:id&gt;{ec8030f7-c20a-464f-9b0e-13a3a9e97384}&lt;/em:id&gt;
				&lt;em:minVersion&gt;0.9&lt;/em:minVersion&gt;
				&lt;em:maxVersion&gt;1.0&lt;/em:maxVersion&gt;
			&lt;/Description&gt;
		&lt;/em:targetApplication&gt;

                &lt;!-- This is not needed for Firefox 1.1 and later. Only include this 
                     if you want to make your extension compatible with older versions --&gt;
		&lt;em:file&gt;
			&lt;Description about="urn:mozilla:extension:file:emptysidebar.jar"&gt;
				&lt;em:package&gt;content/&lt;/em:package&gt;
				&lt;!-- optional items --&gt;
				&lt;em:locale&gt;locale/en-US/&lt;/em:locale&gt;
			&lt;/Description&gt;
		&lt;/em:file&gt;
	&lt;/Description&gt;

&lt;/RDF&gt;
</pre>
</div>
<p>Each extension is identified by a GUID code. A GUID has to be created for each extension. Tools for GUID creation are GuidGen from Microsoft or uuidgen on Unix systems.
</p><p>The content and locale files are packed into <tt>emptysidebar.jar</tt>, create this file in the <tt>chrome</tt> folder. On unix systems:
</p>
<pre class="eval">~/src/emptysidebar$ <b>cd chrome</b>
~/src/emptysidebar/chrome$ <b>zip -r emptysidebar.jar content/ locale/</b>
</pre>
<p>Finally, create the XPI file. This is a ZIP file containing the JAR file and the install scripts.
</p>
<pre class="eval">~/src/emptysidebar/chrome$ <b>cd ..</b>
~/src/emptysidebar$ <b>zip emptysidebar.xpi install.* chrome/emptysidebar.jar</b>
</pre>
<p>Open Firefox and browse to the folder containing <tt>emptysidebar.xpi</tt>. Click on the file and the Extension installation window pops up. After a restart of Firefox the sidebar is installed. Or click <a class="external" href="http://occidopagus.nl/firefox/emptysidebar/examples/emptysidebar.xpi">here</a> for the XPI.
</p>
<div class="figure" id="emptysidebar_extension">
<p><img alt="Image:EmptySidebar-extension.png" src="File:en/Media_Gallery/EmptySidebar-extension.png"><br>
<b>The EmptySidebar extension</b>
</p>
</div>
<h2 name="Resources"> Resources </h2>
<ul><li> <a class="external" href="http://books.mozdev.org/html/index.html">Creating Applications with Mozilla</a>
</li><li> <a class="external" href="http://www.bengoodger.com/software/mb/extensions/packaging/extensions.html">Packaging Firefox/Thunderbird Extensions</a>
</li><li> <a class="external" href="http://kb.mozillazine.org/Setting_up_extension_development_environment">Mozillazine: Setting up extension development environment</a>
</li><li> <a class="external" href="http://kb.mozillazine.org/Install.rdf">Mozillazine: Install.rdf</a>
</li></ul>
<div class="originaldocinfo">
<h2 name="Original_Document_Information"> Original Document Information </h2>
<ul><li> Author: J.C. Wesdorp &lt;jcwesdorp . at . occidopagus.nl&gt; - May 30, 2005.
</li><li> Permission granted to migrate in Jan 2006, including permission to relicense under the CC:By-SA.
</li><li> Original Source: http://occidopagus.nl/firefox/emptysidebar/
</li></ul>
</div></div>
</div>
Revert to this revision