mozilla

Compare Revisions

Creating a Firefox sidebar

Change Revisions

Revision 94328:

Revision 94328 by Brettz9 on

Revision 94329:

Revision 94329 by dpurp on

Title:
Creating a Firefox sidebar
Creating a Firefox sidebar
Slug:
Creating_a_Firefox_sidebar
Creating_a_Firefox_sidebar
Tags:
Extensions, Add-ons, Firefox
Extensions, Add-ons, Firefox
Content:

Revision 94328
Revision 94329
nn8       
9    </p>
10    <p>
n23      This article is a quick start, it won't explain all elementn26      This article is a quick start, it won't explain all element
>s of <a href="en/XUL">XUL</a>, packaging and XPI's. It's preferab>s of <a href="/en/XUL" title="en/XUL">XUL</a>, packaging and XPI'
>le you have some basic knowledge of how XUL works and how Firefox>s. It's preferable you have some basic knowledge of how XUL works
> handles extensions. See <a href="en/Building_an_Extension">Build> and how Firefox handles extensions. See <a href="/en/Building_an
>ing an Extension</a> for more detailed information about structur>_Extension" title="en/Building_an_Extension">Building an Extensio
>ing, packaging, and deploying extensions.>n</a> for more detailed information about structuring, packaging,
 > and deploying extensions.
n29      Extensions to Firefox are installed with packages ("<a hrefn32      Extensions to Firefox are installed with packages ("<a href
>="en/Bundles">Bundles</a>"). An extension package usually contain>="/en/Bundles" title="en/Bundles">Bundles</a>"). An extension pac
>s a "content" provider, which contains the XUL code and applicati>kage usually contains a "content" provider, which contains the XU
>on logic. Optionally locales and skins can be included. Most addi>L code and application logic. Optionally locales and skins can be
>tions are provided with a default tree structure, although not re> included. Most additions are provided with a default tree struct
>quired it is recommended to use this structure. Here the package >ure, although not required it is recommended to use this structur
>for the sidebar is created, the files included are listed below.>e. Here the package for the sidebar is created, the files include
 >d are listed below.
n33        <b>Example&nbsp;1.&nbsp;Package structure</b>n36        <strong>Example&nbsp;1.&nbsp;Package structure</strong>
n45      Create all folders, except for <tt>skin</tt>. It is not usen48      Create all folders, except for <code>skin</code>. It is not
>d for this tutorial.> used for this tutorial.
46    </p>
47    <p>49    </p>
50    <p>
48      The <tt>locale</tt> holds the locale, only the <tt>en-US</t51      The <code>locale</code> holds the locale, only the <code>en
>t> locale is created. It is listed in <a href="#en-us_emptysideba>-US</code> locale is created. It is listed in <a href="#en-us_emp
>r.dtd">Example 2</a>. The locale includes the name and shortcut k>tysidebar.dtd">Example 2</a>. The locale includes the name and sh
>eys for the sidebar.>ortcut keys for the sidebar.
n52        <b>Example&nbsp;2.&nbsp;chrome/locale/en-US/emptysidebar.n55        <strong>Example&nbsp;2.&nbsp;chrome/locale/en-US/emptysid
>dtd</b>>ebar.dtd</strong>
n60        The content folder includes our sidebar, the <tt>emptysidn63        The content folder includes our sidebar, the <code>emptys
>ebar.xul</tt> is shown in <a href="#emptysidebar_xul">Example 3</>idebar.xul</code> is shown in <a href="#emptysidebar_xul">Example
>a>. It creates a <a class="external" href="http://books.mozdev.or> 3</a>. It creates a <a class="external" href="http://books.mozde
>g/html/appc-77238.html">page</a> holding one label. Other element>v.org/html/appc-77238.html">page</a> holding one label. Other ele
>s can be included, please read the XUL tutorials for more informa>ments can be included, please read the XUL tutorials for more inf
>tion.>ormation.
n64          <b>Example&nbsp;3.&nbsp;chrome/content/emptysidebar.xuln67          <strong>Example&nbsp;3.&nbsp;chrome/content/emptysideba
></b>>r.xul</strong>
n85          <b>Example&nbsp;4.&nbsp;chrome/content/firefoxOverlay.xn88          <strong>Example&nbsp;4.&nbsp;chrome/content/firefoxOver
>ul</b>>lay.xul</strong>
n124        The extension needs to provide some special manifest filen127        The extension needs to provide some special manifest file
>s that control how it is installed and where it's chrome resource>s that control how it is installed and where it's chrome resource
>s are stored. The first is <code>install.rdf</code>, the install >s are stored. The first is <code>install.rdf</code>, the install 
>manifest. See <a href="en/Install_Manifests">Install Manifests</a>manifest. See <a href="/en/Install_Manifests" title="en/Install_M
>> for a complete listing of the required and optional properties.>anifests">Install Manifests</a> for a complete listing of the req
> The install manifest is listed in <a href="#install_manifest">Ex>uired and optional properties. The install manifest is listed in 
>ample 5</a>.><a href="#install_manifest">Example 5</a>.
n128          <b>Example&nbsp;5.&nbsp;install.rdf</b>n131          <strong>Example&nbsp;5.&nbsp;install.rdf</strong>
n153        The other manifest file is <tt>chrome.manifest</tt>, the n156        The other manifest file is <code>chrome.manifest</code>, 
>chrome manifest file. The chrome manifest creates a lookup for al>the chrome manifest file. The chrome manifest creates a lookup fo
>l the resource types used by the extension. The manifest also tel>r all the resource types used by the extension. The manifest also
>ls Firefox that the extension has an overlay that needs to be mer> tells Firefox that the extension has an overlay that needs to be
>ged into the browser. For more information on chrome manifests an> merged into the browser. For more information on chrome manifest
>d the properties they support, see the <a href="en/Chrome_Manifes>s and the properties they support, see the <a href="/en/Chrome_Re
>t">Chrome Manifest</a> reference. The manifest used in this exten>gistration" title="en/Chrome_Registration">Chrome Manifest</a> re
>sion is listed in <a href="#chrome_manifest">Example 6</a>.>ference. The manifest used in this extension is listed in <a href
 >="#chrome_manifest">Example 6</a>.
n157          <b>Example&nbsp;6.&nbsp;chrome.manifest</b>n160          <strong>Example&nbsp;6.&nbsp;chrome.manifest</strong>
n173        <li>Open your Profile Foldern176        <li>Open your <a class="external" href="http://support.mo
 >zilla.com/en-US/kb/Profiles" title="http://support.mozilla.com/en
 >-US/kb/Profiles">Profile Folder</a>&nbsp;
n177        <li>Create a new text file, and put the path to your exten180        <li>Create a new text file, and put the path to your exte
>nsion folder inside, e.g. <tt>C:\extensions\myExtension</tt> or <>nsion folder inside, e.g. <code>C:\extensions\myExtension</code> 
>tt>~/extensions/myExtension</tt>. Save the file with the id of yo>or <code>~/extensions/myExtension</code>. Save the file with the 
>ur extension as its name, e.g. <tt><a class=" link-mailto" href=">id of your extension as its name, e.g. <code><a class=" link-mail
>mailto:emptysidebar@yourdomain.com" rel="freelink">emptysidebar@y>to" href="mailto:emptysidebar@yourdomain.com" rel="freelink">empt
>ourdomain.com</a></tt>>ysidebar@yourdomain.com</a></code>
n184        <img alt="Image:sidebar-test.png" fileid="850" src="File:n187        <img alt="Image:sidebar-test.png" class="internal" src="/
>en/Media_Gallery/Sidebar-test.png">>@api/deki/files/850/=Sidebar-test.png">
n196        The content, locale and skin folders are packed into <tt>n199        The content, locale and skin folders are packed into <cod
>emptysidebar.jar</tt>, which should be created in the <tt>chrome<>e>emptysidebar.jar</code>, which should be created in the <code>c
>/tt> folder. On unix systems:>hrome</code> folder. On unix systems:
n199~/src/emptysidebar$ <b>cd chrome</b>n202~/src/emptysidebar$ <strong>cd chrome</strong>
200~/src/emptysidebar/chrome$ <b>zip -r emptysidebar.jar content/ lo203~/src/emptysidebar/chrome$ <strong>zip -r emptysidebar.jar conten
>cale/</b>>t/ locale/</strong>
n203        On Windows systems, use a ZIP tool to create <tt>emptysidn206        On Windows systems, use a ZIP tool to create <code>emptys
>ebar.zip</tt> and then rename to <tt>emptysidebar.jar</tt>.>idebar.zip</code> and then rename to <code>emptysidebar.jar</code
 >>.
n210          <b>Example&nbsp;7.&nbsp;chrome.manifest</b>n213          <strong>Example&nbsp;7.&nbsp;chrome.manifest</strong>
n223~/src/emptysidebar/chrome$ <b>cd ..</b>n226~/src/emptysidebar/chrome$ <strong>cd ..</strong>
224~/src/emptysidebar$ <b>zip emptysidebar.xpi install.rdf chrome.ma227~/src/emptysidebar$ <strong>zip emptysidebar.xpi install.rdf chro
>nifest chrome/emptysidebar.jar</b>>me.manifest chrome/emptysidebar.jar</strong>
n227        Open Firefox and browse to the folder containing <tt>emptn230        Open Firefox and browse to the folder containing <code>em
>ysidebar.xpi</tt>. Click on the file and the Extension installati>ptysidebar.xpi</code>. Click on the file and the Extension instal
>on window pops up. After a restart of Firefox, the sidebar is ins>lation window pops up. After a restart of Firefox, the sidebar is
>talled.> installed.
n234          <img alt="Image:sidebar-installed.png" fileid="849" srcn237          <img alt="Image:sidebar-installed.png" class="internal"
>="File:en/Media_Gallery/Sidebar-installed.png"><br>> src="/@api/deki/files/849/=Sidebar-installed.png"><br>
235          <b>The EmptySidebar extension</b>238          <strong>The EmptySidebar extension</strong>
n243          <a href="en/Code_snippets/Sidebar">Code snippets:Sideban246          <a href="/en/Code_snippets/Sidebar" title="en/Code_snip
>r</a>>pets/Sidebar">Code snippets:Sidebar</a>
244        </li>
245        <li>247        </li>
248        <li>
246          <a href="en/Building_an_Extension">Building an Extensio249          <a href="/en/Building_an_Extension" title="en/Building_
>n</a>>an_Extension">Building an Extension</a>
tt276    </div>
277    <p>
273    </div>{{ languages( { "es": "es/Crear_un_panel_lateral_en_Fir278      {{ languages( { "es": "es/Crear_un_panel_lateral_en_Firefox
>efox" } ) }}>" } ) }}
279    </p>

Back to History