Compare Revisions

Building an extension

Revision 33549:

Revision 33549 by Crookedfoot on

Revision 33550:

Revision 33550 by pajbj on

Building an extension
Building an extension
NeedsTechnicalReview, Extensions, Add-ons, NeedsEditorialReview, NeedsUpdate
NeedsTechnicalReview, Extensions, Add-ons, NeedsEditorialReview, NeedsUpdate

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 
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
>" rel="freelink"></a></b>&lt;/em:id&g>" rel="freelink"></a></strong>&l
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
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
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
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
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
94    &lt;em:homepageURL&gt;<b><span class="nowiki">http://www.exam97    &lt;em:homepageURL&gt;<strong><span class="nowiki">http://www
n100        <b><a class=" link-mailto" href="mailto:sample@example.nen103        <strong><a class=" link-mailto" href="mailto:sample@examp
>t" rel="freelink"></a></b> - the ID of the exte>" rel="freelink"></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 
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://">Profile Folder</a>, for e>tp://">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="" rel="freelink"><>mailto" href="" rel="freelink">sample@ex
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
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
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="">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 
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
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
>">&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://">&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://">Firefox Add-ons<> class="link-https" href="
>/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 
>> 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
 >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
 >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
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\
>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