Compare Revisions

Building an extension

Revision 33549:

Revision 33549 by Crookedfoot on

Revision 33550:

Revision 33550 by pajbj on

Title:
Building an extension
Building an extension
Slug:
Building_an_Extension
Building_an_Extension
Tags:
NeedsTechnicalReview, Extensions, Add-ons, NeedsEditorialReview, NeedsUpdate
NeedsTechnicalReview, Extensions, Add-ons, NeedsEditorialReview, NeedsUpdate
Content:

Revision 33549
Revision 33550
nn7    <p>
8      &nbsp;
9    </p>
n11      This tutorial will take you through the steps required to bn14      This tutorial will take you through the steps required to b
>uild a very basic <a href="en/Extensions">extension</a> - one whi>uild a very basic <a href="/en/Extensions" title="en/Extensions">
>ch adds a status bar panel to the Firefox browser containing the >extension</a> - one which adds a status bar panel to the Firefox 
>text "Hello, World!">browser containing the text "Hello, World!"
n15        <b>Note</b> This tutorial is about building extensions fon18        <strong>Note</strong> This tutorial is about building ext
>r Firefox 1.5 and later. Other tutorials exist for building exten>ensions for Firefox 1.5 and later.&nbsp; Other tutorials exist fo
>sions for earlier versions of Firefox.>r building extensions in earlier versions of Firefox.
n18        For a tutorial on building an extension for Thunderbird, n21        For a tutorial on building an extension for Thunderbird, 
>see <a href="en/Building_a_Thunderbird_extension">Building a Thun>see <a href="/en/Building_a_Thunderbird_extension" title="en/Buil
>derbird extension</a>>ding_a_Thunderbird_extension">Building a Thunderbird extension</a
 >>
n25      Extensions are packaged and distributed in ZIP files, or <an28      Extensions are packaged and distributed in ZIP files or <a 
> href="en/Bundles">Bundles</a>, with the <tt>XPI</tt> (<i>pronoun>href="/en/Bundles" title="en/Bundles">Bundles</a>, with the <code
>ced “zippy”</i>) file extension.>>XPI</code> (<em>pronounced “zippy”</em>) file extension.
n32              /<a href="en/Install.rdf">install.rdf</a>          n35              /<a href="/en/Install_Manifests" title="en/Install_
>         >Manifests">install.rdf</a>                   
n38              /<a href="en/Chrome.manifest">chrome.manifest</a>  n41              /<a href="/en/Chrome_Registration" title="en/Chrome
>              >_Registration">chrome.manifest</a>                
39              /<a href="en/Chrome_window_icons">chrome/icons/defa42              /<a href="/en/Window_icons" title="en/Window_icons"
>ult/*</a>       >>chrome/icons/default/*</a>       
n45      We'll want to create a file structure similar to the one abn48      We'll want to create a file structure similar to the one ab
>ove for our tutorial, so let's begin by creating a folder for you>ove for our tutorial, so let's begin by creating a folder for you
>r extension somewhere on your hard disk (e.g. <tt>C:\extensions\m>r extension somewhere on your hard disk (e.g. <code>C:\extensions
>y_extension\</tt> or <tt>~/extensions/my_extension/</tt>). Inside>\my_extension\</code> or <code>~/extensions/my_extension/</code>)
> your new extension folder, create another folder called <tt>chro>.&nbsp; Inside your new extension folder, create another folder c
>me</tt>, and inside the <tt>chrome</tt> folder create a folder ca>alled <code>chrome</code>, and inside the <code>chrome</code> fol
>lled <tt>content</tt>.>der create a folder called <code>content</code>.
46    </p>
47    <p>49    </p>
50    <p>
48      Inside the <b>root</b> directory of your extension folder, 51      Inside the <strong>root</strong> directory of your extensio
>create two new empty text files, one called <tt>chrome.manifest</>n folder, create two new empty text files, one called <code>chrom
>tt> and the other called <tt>install.rdf</tt>.>e.manifest</code> and the other called <code>install.rdf</code>.
n61      <span class="comment">&lt;pre&gt; #!/bin/sh h=$HOME/moExt mn64      <span class="comment">&lt;pre&gt; #!/bin/sh h=$HOME/moExt m
>kdir -p $h/my_extension/chrome/content touch $h/my_extension/chro>kdir -p $h/my_extension/chrome/content touch $h/my_extension/chro
>me.manifest $h/my_extension/install.rdf &lt;/pre&gt;</span> Pleas>me.manifest $h/my_extension/install.rdf &lt;/pre&gt;</span> Pleas
>e read the additional information about setting up your developme>e read the additional information about setting up your developme
>nt environment in the article <a href="en/Setting_up_extension_de>nt environment in the article <a href="/en/Setting_up_extension_d
>velopment_environment">Setting up extension development environme>evelopment_environment" title="en/Setting_up_extension_developmen
>nt</a>.>t_environment">Setting up extension development environment</a>.
n67      Open the file called <tt><a href="en/Install_Manifests">insn70      Open the file called <code><a href="/en/Install_Manifests" 
>tall.rdf</a></tt> that you created at the top of your extension's>title="en/Install_Manifests">install.rdf</a></code> that you crea
> folder hierarchy and put this inside:>ted at the top of your extension's folder hierarchy and put this 
 >inside:
n76    &lt;em:id&gt;<b><a class=" link-mailto" href="mailto:sample@en79    &lt;em:id&gt;<strong><a class=" link-mailto" href="mailto:sam
>xample.net" rel="freelink">sample@example.net</a></b>&lt;/em:id&g>ple@example.net" rel="freelink">sample@example.net</a></strong>&l
>t;>t;/em:id&gt;
77    &lt;em:version&gt;<b>1.0</b>&lt;/em:version&gt;80    &lt;em:version&gt;<strong>1.0</strong>&lt;/em:version&gt;
n84        &lt;em:id&gt;<b>{ec8030f7-c20a-464f-9b0e-13a3a9e97384}</bn87        &lt;em:id&gt;<strong>{ec8030f7-c20a-464f-9b0e-13a3a9e9738
>>&lt;/em:id&gt;>4}</strong>&lt;/em:id&gt;
85        &lt;em:minVersion&gt;<b>1.5</b>&lt;/em:minVersion&gt;88        &lt;em:minVersion&gt;<strong>1.5</strong>&lt;/em:minVersi
 >on&gt;
86        &lt;em:maxVersion&gt;<b>3.0.*</b>&lt;/em:maxVersion&gt;89        &lt;em:maxVersion&gt;<strong>3.0.*</strong>&lt;/em:maxVer
 >sion&gt;
n91    &lt;em:name&gt;<b>sample</b>&lt;/em:name&gt;n94    &lt;em:name&gt;<strong>sample</strong>&lt;/em:name&gt;
92    &lt;em:description&gt;<b>A test extension</b>&lt;/em:descript95    &lt;em:description&gt;<strong>A test extension</strong>&lt;/e
>ion&gt;>m:description&gt;
93    &lt;em:creator&gt;<b>Your Name Here</b>&lt;/em:creator&gt;96    &lt;em:creator&gt;<strong>Your Name Here</strong>&lt;/em:crea
 >tor&gt;
94    &lt;em:homepageURL&gt;<b><span class="nowiki">http://www.exam97    &lt;em:homepageURL&gt;<strong><span class="nowiki">http://www
>ple.com/</span></b>&lt;/em:homepageURL&gt;>.example.com/</span></strong>&lt;/em:homepageURL&gt;
n100        <b><a class=" link-mailto" href="mailto:sample@example.nen103        <strong><a class=" link-mailto" href="mailto:sample@examp
>t" rel="freelink">sample@example.net</a></b> - the ID of the exte>le.net" rel="freelink">sample@example.net</a></strong> - the ID o
>nsion. This is some value you come up with to identify your exten>f the extension.&nbsp; This is a value you come up with to identi
>sion in email address format (note that it should not be <i>your<>fy your extension in email address format (note that it should no
>/i> email). Make it unique. You could also use a GUID. NOTE: This>t be <em>your</em> email).&nbsp; Make it unique.&nbsp; You could 
> parameter MUST be in the format of an email address, although it>also use a GUID.&nbsp; NOTE: This parameter MUST be in the format
> does NOT have to be a valid email address. (example.example.exam> of an email address, although it does NOT have to be a valid ema
>ple)>il address.&nbsp; (example.example.example)
101      </li>
102      <li>Specify <tt>&lt;em:type&gt;2&lt;/em:type&gt;</tt> -- th
>e 2 declares that it is installing an extension. If you were to i 
>nstall a theme it would be 4 (see <a href="en/Install_Manifests#t 
>ype">Install Manifests#type</a> for other type codes). 
103      </li>
104      <li>104      </li>
105        <b>{ec8030f7-c20a-464f-9b0e-13a3a9e97384}</b> - Firefox's105      <li>Specify <code>&lt;em:type&gt;2&lt;/em:type&gt;</code> -
> application ID.>- the 2 declares that it is installing an extension.&nbsp; If you
 > were to install a theme it would be 4 (see <a href="/en/Install_
 >Manifests#type" title="en/Install_Manifests#type">Install Manifes
 >ts#type</a> for other type codes).
106      </li>
107      <li>106      </li>
108        <b>1.5</b> - the minimum version of Firefox you're saying
> this extension will work with. Set this as the minimum version y 
>ou're going to commit to testing and fixing bugs with. 
109      </li>107      <li>
108        <strong>{ec8030f7-c20a-464f-9b0e-13a3a9e97384}</strong> -
 > Firefox's application ID.
110      <li>109      </li>
110      <li>
111        <strong>1.5</strong> - the minimum version of Firefox you
 >'re saying this extension will work with.&nbsp; Set this as the m
 >inimum version you're going to commit to testing and fixing bugs 
 >with.
112      </li>
113      <li>
111        <b>3.0.*</b> - the maximum version of Firefox you're sayi114        <strong>3.0.*</strong> - the maximum version of Firefox y
>ng this extension will work with. Set this to be no newer than th>ou're saying this extension will work with.&nbsp; Set this to be 
>e newest currently available version! In this case, "3.0.*" indic>no newer than the newest currently available version!&nbsp; In th
>ates that the extension works with Firefox 3.0 and any subsequent>is case, "3.0.*" indicates that the extension works with Firefox 
> 3.0.x release.>3.0 and any subsequent 3.0.x release.
n118      See <a href="en/Install_Manifests">Install Manifests</a> fon121      See <a href="/en/Install_Manifests" title="en/Install_Manif
>r a complete listing of the required and optional properties.>ests">Install Manifests</a> for a complete listing of the require
 >d and optional properties.
n127      Firefox's user interface is written in XUL and JavaScript. n130      Firefox's user interface is written in XUL and JavaScript.&
><a href="en/XUL">XUL</a> is an XML grammar that provides user int>nbsp; <a href="/en/XUL" title="en/XUL">XUL</a> is an XML grammar 
>erface widgets like buttons, menus, toolbars, trees etc. User act>that provides user interface widgets like buttons, menus, toolbar
>ions are bound to functionality using JavaScript.>s, trees, etc.&nbsp; User actions are bound to functionality usin
 >g JavaScript.
128    </p>
129    <p>131    </p>
130      To extend the browser, we modify parts of the browser UI by
> adding or modifying widgets. We add widgets by inserting new XUL 
> DOM elements into the browser window, and modify them by using s 
>cript and attaching event handlers. 
131    </p>132    <p>
133      To extend the browser, we modify parts of the browser UI by
 > adding or modifying widgets.&nbsp; We add widgets by inserting n
 >ew XUL DOM elements into the browser window and modify them by us
 >ing script and attaching event handlers.
132    <p>134    </p>
135    <p>
133      The browser is implemented in a XUL file called <tt>browser136      The browser is implemented in a XUL file called <code>brows
>.xul</tt> (<tt>$FIREFOX_INSTALL_DIR/chrome/browser.jar</tt> conta>er.xul</code> (<code>$FIREFOX_INSTALL_DIR/chrome/browser.jar</cod
>ins <tt>content/browser/browser.xul</tt>). In browser.xul we can >e> contains <code>content/browser/browser.xul</code>).&nbsp; In b
>find the status bar, which looks something like this:>rowser.xul we can find the status bar, which looks something like
 > this:
n141      <tt>&lt;statusbar id="status-bar"&gt;</tt> is a "merge poinn144      <code>&lt;statusbar id="status-bar"&gt;</code> is a "merge 
>t" for a XUL Overlay.>point" for a XUL Overlay.
n147      <a href="en/XUL_Overlays">XUL Overlays</a> are a way of attn150      <a href="/en/XUL_Overlays" title="en/XUL_Overlays">XUL Over
>aching other UI widgets to a XUL document at run time. A XUL Over>lays</a> are a way of attaching other UI widgets to a XUL documen
>lay is a .xul file that specifies XUL fragments to insert at spec>t at run time.&nbsp; A XUL Overlay is a .xul file that specifies 
>ific merge points within a "master" document. These fragments can>XUL fragments to insert at specific merge points within a "master
> specify widgets to be inserted, removed, or modified.>" document.&nbsp; These fragments can specify widgets to be inser
 >ted, removed, or modified.
148    </p>
149    <p>151    </p>
152    <p>
150      <b>Example XUL Overlay Document</b>153      <strong>Example XUL Overlay Document</strong>
n156 &lt;statusbar id="<b>status-bar</b>"&gt;n159 &lt;statusbar id="<strong>status-bar</strong>"&gt;
n162      The <tt>&lt;statusbar&gt;</tt> called <tt><b>status-bar</b>n165      The <code>&lt;statusbar&gt;</code> called <code><strong>sta
></tt> specifies the "merge point" within the browser window that >tus-bar</strong></code> specifies the "merge point" within the br
>we want to attach to.>owser window that we want to attach to.
163    </p>
164    <p>166    </p>
167    <p>
165      The <tt>&lt;statusbarpanel&gt;</tt> child is a new widget t168      The <code>&lt;statusbarpanel&gt;</code> child is a new widg
>hat we want to insert within the merge point.>et that we want to insert within the merge point.
166    </p>
167    <p>169    </p>
170    <p>
168      Take this sample code above and save it into a new file cal171      Take this sample code above and save it into a new file cal
>led <tt><b>sample.xul</b></tt> inside the <tt>chrome/content</tt>>led <code><strong>sample.xul</strong></code> inside the <code>chr
> folder you created.>ome/content</code> folder you created.
n177      XUL files are part of "<a href="en/Chrome_Registration">Chrn180      XUL files are part of "<a href="/en/Chrome_Registration" ti
>ome Packages</a>" - bundles of user interface components which ar>tle="en/Chrome_Registration">Chrome Packages</a>" - bundles of us
>e loaded via <tt><a class=" external" href="chrome://" rel="freel>er interface components which are loaded via <code><a class=" ext
>ink">chrome://</a></tt> URIs. Rather than load the browser from d>ernal" href="chrome://" rel="freelink">chrome://</a></code> URIs.
>isk using a <tt><a class=" external" href="file://" rel="freelink>&nbsp; Rather than load the browser from disk using a <code><a cl
>">file://</a></tt> URI (since the location of Firefox on the syst>ass=" external" href="file://" rel="freelink">file://</a></code> 
>em can change from platform to platform and system to system), Mo>URI (since the location of Firefox on the system can change from 
>zilla developers came up with a solution for creating URIs to XUL>platform to platform and system to system), Mozilla developers ca
> content that the installed application knows about.>me up with a solution for creating URIs to XUL content that the i
 >nstalled application knows about.
178    </p>
179    <p>181    </p>
182    <p>
180      The browser window is: <tt><a class=" external" href="chrom183      The browser window is: <code><a class=" external" href="chr
>e://browser/content/browser.xul" rel="freelink">chrome://browser/>ome://browser/content/browser.xul" rel="freelink">chrome://browse
>content/browser.xul</a></tt> Try typing this URL into the locatio>r/content/browser.xul</a></code>, try typing this URL into the lo
>n bar in Firefox!>cation bar in Firefox!
n186      <li>Firstly, the <b>URI scheme</b> (<tt>chrome</tt>) which n189      <li>Firstly, the <strong>URI scheme</strong> (<code>chrome<
>tells Firefox's networking library that this is a Chrome URI. It >/code>) which tells Firefox's networking library that this is a C
>indicates that the content of the URI should be handled as a (<tt>hrome URI.&nbsp; It indicates that the content of the URI should 
>>chrome</tt>). Compare (<tt>chrome</tt>) to (<tt>http</tt>) which>be handled as a (<code>chrome</code>).&nbsp; Compare (<code>chrom
> tells Firefox to treat the URI as a web page.>e</code>) to (<code>http</code>) which tells Firefox to treat the
 > URI as a web page.
n188      <li>Secondly, a package name (in the example above, <tt><b>n191      <li>Secondly, a package name (in the example above, <code><
>browser</b></tt>) which identifies the bundle of user interface c>strong>browser</strong></code>) which identifies the bundle of us
>omponents. This should be as unique to your application as possib>er interface components.&nbsp; This should be as unique to your a
>le to avoid collisions between extensions.>pplication as possible to avoid collisions between extensions.
n190      <li>Thirdly, the type of data being requested. There are thn193      <li>Thirdly, the type of data being requested.&nbsp; There 
>ree types: <tt>content</tt> (XUL, JavaScript, XBL bindings, etc. >are three types: <code>content</code> (XUL, JavaScript, XBL bindi
>that form the structure and behavior of an application UI), <tt>l>ngs, etc. that form the structure and behavior of an application 
>ocale</tt> (DTD, .properties files etc that contain strings for t>UI), <code>locale</code> (DTD, .properties files etc that contain
>he UI's <a href="en/Localization">localization</a>), and <tt>skin> strings for the UI's <a href="/en/Localization" title="en/Locali
></tt> (CSS and images that form the <a href="en/Theme">theme</a> >zation">localization</a>), and <code>skin</code> (CSS and images 
>of the UI)>that form the <a href="/en/Themes" title="en/Themes">theme</a> of
 > the UI)
n196      So, <tt><a class=" external" href="chrome://foo/skin/bar.pnn199      So, <code><a class=" external" href="chrome://foo/skin/bar.
>g" rel="freelink">chrome://foo/skin/bar.png</a></tt> loads the fi>png" rel="freelink">chrome://foo/skin/bar.png</a></code>&nbsp; lo
>le <tt>bar.png</tt> from the <tt>foo</tt> theme's <tt>skin</tt> s>ads the file <code>bar.png</code> from the <code>foo</code> theme
>ection.>'s <code>skin</code> section.
n205      For more information on Chrome Manifests and the propertiesn208      For more information on Chrome Manifests and the properties
> they support, see the <a href="en/Chrome_Manifest">Chrome Manife> they support, see the <a href="/en/Chrome_Registration" title="e
>st</a> Reference.>n/Chrome_Registration">Chrome Manifest</a> Reference.
206    </p>
207    <p>209    </p>
210    <p>
208      Open the file called <b>chrome.manifest</b> that you create211      Open the file called <strong>chrome.manifest</strong> that 
>d alongside the <tt>chrome</tt> directory at the root of your ext>you created alongside the <code>chrome</code> directory at the ro
>ension's source folder hierarchy.>ot of your extension's source folder hierarchy.
n217      (<b>Don't forget the trailing slash, "<tt>/</tt>"!</b> Withn220      (<strong>Don't forget the trailing slash, "<code>/</code>"!
>out it, the package won't be registered.)></strong> Without it, the package won't be registered.)
n231      So, this line says that for a chrome package <b>sample</b>,n234      So, this line says that for a chrome package <strong>sample
> we can find its <b>content</b> files at the location <tt>chrome/></strong>, we can find its <strong>content</strong> files at the 
>content</tt> which is a path relative to the location of <tt>chro>location <code>chrome/content</code> which is a path relative to 
>me.manifest</tt>.>the location of <code>chrome.manifest</code>.
232    </p>
233    <p>235    </p>
236    <p>
234      Note that content, locale and skin files must be kept insid237      Note that content, locale and skin files must be kept insid
>e folders called content, locale and skin within your <tt>chrome<>e folders called content, locale and skin within your <code>chrom
>/tt> subdirectory.>e</code> subdirectory.
n243      You need Firefox to merge your overlay with the browser winn246      You need Firefox to merge your overlay with the browser win
>dow whenever it displays one. So add this line to your <tt>chrome>dow whenever it displays one. So add this line to your <code>chro
>.manifest</tt> file:>me.manifest</code> file:
n249      This tells Firefox to merge <tt>sample.xul</tt> into <tt>brn252      This tells Firefox to merge <code>sample.xul</code> into <c
>owser.xul</tt> when <tt>browser.xul</tt> loads.>ode>browser.xul</code> when <code>browser.xul</code> loads.
n258      <li>Locate your default profile folder. Your default profiln261      <li>Locate your default profile folder. Your default profil
>e folder is somewhere underneath the <a class="external" href="ht>e folder is somewhere underneath the <a class="external" href="ht
>tp://kb.mozillazine.org/Profile_folder">Profile Folder</a>, for e>tp://kb.mozillazine.org/Profile_folder">Profile Folder</a>, for e
>xample under the <tt>Firefox/Profiles/&lt;profile_id&gt;.default/>xample under the <code>Firefox/Profiles/&lt;profile_id&gt;.defaul
></tt> subfolder.>t/</code> subfolder.
n260      <li>Open the <b>extensions</b> folder. You should already hn263      <li>Open the <strong>extensions</strong> folder. You should
>ave one if you have any extension installed. Create one if it doe> already have one if you have any extension installed. Create one
>sn't exist.> if it doesn't exist.
n262      <li>Create a new text file, and put the path to your develon265      <li>Create a new text file, and put the path to your develo
>pment folder inside, e.g. <tt>C:\extensions\my_extension\</tt> or>pment folder inside, e.g. <code>C:\extensions\my_extension\</code
> <tt>~/extensions/my_extension/</tt>. Save the file with the id o>> or <code>~/extensions/my_extension/</code>. Save the file with 
>f your extension as its name, e.g. <tt><a class=" link-mailto" hr>the id of your extension as its name, e.g. <code><a class=" link-
>ef="mailto:sample@example.net" rel="freelink">sample@example.net<>mailto" href="mailto:sample@example.net" rel="freelink">sample@ex
>/a></tt>>ample.net</a></code>
n266      (<b>Don't forget the trailing slash, "<tt>/</tt>"!</b> Withn269      (<strong>Don't forget the trailing slash, "<code>/</code>"!
>out it, the extension won't get registered.)></strong> Without it, the extension won't get registered.)
267    </p>
268    <p>270    </p>
271    <p>
269      (<b>my_extension may not work!</b> Redirect seems to break 272      (<strong>my_extension may not work!</strong> Redirect seems
>if the folder name contains an underscore.)> to break if the folder name contains an underscore.)
n284      Now that your extension works, you can <a href="en/Extension287      Now that your extension works, you can <a href="/en/Extensi
>n_Packaging">package</a> it for deployment and installation.>on_Packaging" title="en/Extension_Packaging">package</a> it for d
 >eployment and installation.
285    </p>
286    <p>288    </p>
289    <p>
287      Zip up the <b>contents</b> of your extension's folder (not 290      Zip up the <strong>contents</strong> of your extension's fo
>the extension folder itself), and rename the zip file to have a .>lder (not the extension folder itself), and rename the zip file t
>xpi extension. In Windows XP, you can do this easily by selecting>o have a .xpi extension. In Windows XP, you can do this easily by
> all the files and subfolders in your extension folder, right cli> selecting all the files and subfolders in your extension folder,
>ck and choose "Send To -&gt; Compressed (Zipped) Folder". A .zip > right click and choose "Send To -&gt; Compressed (Zipped) Folder
>file will be created for you. Just rename it and you're done!>". A .zip file will be created for you. Just rename it and you're
 > done!
288    </p>
289    <p>291    </p>
292    <p>
290      On Mac OS X, you can right-click on the <b>contents</b> of 293      On Mac OS X, you can right-click on the <strong>contents</s
>the extension's folder and choose "Create Archive of..." to make >trong> of the extension's folder and choose "Create Archive of...
>the zip file. However, since Mac OS X adds hidden files to folder>" to make the zip file. However, since Mac OS X adds hidden files
>s in order to track file metadata, you should instead use the Ter> to folders in order to track file metadata, you should instead u
>minal, delete the hidden files (whose names begin with a period),>se the Terminal, delete the hidden files (whose names begin with 
> and then use the <tt>zip</tt> command on the command line to cre>a period), and then use the <code>zip</code> command on the comma
>ate the zip file.>nd line to create the zip file.
n299      Now upload the .xpi file to your server, making sure it's sn302      Now upload the .xpi file to your server, making sure it's s
>erved as <tt>application/x-xpinstall</tt>. You can link to it and>erved as <code>application/x-xpinstall</code>. You can link to it
> allow people to download and install it. For the purposes of jus> and allow people to download and install it. For the purposes of
>t testing our .xpi file we can just drag it into the extensions w> just testing our .xpi file we can just drag it into the extensio
>indow via Tools -&gt; Extensions in Firefox 1.5.0.x, or Tools -&g>ns window via Tools -&gt; Extensions in Firefox 1.5.0.x, or Tools
>t; Add-ons in later versions.> -&gt; Add-ons in later versions.
n305      There are a variety of ways you can install extensions fromn308      There are a variety of ways you can install extensions from
> web pages, including direct linking to the XPI files and using t> web pages, including direct linking to the XPI files and using t
>he InstallTrigger object. Extension and web authors are encourage>he InstallTrigger object. Extension and web authors are encourage
>d to use the <a href="en/Installing_Extensions_and_Themes_From_We>d to use the <a href="/en/Installing_Extensions_and_Themes_From_W
>b_Pages">InstallTrigger method</a> to install XPIs, as it provide>eb_Pages" title="en/Installing_Extensions_and_Themes_From_Web_Pag
>s the best experience to users.>es">InstallTrigger method</a> to install XPIs, as it provides the
 > best experience to users.
n317      <i>Note:</i> Your Extension will be passed faster and downln320      <em>Note:</em> Your Extension will be passed faster and dow
>oaded more if you have a good description and some screenshots of>nloaded more if you have a good description and some screenshots 
> the extension in action.>of the extension in action.
n323      On Windows, information about extensions can be added to thn326      On Windows, information about extensions can be added to th
>e registry, and the extensions will automatically be picked up th>e registry, and the extensions will automatically be picked up th
>e next time the applications starts. This allows application inst>e next time the applications starts. This allows application inst
>allers to easily add integration hooks as extensions. See <a href>allers to easily add integration hooks as extensions. See <a href
>="en/Adding_Extensions_using_the_Windows_Registry">Adding Extensi>="/en/Adding_Extensions_using_the_Windows_Registry" title="en/Add
>ons using the Windows Registry</a> for more information.>ing_Extensions_using_the_Windows_Registry">Adding Extensions usin
 >g the Windows Registry</a> for more information.
n332      <li>Modify attributes on the merge point, e.g. <tt>&lt;statn335      <li>Modify attributes on the merge point, e.g. <code>&lt;st
>usbar id="status-bar" hidden="true" /&gt;</tt> (hides the status >atusbar id="status-bar" hidden="true" /&gt;</code> (hides the sta
>bar)>tus bar)
n334      <li>Remove the merge point from the master document, e.g. <n337      <li>Remove the merge point from the master document, e.g. <
>tt>&lt;statusbar id="status-bar" removeelement="true" /&gt;</tt>>code>&lt;statusbar id="status-bar" removeelement="true" /&gt;</co
 >de>
n353      View the <a href="en/XUL">XUL</a> documentation for more ren356      View the <a href="/en/XUL" title="en/XUL">XUL</a> documenta
>sources for XUL developers.>tion for more resources for XUL developers.
n359      Defaults files that you use to seed a user's profile with sn362      Defaults files that you use to seed a user's profile with s
>hould be placed in <tt>defaults/</tt> under the root of your exte>hould be placed in <code>defaults/</code> under the root of your 
>nsion's folder hierarchy. Default preferences .js files should be>extension's folder hierarchy. Default preferences .js files shoul
> stored in <tt>defaults/preferences/</tt> - when you place them h>d be stored in <code>defaults/preferences/</code> - when you plac
>ere they will be automatically loaded by Firefox's preferences sy>e them here they will be automatically loaded by Firefox's prefer
>stem when it starts so that you can access them using the <a href>ences system when it starts so that you can access them using the
>="en/Preferences_API">Preferences API</a>.> <a href="/en/Preferences_API" title="en/Preferences_API">Prefere
 >nces API</a>.
n373      Firefox supports <a href="en/XPCOM">XPCOM</a> components inn376      Firefox supports <a href="/en/XPCOM" title="en/XPCOM">XPCOM
> extensions. You can create your own components easily in JavaScr></a> components in extensions. You can create your own components
>ipt or in C++ (using the <a href="en/Gecko_SDK">Gecko SDK</a>).> easily in JavaScript or in C++ (using the <a href="/en/Gecko_SDK
 >" title="en/Gecko_SDK">Gecko SDK</a>).
374    </p>
375    <p>377    </p>
378    <p>
376      Place all of your .js or .dll files in the <tt>components/<379      Place all of your .js or .dll files in the <code>components
>/tt> directory - they are automatically registered the first time>/</code> directory - they are automatically registered the first 
> Firefox runs after your extension is installed.>time Firefox runs after your extension is installed.
377    </p>
378    <p>380    </p>
381    <p>
379      For more information see <a href="en/How_to_Build_an_XPCOM_382      For more information see <a href="/en/How_to_Build_an_XPCOM
>Component_in_Javascript">How to Build an XPCOM Component in Javas>_Component_in_Javascript" title="en/How_to_Build_an_XPCOM_Compone
>cript</a>, <a href="en/How_to_build_a_binary_XPCOM_component_usin>nt_in_Javascript">How to Build an XPCOM Component in Javascript</
>g_Visual_Studio">How to build a binary XPCOM component using Visu>a>, <a href="/en/How_to_build_a_binary_XPCOM_component_using_Visu
>al Studio</a> and the <a href="en/Creating_XPCOM_Components">Crea>al_Studio" title="en/How_to_build_a_binary_XPCOM_component_using_
>ting XPCOM Components</a> book.>Visual_Studio">How to build a binary XPCOM component using Visual
 > Studio</a> and the <a href="/en/Creating_XPCOM_Components" title
 >="en/Creating_XPCOM_Components">Creating XPCOM Components</a> boo
 >k.
n391      <span class="comment">I should move the useful parts of thin394      <span class="comment">I should move the useful parts of thi
>s to the Command Line page. -Nickolay This is done by adding a co>s to the Command Line page. -Nickolay This is done by adding a co
>mponent containing the function... function NSGetModule(comMgr, f>mponent containing the function... function NSGetModule(comMgr, f
>ileSpec) { return myAppHandlerModule; } This function is run by f>ileSpec) { return myAppHandlerModule; } This function is run by f
>irefox each time firefox is started. Firefox registers the myAppH>irefox each time firefox is started. Firefox registers the myAppH
>andlerModule's by calling its 'registerSelf()'. Then it obtains t>andlerModule's by calling its 'registerSelf()'. Then it obtains t
>he myAppHandlerModule's handler factory via 'getClassObject()'. T>he myAppHandlerModule's handler factory via 'getClassObject()'. T
>he handler factory is then used to create the handle using its 'c>he handler factory is then used to create the handle using its 'c
>reateInstance(). Finally, the handle's 'handle(cmdline)' processe>reateInstance(). Finally, the handle's 'handle(cmdline)' processe
>s the command line cmdline's handleFlagWithParam() and handleFlag>s the command line cmdline's handleFlagWithParam() and handleFlag
>().</span> See <a href="en/Chrome/Command_Line">Chrome: Command L>().</span> See <a href="/en/Chrome/Command_Line" title="en/Chrome
>ine</a> and a <a class="external" href="http://forums.mozillazine>/Command_Line">Chrome: Command Line</a> and a <a class="external"
>.org/viewtopic.php?t=365297">forum discussion</a> for details.> href="http://forums.mozillazine.org/viewtopic.php?t=365297">foru
 >m discussion</a> for details.
n397      To support more than one language, you should separate strin400      To support more than one language, you should separate stri
>ngs from your content using <a href="en/XUL_Tutorial/Localization>ngs from your content using <a href="/en/XUL_Tutorial/Localizatio
>">entities</a> and <a href="en/XUL_Tutorial/Property_Files">strin>n" title="en/XUL_Tutorial/Localization">entities</a> and <a href=
>g bundles</a>. It is much easier to do this while you are develop>"/en/XUL_Tutorial/Property_Files" title="en/XUL_Tutorial/Property
>ing your extension, rather than come back and do it later!>_Files">string bundles</a>. It is much easier to do this while yo
 >u are developing your extension, rather than come back and do it 
 >later!
n406      To create localizable attribute values in XUL, you put the n409      To create localizable attribute values in XUL, you put the 
>values in a <tt>.ent</tt> (or a <tt>.dtd</tt>) file, which should>values in a <code>.ent</code> (or a <code>.dtd</code>) file, whic
> be placed in the locale directory and looks like this:>h should be placed in the locale directory and looks like this:
n416&lt;!DOCTYPE <b>window</b> SYSTEM "<a class=" external" href="chrn419&lt;!DOCTYPE <strong>window</strong> SYSTEM "<a class=" external"
>ome://packagename/locale/filename.ent" rel="freelink">chrome://pa> href="chrome://packagename/locale/filename.ent" rel="freelink">c
>ckagename/locale/filename.ent</a>"&gt;>hrome://packagename/locale/filename.ent</a>"&gt;
n419      where <code><b>window</b></code> is the <code><a href="en/Dn422      where <code><strong>window</strong></code> is the <code><a 
>OM/element.localName">localName</a></code> value of the root elem>href="/en/DOM/element.localName" title="en/DOM/element.localName"
>ent of the XUL document, and the value of the <tt>SYSTEM</tt> pro>>localName</a></code> value of the root element of the XUL docume
>perty is the chrome URI to the entity file. For our sample extens>nt, and the value of the <code>SYSTEM</code> property is the chro
>ion, the root element is <code><b>overlay</b></code>.>me URI to the entity file. For our sample extension, the root ele
 >ment is <code><strong>overlay</strong></code>.
n437      and then use <tt><a href="en/NsIStringBundleService">nsIStrn440      and then use <code><a href="/en/NsIStringBundleService" tit
>ingBundleService</a></tt>/<tt><a href="en/NsIStringBundle">nsIStr>le="en/NsIStringBundleService">nsIStringBundleService</a></code>/
>ingBundle</a></tt> or the <tt><a class="external" href="http://xu><code><a href="/en/nsIStringBundle" title="en/nsIStringBundle">ns
>lplanet.com/references/elemref/ref_stringbundle.html">&lt;stringb>IStringBundle</a></code> or the <code><a class="external" href="h
>undle&gt;</a></tt> tag to load the values into script.>ttp://xulplanet.com/references/elemref/ref_stringbundle.html">&lt
 >;stringbundle&gt;</a></code> tag to load the values into script.
n443      Use the <a href="en/DOM_Inspector">DOM Inspector</a> to insn446      Use the <a href="/en/DOM_Inspector" title="en/DOM_Inspector
>pect the browser window or any other XUL window you want to exten>">DOM Inspector</a> to inspect the browser window or any other XU
>d.>L window you want to extend.
444    </p>
445    <p>447    </p>
448    <p>
446      <b>Note:</b> <b>DOM Inspector</b> is not part of the <b>Sta449      <strong>Note:</strong> <strong>DOM Inspector</strong> is no
>ndard</b> Firefox installation. Since Firefox 3 Beta 4, the DOM I>t part of the <strong>Standard</strong> Firefox installation. Sin
>nspector has been available from <a class="link-https" href="http>ce Firefox 3 Beta 4, the DOM Inspector has been available from <a
>s://addons.mozilla.org/en-US/firefox/addon/6622">Firefox Add-ons<> class="link-https" href="https://addons.mozilla.org/en-US/firefo
>/a> as a standalone extension. For earlier versions, you must rei>x/addon/6622">Firefox Add-ons</a> as a standalone extension. For 
>nstall with the Custom install path and choose <b>DOM Inspector</>earlier versions, you must reinstall with the Custom install path
>b> (or <b>Developer Tools</b> in Firefox 1.5) if there is not a "> and choose <strong>DOM Inspector</strong> (or <strong>Developer 
>DOM Inspector" item in your browser's Tools menu.>Tools</strong> in Firefox 1.5) if there is not a "DOM Inspector" 
 >item in your browser's Tools menu.
n452      Use the DOM Inspector's right side panel to discover merge n455      Use the DOM Inspector's right side panel to discover merge 
>points with ids that you can use to insert your elements from ove>points with ids that you can use to insert your elements from ove
>rlays. If you cannot discover an element with an id that you can >rlays. If you cannot discover an element with an id that you can 
>merge into, you may need to attach a script in your overlay and i>merge into, you may need to attach a script in your overlay and i
>nsert your elements when the <tt>load</tt> event fires on the mas>nsert your elements when the <code>load</code> event fires on the
>ter XUL window.> master XUL window.
n458      <b>Analytical Tools for Debugging</b>n461      <strong>Analytical Tools for Debugging</strong>
459    </p>
460    <ul>462    </p>
463    <ul>
461      <li>The <a href="en/DOM_Inspector">DOM Inspector</a> - insp464      <li>The <a href="/en/DOM_Inspector" title="en/DOM_Inspector
>ect attributes, DOM structure, CSS style rules that are in effect>">DOM Inspector</a> - inspect attributes, DOM structure, CSS styl
> (e.g. find out why your style rules don't seem to be working for>e rules that are in effect (e.g. find out why your style rules do
> an element - an invaluable tool!)>n't seem to be working for an element - an invaluable tool!)
462      </li>
463      <li>465      </li>
464        <a href="en/Venkman">Venkman</a> - set breakpoints in Jav
>aScript and inspect call stacks 
465      </li>466      <li>
467        <a href="/en/Venkman" title="en/Venkman">Venkman</a> - se
 >t breakpoints in JavaScript and inspect call stacks
466      <li>468      </li>
467        <code><a href="en/Core_JavaScript_1.5_Reference/Objects/F
>unction/arguments/callee">arguments.callee</a>.<a href="en/Core_J 
>avaScript_1.5_Reference/Objects/Function/caller">caller</a></code 
>> in JavaScript - access a function's call stack 
468      </li>469      <li>
470        <code><a href="/en/Core_JavaScript_1.5_Reference/Function
 >s/arguments/callee" title="en/Core_JavaScript_1.5_Reference/Funct
 >ions/arguments/callee">arguments.callee</a>.<a href="/en/Core_Jav
 >aScript_1.5_Reference/Global_Objects/Function/caller" title="en/C
 >ore_JavaScript_1.5_Reference/Global_Objects/Function/caller">call
 >er</a></code> in JavaScript - access a function's call stack
469    </ul>471      </li>
470    <p>
471      <b>printf debugging</b>
472    </p>
473    <ul>472    </ul>
474      <li>Use <code><a href="en/DOM/window.dump">dump</a>("string473    <p>
>")</code> (see the link for details; this requires a bit of confi 
>guration to work properly) 
475      </li>474      <strong>printf debugging</strong>
476      <li>Use <code><a href="en/Components.utils.reportError">Com475    </p>
>ponents.utils.reportError()</a></code> or <code><a href="en/NsICo 
>nsoleService">nsIConsoleService</a></code> to log to the JavaScri 
>pt console 
477      </li>
478    </ul>476    <ul>
479    <p>477      <li>Use <code><a href="/en/DOM/window.dump" title="en/DOM/w
 >indow.dump">dump</a>("string")</code> (see the link for details; 
 >this requires a bit of configuration to work properly)
480      <b>Advanced debugging</b>478      </li>
481    </p>479      <li>Use <code><a href="/en/Components.utils.reportError" ti
 >tle="en/Components.utils.reportError">Components.utils.reportErro
 >r()</a></code> or <code><a href="/en/nsIConsoleService" title="en
 >/nsIConsoleService">nsIConsoleService</a></code> to log to the Ja
 >vaScript console
480      </li>
482    <ul>481    </ul>
482    <p>
483      <strong>Advanced debugging</strong>
484    </p>
485    <ul>
483      <li>Run a debug Firefox build and set breakpoints in Firefo486      <li>Run a debug Firefox build and set breakpoints in Firefo
>x itself, or your C++ components. For the experienced developer, >x itself, or your C++ components. For the experienced developer, 
>this is often the fastest way to diagnose a problem. See <a href=>this is often the fastest way to diagnose a problem. See <a href=
>"en/Build_Documentation">Build Documentation</a> and <a href="en/>"/en/Build_Documentation" title="en/Build_Documentation">Build Do
>Developing_Mozilla">Developing Mozilla</a> for more information.>cumentation</a> and <a href="/en/Developing_Mozilla" title="en/De
 >veloping_Mozilla">Developing Mozilla</a> for more information.
n485      <li>See <a href="en/Debugging_a_XULRunner_Application">Debun488      <li>See <a href="/en/Debugging_a_XULRunner_Application" tit
>gging a XULRunner Application</a> for more helpful tips.>le="en/Debugging_a_XULRunner_Application">Debugging a XULRunner A
 >pplication</a> for more helpful tips.
t502        <a href="en/Extension_FAQ">Extension FAQ</a>t505        <a href="/en/Extension_Frequently_Asked_Questions" title=
 >"en/Extension_Frequently_Asked_Questions">Extension FAQ</a>
503      </li>
504      <li>506      </li>
505        <a href="en/Extensions">Extensions</a>
506      </li>507      <li>
508        <a href="/en/Extensions" title="en/Extensions">Extensions
 ></a>
509      </li>
510    </ul>
511    <p>
507    </ul>{{ languages( { "de": "de/Erweiterung_erstellen", "es": 512      {{ languages( { "de": "de/Erweiterung_erstellen", "es": "es
>"es/Creando_una_extensi\u00f3n", "fr": "fr/Construire_une_extensi>/Creando_una_extensi\u00f3n", "fr": "fr/Construire_une_extension"
>on", "ja": "ja/Building_an_Extension", "pl": "pl/Tworzymy_rozszer>, "ja": "ja/Building_an_Extension", "pl": "pl/Tworzymy_rozszerzen
>zenie", "pt": "pt/Construir_uma_Extens\u00e3o", "it": "it/Svilupp>ie", "pt": "pt/Construir_uma_Extens\u00e3o", "it": "it/Sviluppare
>are_un\'Estensione", "ru": "ru/\u0421\u043e\u0437\u0434\u0430\u04>_un\'Estensione", "ru": "ru/\u0421\u043e\u0437\u0434\u0430\u043d\
>3d\u0438\u0435_\u0440\u0430\u0441\u0448\u0438\u0440\u0435\u043d\u>u0438\u0435_\u0440\u0430\u0441\u0448\u0438\u0440\u0435\u043d\u043
>0438\u044f", "zh-cn": "cn/\u6784\u5efa\u4e00\u4e2a\u6269\u5c55" }>8\u044f", "zh-cn": "cn/\u6784\u5efa\u4e00\u4e2a\u6269\u5c55" } ) 
> ) }}>}}
513    </p>

Back to History