Compare Revisions

Building an extension

Change Revisions

Revision 33515:

Revision 33515 by Coffee Shinobi on

Revision 33516:

Revision 33516 by Crazyalia94 on

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

Revision 33515
Revision 33516
n7    <h4 name="Introduction">n7    <p>
8      Introduction8      <b>--<a href="User:Crazyalia94">Crazyalia94</a> 15:49, 5 Ja
 >nuary 2008 (PST)=== Introduction ===</b>
9    </h4>9    </p>
n15        <b>Note</b> This tutorial is about building extensions fon15        <b>Note</b> This tutorial is about building extensions fo
>r Firefox 1.5 or 2.0. Other tutorials exist for building extensio>r Firefox 1.5 or 2.0. Other tutorials exist for building extensio
>ns for earlier versions of Firefox.>ns for earlier versions of Firefox<b><a href="File:en/Media_Galle
 >ry/Bold_text">Media:Bold text</a>--<a href="User:Crazyalia94">Cra
 >zyalia94</a> 15:49, 5 January 2008 (PST)</b>
n17    </div>n
18    <h4 name="Setting_up_the_Development_Environment">17      <h4 name="Setting_up_the_Development_Environment">
19      Setting up the Development Environment18        Setting up the Development Environment
20    </h4>19      </h4>
21    <p>20      <p>
22      Extensions are packaged and distributed in ZIP files, or <a21        Extensions are packaged and distributed in ZIP files, or 
> href="en/Bundles">Bundles</a>, with the <tt>xpi</tt> (<i>pronoun><a href="en/Bundles">Bundles</a>, with the <tt>xpi</tt> (<i>prono
>ced “zippy”</i>) file extension. The layout of content within the>unced “zippy”</i>) file extension. The layout of content within t
> XPI file is like so:>he XPI file is like so:
23    </p>22      </p>
24    <pre class="eval">23      <pre class="eval">
n38    <p>n37      <p>
39      Because of this, it is easiest if we lay out our source fil38        Because of this, it is easiest if we lay out our source f
>es in a similar fashion, unless you want to write some sort of Ma>iles in a similar fashion, unless you want to write some sort of 
>kefile or shell script to package and zip all of your files. Even>Makefile or shell script to package and zip all of your files. Ev
> if you are prepared to do that, testing is much simpler if you l>en if you are prepared to do that, testing is much simpler if you
>ay out your files like this because of a feature of the Add-on Sy> lay out your files like this because of a feature of the Add-on 
>stem provided by Firefox 1.5 and later.>System provided by Firefox 1.5 and later.
40    </p>39      </p>
41    <p>40      <p>
42      So let's get started. Create a folder for your extension so41        So let's get started. Create a folder for your extension 
>mewhere on your hard disk, e.g. <tt>C:\extensions\my_extension\</>somewhere on your hard disk, e.g. <tt>C:\extensions\my_extension\
>tt> or <tt>~/extensions/my_extension/</tt>. (note: use all lower ></tt> or <tt>~/extensions/my_extension/</tt>. (note: use all lowe
>case) Inside this folder create another folder called <tt>chrome<>r case) Inside this folder create another folder called <tt>chrom
>/tt>, inside the <tt>chrome</tt> folder create a folder called <t>e</tt>, inside the <tt>chrome</tt> folder create a folder called 
>t>content</tt>. (On Unix-like systems you can usually create both><tt>content</tt>. (On Unix-like systems you can usually create bo
> directories just by running <tt>mkdir -p chrome/content</tt> fro>th directories just by running <tt>mkdir -p chrome/content</tt> f
>m within the extension's root directory.)>rom within the extension's root directory.)
43    </p>42      </p>
44    <p>43      <p>
45      Inside the <b>root</b> of your extension folder, alongside 44        Inside the <b>root</b> of your extension folder, alongsid
>the <tt>chrome</tt> folder, create two new empty text files, one >e the <tt>chrome</tt> folder, create two new empty text files, on
>called <tt>chrome.manifest</tt> and the other called <tt>install.>e called <tt>chrome.manifest</tt> and the other called <tt>instal
46    </p>45      </p>
47    <p>46      <p>
48      For example:47        For example:
49    </p>48      </p>
50    <pre>49      <pre>
n56    <p>n55      <p>
57      More tips on setting up the development environment can be 56        More tips on setting up the development environment can b
>found in the article <a href="en/Setting_up_extension_development>e found in the article <a href="en/Setting_up_extension_developme
>_environment">Setting up extension development environment</a>.>nt_environment">Setting up extension development environment</a>.
58    </p>57      </p>
59    <h4 name="Create_the_Install_Manifest">58      <h4 name="Create_the_Install_Manifest">
60      Create the Install Manifest59        Create the Install Manifest
61    </h4>60      </h4>
62    <p>61      <p>
63      Open the file called <tt><a href="en/Install_Manifests">ins62        Open the file called <tt><a href="en/Install_Manifests">i
>tall.rdf</a></tt> that you created at the top of your extension's>nstall.rdf</a></tt> that you created at the top of your extension
> folder hierarchy and put this inside:>'s folder hierarchy and put this inside:
64    </p>63      </p>
65    <pre class="eval">64      <pre class="eval">
n94    <ul>n93      <ul>
95      <li>94        <li>
96        <b></b> - the ID of the extension. This95          <b></b> - the ID of the extension. Th
> is some value you come up with to identify your extension in ema>is is some value you come up with to identify your extension in e
>il address format (note that it should not be <i>your</i> email).>mail address format (note that it should not be <i>your</i> email
> Make it unique. You could also use a GUID. NOTE: This parameter >). Make it unique. You could also use a GUID. NOTE: This paramete
>MUST be in the format of an email address, although it does NOT h>r MUST be in the format of an email address, although it does NOT
>ave to be a valid email address. (example.example.example)> have to be a valid email address. (example.example.example)
97      </li>96        </li>
98      <li>Specify <tt>&lt;em:type&gt;2&lt;/em:type&gt;</tt> -- th97        <li>Specify <tt>&lt;em:type&gt;2&lt;/em:type&gt;</tt> -- 
>e 2 declares that it is installing an extension. If you were to i>the 2 declares that it is installing an extension. If you were to
>nstall a theme it would be 4 (see <a href="en/Install_Manifests#t> install a theme it would be 4 (see <a href="en/Install_Manifests
>ype">Install Manifests#type</a> for other type codes).>#type">Install Manifests#type</a> for other type codes).
99      </li>98        </li>
100      <li>99        <li>
101        <b>{ec8030f7-c20a-464f-9b0e-13a3a9e97384}</b> - Firefox's100          <b>{ec8030f7-c20a-464f-9b0e-13a3a9e97384}</b> - Firefox
> application ID.>'s application ID.
102      </li>101        </li>
103      <li>102        <li>
104        <b>1.5</b> - the minimum version of Firefox you're saying103          <b>1.5</b> - the minimum version of Firefox you're sayi
> this extension will work with. Set this as the minimum version y>ng this extension will work with. Set this as the minimum version
>ou're going to commit to testing and fixing bugs with.> you're going to commit to testing and fixing bugs with.
105      </li>104        </li>
106      <li>105        <li>
107        <b>2.0.0.*</b> - the maximum version of Firefox you're sa106          <b>2.0.0.*</b> - the maximum version of Firefox you're 
>ying this extension will work with. Set this to be no newer than >saying this extension will work with. Set this to be no newer tha
>the newest currently available version! In this case, "2.0.0.*" i>n the newest currently available version! In this case, "2.0.0.*"
>ndicates that the extension works with versions of Firefox 2.0.0.> indicates that the extension works with versions of Firefox 2.0.
>0 through 2.0.0.x.>0.0 through 2.0.0.x.
108      </li>107        </li>
109    </ul>108      </ul>
110    <p>109      <p>
111      Extensions designed to work with Firefox 1.5.0.x at the lat110        Extensions designed to work with Firefox 1.5.0.x at the l
>est should set the maximum version to "1.5.0.*".>atest should set the maximum version to "1.5.0.*".
112    </p>111      </p>
113    <p>112      <p>
114      See <a href="en/Install_Manifests">Install Manifests</a> fo113        See <a href="en/Install_Manifests">Install Manifests</a> 
>r a complete listing of the required and optional properties.>for a complete listing of the required and optional properties.
115    </p>114      </p>
116    <p>115      <p>
117      Save the file.116        Save the file.
118    </p>117      </p>
119    <h4 name="Extending_the_Browser_with_XUL">118      <h4 name="Extending_the_Browser_with_XUL">
120      Extending the Browser with XUL119        Extending the Browser with XUL
121    </h4>120      </h4>
122    <p>121      <p>
123      Firefox's user interface is written in XUL and JavaScript. 122        Firefox's user interface is written in XUL and JavaScript
><a href="en/XUL">XUL</a> is an XML grammar that provides user int>. <a href="en/XUL">XUL</a> is an XML grammar that provides user i
>erface widgets like buttons, menus, toolbars, trees etc. User act>nterface widgets like buttons, menus, toolbars, trees etc. User a
>ions are bound to functionality using JavaScript.>ctions are bound to functionality using JavaScript.
124    </p>123      </p>
125    <p>124      <p>
126      To extend the browser, we modify parts of the browser UI by125        To extend the browser, we modify parts of the browser UI 
> adding or modifying widgets. We add widgets by inserting new XUL>by adding or modifying widgets. We add widgets by inserting new X
> DOM elements into the browser window, and modify them by using s>UL DOM elements into the browser window, and modify them by using
>cript and attaching event handlers.> script and attaching event handlers.
127    </p>126      </p>
128    <p>127      <p>
129      The browser is implemented in a XUL file called <tt>browser128        The browser is implemented in a XUL file called <tt>brows
>.xul</tt> (<tt>$FIREFOX_INSTALL_DIR/chrome/browser.jar</tt> conta>er.xul</tt> (<tt>$FIREFOX_INSTALL_DIR/chrome/browser.jar</tt> con
>ins <tt>content/browser/browser.xul</tt>). In browser.xul we can >tains <tt>content/browser/browser.xul</tt>). In browser.xul we ca
>find the status bar, which looks something like this:>n find the status bar, which looks something like this:
130    </p>129      </p>
131    <pre class="eval">130      <pre class="eval">
n136    <p>n135      <p>
137      <tt>&lt;statusbar id="status-bar"&gt;</tt> is a "merge poin136        <tt>&lt;statusbar id="status-bar"&gt;</tt> is a "merge po
>t" for a XUL Overlay.>int" for a XUL Overlay.
138    </p>137      </p>
139    <h5 name="XUL_Overlays">138      <h5 name="XUL_Overlays">
140      XUL Overlays139        XUL Overlays
141    </h5>140      </h5>
142    <p>141      <p>
143      <a href="en/XUL_Overlays">XUL Overlays</a> are a way of att142        <a href="en/XUL_Overlays">XUL Overlays</a> are a way of a
>aching other UI widgets to a XUL document at run time. A XUL Over>ttaching other UI widgets to a XUL document at run time. A XUL Ov
>lay is a .xul file that specifies XUL fragments to insert at spec>erlay is a .xul file that specifies XUL fragments to insert at sp
>ific merge points within a "master" document. These fragments can>ecific merge points within a "master" document. These fragments c
> specify widgets to be inserted, removed, or modified.>an specify widgets to be inserted, removed, or modified.
144    </p>143      </p>
145    <p>144      <p>
146      <b>Example XUL Overlay Document</b>145        <b>Example XUL Overlay Document</b>
147    </p>146      </p>
148    <pre class="eval">147      <pre class="eval">
n157    <p>n156      <p>
158      The <tt>&lt;statusbar&gt;</tt> called <tt><b>status-bar</b>157        The <tt>&lt;statusbar&gt;</tt> called <tt><b>status-bar</
></tt> specifies the "merge point" within the browser window that >b></tt> specifies the "merge point" within the browser window tha
>we want to attach to.>t we want to attach to.
159    </p>158      </p>
160    <p>159      <p>
161      The <tt>&lt;statusbarpanel&gt;</tt> child is a new widget t160        The <tt>&lt;statusbarpanel&gt;</tt> child is a new widget
>hat we want to insert within the merge point.> that we want to insert within the merge point.
162    </p>161      </p>
163    <p>162      <p>
164      Take this sample code above and save it into a new file cal163        Take this sample code above and save it into a new file c
>led <tt><b>sample.xul</b></tt> inside the <tt>chrome/content</tt>>alled <tt><b>sample.xul</b></tt> inside the <tt>chrome/content</t
> folder you created.>t> folder you created.
165    </p>164      </p>
166    <p>165      <p>
167      For more information about merging widgets and modifying th166        For more information about merging widgets and modifying 
>e user interface using Overlays, see below.>the user interface using Overlays, see below.
168    </p>167      </p>
169    <h4 name="Chrome_URIs">168      <h4 name="Chrome_URIs">
170      Chrome URIs169        Chrome URIs
171    </h4>170      </h4>
172    <p>171      <p>
173      XUL files are part of "<a href="en/Chrome_Registration">Chr172        XUL files are part of "<a href="en/Chrome_Registration">C
>ome Packages</a>" - bundles of user interface components which ar>hrome Packages</a>" - bundles of user interface components which 
>e loaded via <tt>chrome://</tt> URIs. Rather than load the browse>are loaded via <tt>chrome://</tt> URIs. Rather than load the brow
>r from disk using a <tt>file://</tt> URI (since the location of F>ser from disk using a <tt>file://</tt> URI (since the location of
>irefox on the system can change from platform to platform and sys> Firefox on the system can change from platform to platform and s
>tem to system), Mozilla developers came up with a solution for cr>ystem to system), Mozilla developers came up with a solution for 
>eating URIs to XUL content that the installed application knows a>creating URIs to XUL content that the installed application knows
>bout.> about.
174    </p>173      </p>
175    <p>174      <p>
176      The browser window is: <tt>chrome://browser/content/browser175        The browser window is: <tt>chrome://browser/content/brows
>.xul</tt> Try typing this URL into the location bar in Firefox!>er.xul</tt> Try typing this URL into the location bar in Firefox!
177    </p>176      </p>
178    <p>177      <p>
179      Chrome URIs consist of several components:178        Chrome URIs consist of several components:
180    </p>179      </p>
181    <ul>180      <ul>
182      <li>Firstly, the <b>URI scheme</b> (<tt>chrome</tt>) which 181        <li>Firstly, the <b>URI scheme</b> (<tt>chrome</tt>) whic
>tells Firefox's networking library that this is a Chrome URI. It >h tells Firefox's networking library that this is a Chrome URI. I
>indicates that the content of the URI should be handled as a (<tt>t indicates that the content of the URI should be handled as a (<
>>chrome</tt>). Compare (<tt>chrome</tt>) to (<tt>http</tt>) which>tt>chrome</tt>). Compare (<tt>chrome</tt>) to (<tt>http</tt>) whi
> tells Firefox to treat the URI as a web page.>ch tells Firefox to treat the URI as a web page.
183      </li>182        </li>
184      <li>Secondly, a package name (in the example above, <tt><b>183        <li>Secondly, a package name (in the example above, <tt><
>browser</b></tt>) which identifies the bundle of user interface c>b>browser</b></tt>) which identifies the bundle of user interface
>omponents. This should be as unique to your application as possib> components. This should be as unique to your application as poss
>le to avoid collisions between extensions.>ible to avoid collisions between extensions.
185      </li>184        </li>
186      <li>Thirdly, the type of data being requested. There are th185        <li>Thirdly, the type of data being requested. There are 
>ree types: <tt>content</tt> (XUL, JavaScript, XBL bindings, etc. >three types: <tt>content</tt> (XUL, JavaScript, XBL bindings, etc
>that form the structure and behavior of an application UI), <tt>l>. that form the structure and behavior of an application UI), <tt
>ocale</tt> (DTD, .properties files etc that contain strings for t>>locale</tt> (DTD, .properties files etc that contain strings for
>he UI's <a href="en/Localization">localization</a>), and <tt>skin> the UI's <a href="en/Localization">localization</a>), and <tt>sk
></tt> (CSS and images that form the <a href="en/Theme">theme</a> >in</tt> (CSS and images that form the <a href="en/Theme">theme</a
>of the UI)>> of the UI)
187      </li>186        </li>
188      <li>Finally, the path of a file to load.187        <li>Finally, the path of a file to load.
189      </li>188        </li>
190    </ul>189      </ul>
191    <p>190      <p>
192      So, <tt>chrome://foo/skin/bar.png</tt> loads the file <tt>b191        So, <tt>chrome://foo/skin/bar.png</tt> loads the file <tt
>ar.png</tt> from the <tt>foo</tt> theme's <tt>skin</tt> section.>>bar.png</tt> from the <tt>foo</tt> theme's <tt>skin</tt> section
193    </p>192      </p>
194    <p>193      <p>
195      When you load content using a Chrome URI, Firefox uses the 194        When you load content using a Chrome URI, Firefox uses th
>Chrome Registry to translate these URIs into the actual source fi>e Chrome Registry to translate these URIs into the actual source 
>les on disk (or in JAR packages).>files on disk (or in JAR packages).
196    </p>195      </p>
197    <h4 name="Create_a_Chrome_Manifest">196      <h4 name="Create_a_Chrome_Manifest">
198      Create a Chrome Manifest197        Create a Chrome Manifest
199    </h4>198      </h4>
200    <p>199      <p>
201      For more information on Chrome Manifests and the properties200        For more information on Chrome Manifests and the properti
> they support, see the <a href="en/Chrome_Manifest">Chrome Manife>es they support, see the <a href="en/Chrome_Manifest">Chrome Mani
>st</a> Reference.>fest</a> Reference.
202    </p>201      </p>
203    <p>202      <p>
204      Open the file called <b>chrome.manifest</b> that you create203        Open the file called <b>chrome.manifest</b> that you crea
>d alongside the <tt>chrome</tt> directory at the root of your ext>ted alongside the <tt>chrome</tt> directory at the root of your e
>ension's source folder hierarchy.>xtension's source folder hierarchy.
205    </p>204      </p>
206    <p>205      <p>
207      Add in this code:206        Add in this code:
208    </p>207      </p>
209    <pre class="eval">208      <pre class="eval">
n212    <p>n211      <p>
213      (<b>Don't forget the trailing slash, "<tt>/</tt>"!</b> With212        (<b>Don't forget the trailing slash, "<tt>/</tt>"!</b> Wi
>out it, the package won't be registered.)>thout it, the package won't be registered.)
214    </p>213      </p>
215    <p>214      <p>
216      This specifies the:215        This specifies the:
217    </p>216      </p>
218    <ol>217      <ol>
219      <li>type of material within a chrome package218        <li>type of material within a chrome package
220      </li>219        </li>
221      <li>name of the chrome package (make sure you use all lower220        <li>name of the chrome package (make sure you use all low
>case characters for the package name ("sample") as Firefox/Thunde>ercase characters for the package name ("sample") as Firefox/Thun
>rbird doesn't support mixed/camel case in version 2 and earlier ->derbird doesn't support mixed/camel case in version 2 and earlier
> {{template.Bug(132183)}})> - {{template.Bug(132183)}})
222      </li>221        </li>
223      <li>location of the chrome packages' files222        <li>location of the chrome packages' files
224      </li>223        </li>
225    </ol>224      </ol>
226    <p>225      <p>
227      So, this line says that for a chrome package <b>sample</b>,226        So, this line says that for a chrome package <b>sample</b
> we can find its <b>content</b> files at the location <tt>chrome/>>, we can find its <b>content</b> files at the location <tt>chrom
>content</tt> which is a path relative to the location of <tt>chro>e/content</tt> which is a path relative to the location of <tt>ch
228    </p>227      </p>
229    <p>228      <p>
230      Note that content, locale and skin files must be kept insid229        Note that content, locale and skin files must be kept ins
>e folders called content, locale and skin within your <tt>chrome<>ide folders called content, locale and skin within your <tt>chrom
>/tt> subdirectory.>e</tt> subdirectory.
231    </p>230      </p>
232    <p>231      <p>
233      Save the file. When you launch Firefox with your extension,232        Save the file. When you launch Firefox with your extensio
> (later in this tutorial), this will register the chrome package.>n, (later in this tutorial), this will register the chrome packag
234    </p>233      </p>
235    <h4 name="Register_an_Overlay">234      <h4 name="Register_an_Overlay">
236      Register an Overlay235        Register an Overlay
237    </h4>236      </h4>
238    <p>237      <p>
239      You need Firefox to merge your overlay with the browser win238        You need Firefox to merge your overlay with the browser w
>dow whenever it displays one. So add this line to your <tt>chrome>indow whenever it displays one. So add this line to your <tt>chro
>.manifest</tt> file:>me.manifest</tt> file:
240    </p>239      </p>
241    <pre class="eval">240      <pre class="eval">
n244    <p>n243      <p>
245      This tells Firefox to merge <tt>sample.xul</tt> into <tt>br244        This tells Firefox to merge <tt>sample.xul</tt> into <tt>
>owser.xul</tt> when <tt>browser.xul</tt> loads.>browser.xul</tt> when <tt>browser.xul</tt> loads.
246    </p>245      </p>
247    <h4 name="Test">246      <h4 name="Test">
248      Test247        Test
249    </h4>248      </h4>
250    <p>249      <p>
251      First, we need to tell Firefox about your extension. In the250        First, we need to tell Firefox about your extension. In t
> bad old days of Firefox 1.0 this meant packaging your extension >he bad old days of Firefox 1.0 this meant packaging your extensio
>as a XPI and installing it through the user interface, which was >n as a XPI and installing it through the user interface, which wa
>a real pain. Now, it's much simpler.>s a real pain. Now, it's much simpler.
252    </p>251      </p>
253    <ol>252      <ol>
254      <li>Open your <a class="external" href="http://kb.mozillazi253        <li>Open your <a class="external" href="http://kb.mozilla
>">Profile Folder</a>>">Profile Folder</a>
255      </li>254        </li>
256      <li>Open the <b>extensions</b> folder (create it if it does255        <li>Open the <b>extensions</b> folder (create it if it do
>n't exist)>esn't exist)
257      </li>256        </li>
258      <li>Create a new text file, and put the path to your extens257        <li>Create a new text file, and put the path to your exte
>ion folder inside, e.g. <tt>C:\extensions\my_extension\</tt> or <>nsion folder inside, e.g. <tt>C:\extensions\my_extension\</tt> or
>tt>~/extensions/my_extension/</tt>. Save the file with the id of > <tt>~/extensions/my_extension/</tt>. Save the file with the id o
>your extension as its name, e.g. <tt></tt>>f your extension as its name, e.g. <tt></tt>
259      </li>258        </li>
260    </ol>259      </ol>
261    <p>260      <p>
262      (<b>Don't forget the trailing slash, "<tt>/</tt>"!</b> With261        (<b>Don't forget the trailing slash, "<tt>/</tt>"!</b> Wi
>out it, the extension won't get registered.)>thout it, the extension won't get registered.)
263    </p>262      </p>
264    <p>263      <p>
265      <span class="comment">This is very unclear--it seems at fir264        <span class="comment">This is very unclear--it seems at f
>st as if you're asking us to create an extensions folder inside t>irst as if you're asking us to create an extensions folder inside
>he Profile Folder. We're creating the text file in the extension > the Profile Folder. We're creating the text file in the extensio
>folder, right? So why do we need to open the profile folder? Can >n folder, right? So why do we need to open the profile folder? Ca
>someone please clarify this?</span>>n someone please clarify this?</span>
266    </p>265      </p>
267    <p>266      <p>
268      Now you're ready to test your extension!267        Now you're ready to test your extension!
269    </p>268      </p>
270    <p>269      <p>
271      Start Firefox. Firefox will detect the text link to your ex270        Start Firefox. Firefox will detect the text link to your 
>tension directory and install the Extension. When the browser win>extension directory and install the Extension. When the browser w
>dow appears you should see the text "Hello, World!" on the right >indow appears you should see the text "Hello, World!" on the righ
>side of the status bar panel.>t side of the status bar panel.
272    </p>271      </p>
273    <p>272      <p>
274      You can now go back and make changes to the .xul file, clos273        You can now go back and make changes to the .xul file, cl
>e and restart Firefox and they should appear.>ose and restart Firefox and they should appear.
275    </p>274      </p>
276    <p>275      <p>
277      <span class="comment">These don't actually match the descri276        <span class="comment">These don't actually match the desc
>bed extension and confuse people. -Nickolay CENTER&gt; {{mediawik>ribed extension and confuse people. -Nickolay CENTER&gt; {{mediaw
>i.internal('Image:Helloworld_tools_menu.PNG', "en")}} {{mediawiki>iki.internal('Image:Helloworld_tools_menu.PNG', "en")}} {{mediawi
>.internal('Image:Helloworld_extensions_wnd.PNG', "en")}} &lt;/CEN>ki.internal('Image:Helloworld_extensions_wnd.PNG', "en")}} &lt;/C
278    </p>277      </p>
279    <div class="note">278      <div class="note">
280      <p>279        <p>
281        <b>Important</b> For those of you who are just just start280          <b>Important</b> For those of you who are just just sta
>ing out with programming, please note that the files "chrome.mani>rting out with programming, please note that the files "
>fest", "sample.xul" and "install.rdf" are usually default saved w>nifest", "sample.xul" and "install.rdf" are usually default saved
>ith ANSI encoding. THIS WILL NOT WORK, you have to change the enc> with ANSI encoding. THIS WILL NOT WORK, you have to change the e
>oding to Unicode because if you save it with ANSI encoding, it wi>ncoding to Unicode because if you save it with ANSI encoding, it 
>ll save the file as, "install.rdf.txt".>will save the file as, "install.rdf.txt".
282      </p>281        </p>
283      <p>282        <p>
284        <b>???</b> Is it really the case? I checked other extenti283          <b>???</b> Is it really the case? I checked other exten
>ons and they are encoded with ANSI. I think the original author o>tions and they are encoded with ANSI. I think the original author
>f this warning is confused with a "feature" of <i>notepad.exe</i>> of this warning is confused with a "feature" of <i>notepad.exe</
>, the advanced Windows editor&nbsp;;), which automatically adds <>i>, the advanced Windows editor&nbsp;;), which automatically adds
>i>*.txt</i> to filenames.> <i>*.txt</i> to filenames.
285      </p>284        </p>
286      <p>285        <p>
287        <b>{{mediawiki.external('Edit by Coffee Shinobi')}}</b> A286          <b>{{mediawiki.external('Edit by Coffee Shinobi')}}</b>
>s a second option, the file can indeed be saved in ANSI encoding > As a second option, the file can indeed be saved in ANSI encodin
>by selecting ALL FILES in the "save as" drop-down menu (default i>g by selecting ALL FILES in the "save as" drop-down menu (default
>s text documents). By doing this, <i>*.txt</i> will not be added > is text documents). By doing this, <i>*.txt</i> will not be adde
>to the end of your filename.>d to the end of your filename.
288      </p>287        </p>
289    </div>288      </div>
290    <h4 name="Package">289      <h4 name="Package">
291      Package290        Package
292    </h4>291      </h4>
293    <p>292      <p>
294      Now that your extension works, you can <a href="en/Extensio293        Now that your extension works, you can <a href="en/Extens
>n_Packaging">package</a> it for deployment and installation.>ion_Packaging">package</a> it for deployment and installation.
295    </p>294      </p>
296    <p>295      <p>
297      Zip up the <b>contents</b> of your extension's folder (not 296        Zip up the <b>contents</b> of your extension's folder (no
>the extension folder itself), and rename the zip file to have a .>t the extension folder itself), and rename the zip file to have a
>xpi extension. In Windows XP, you can do this easily by selecting> .xpi extension. In Windows XP, you can do this easily by selecti
> all the files and subfolders in your extension folder, right cli>ng all the files and subfolders in your extension folder, right c
>ck and choose "Send To -&gt; Compressed (Zipped) Folder". A .zip >lick and choose "Send To -&gt; Compressed (Zipped) Folder". A .zi
>file will be created for you. Just rename it and you're done!>p file will be created for you. Just rename it and you're done!
298    </p>297      </p>
299    <p>298      <p>
300      On Mac OS X, you can right-click on the <b>contents</b> of 299        On Mac OS X, you can right-click on the <b>contents</b> o
>the extension's folder and choose "Create Archive of..." to make >f the extension's folder and choose "Create Archive of..." to mak
>the zip file. However, since Mac OS X adds hidden files to folder>e the zip file. However, since Mac OS X adds hidden files to fold
>s in order to track file metadata, you should instead use the Ter>ers in order to track file metadata, you should instead use the T
>minal, delete the hidden files (whose names begin with a period),>erminal, delete the hidden files (whose names begin with a period
> and then use the <tt>zip</tt> command on the command line to cre>), and then use the <tt>zip</tt> command on the command line to c
>ate the zip file.>reate the zip file.
301    </p>300      </p>
302    <p>301      <p>
303      On Linux, you would likewise use the command-line Zip tool.302        On Linux, you would likewise use the command-line Zip too
304    </p>303      </p>
305    <p>304      <p>
306      If you have the 'Extension Builder' extension installed it 305        If you have the 'Extension Builder' extension installed i
>can compile the .xpi file for you (Tools -&gt; Extension Develope>t can compile the .xpi file for you (Tools -&gt; Extension Develo
>r -&gt; Extension Builder). Merely navigate to the directory wher>per -&gt; Extension Builder). Merely navigate to the directory wh
>e your extension is (install.rdf etc.), and hit the Build Extensi>ere your extension is (install.rdf etc.), and hit the Build Exten
>on button. This extension has a slew of tools to make development>sion button. This extension has a slew of tools to make developme
> easier.>nt easier.
307    </p>306      </p>
308    <p>307      <p>
309      Now upload the .xpi file to your server, making sure it's s308        Now upload the .xpi file to your server, making sure it's
>erved as <tt>application/x-xpinstall</tt>. You can link to it and> served as <tt>application/x-xpinstall</tt>. You can link to it a
> allow people to download and install it in Firefox. For the purp>nd allow people to download and install it in Firefox. For the pu
>oses of just testing our .xpi file we can just drag it into the e>rposes of just testing our .xpi file we can just drag it into the
>xtensions window via Tools -&gt; Extensions, or Tools -&gt; Add-o> extensions window via Tools -&gt; Extensions, or Tools -&gt; Add
>ns in FireFox 2.>-ons in FireFox 2.
310    </p>309      </p>
311    <h5 name="Installing_from_a_web_page">310      <h5 name="Installing_from_a_web_page">
312      Installing from a web page311        Installing from a web page
313    </h5>312      </h5>
314    <p>313      <p>
315      There are a variety of ways you can install extensions from314        There are a variety of ways you can install extensions fr
> web pages, including direct linking to the XPI files and using t>om web pages, including direct linking to the XPI files and using
>he InstallTrigger object. Extension and web authors are encourage> the InstallTrigger object. Extension and web authors are encoura
>d to use the <a href="en/Installing_Extensions_and_Themes_From_We>ged to use the <a href="en/Installing_Extensions_and_Themes_From_
>b_Pages">InstallTrigger method</a> to install XPIs, as it provide>Web_Pages">InstallTrigger method</a> to install XPIs, as it provi
>s the best experience to users.>des the best experience to users.
316    </p>315      </p>
317    <h5 name="">316      <h5 name="">
318      Using addons.mozilla.org317        Using
319    </h5>318      </h5>
320    <p>319      <p>
321      Mozilla Update is a distribution site where you can host yo320        Mozilla Update is a distribution site where you can host 
>ur extension for free. Your extension will be hosted on Mozilla's>your extension for free. Your extension will be hosted on Mozilla
> mirror network to guarantee your download even though it might b>'s mirror network to guarantee your download even though it might
>e very popular. Mozilla's site also provides users easier install> be very popular. Mozilla's site also provides users easier insta
>ation, and will automatically make your newer versions available >llation, and will automatically make your newer versions availabl
>to users of your existing versions when you upload them. In addit>e to users of your existing versions when you upload them. In add
>ion Mozilla Update allows users to comment and provide feedback o>ition Mozilla Update allows users to comment and provide feedback
>n your extension. It is highly recommended that you use Mozilla U> on your extension. It is highly recommended that you use Mozilla
>pdate to distribute your extensions!> Update to distribute your extensions!
322    </p>321      </p>
323    <p>322      <p>
324      Visit to create an ac323        Visit to create an 
>count and begin distributing your extensions!>account and begin distributing your extensions!
325    </p>324      </p>
326    <p>325      <p>
327      <i>Note:</i> Your Extension will be passed faster and downl326        <i>Note:</i> 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.
328    </p>327      </p>
329    <h5 name="Registering_Extensions_in_the_Windows_Registry">328      <h5 name="Registering_Extensions_in_the_Windows_Registry">
330      Registering Extensions in the Windows Registry329        Registering Extensions in the Windows Registry
331    </h5>330      </h5>
332    <p>331      <p>
333      On Windows, information about extensions can be added to th332        On Windows, information about extensions can be added to 
>e registry, and the extensions will automatically be picked up th>the registry, and the extensions will automatically be picked up 
>e next time the applications starts. This allows application inst>the next time the applications starts. This allows application in
>allers to easily add integration hooks as extensions. See <a href>stallers to easily add integration hooks as extensions. See <a hr
>="en/Adding_Extensions_using_the_Windows_Registry">Adding Extensi>ef="en/Adding_Extensions_using_the_Windows_Registry">Adding Exten
>ons using the Windows Registry</a> for more information.>sions using the Windows Registry</a> for more information.
334    </p>333      </p>
335    <h4 name="More_on_XUL_Overlays">334      <h4 name="More_on_XUL_Overlays">
336      More on XUL Overlays335        More on XUL Overlays
337    </h4>336      </h4>
338    <p>337      <p>
339      In addition to appending UI widgets to the merge point, you338        In addition to appending UI widgets to the merge point, y
> can use XUL fragments within Overlays to:>ou can use XUL fragments within Overlays to:
340    </p>339      </p>
341    <ul>340      <ul>
342      <li>Modify attributes on the merge point, e.g. <tt>&lt;stat341        <li>Modify attributes on the merge point, e.g. <tt>&lt;st
>usbar id="status-bar" hidden="true"/&gt;</tt> (hides the status b>atusbar id="status-bar" hidden="true"/&gt;</tt> (hides the status
>ar)> bar)
343      </li>342        </li>
344      <li>Remove the merge point from the master document, e.g. <343        <li>Remove the merge point from the master document, e.g.
>tt>&lt;statusbar id="status-bar" removeelement="true"/&gt;</tt>> <tt>&lt;statusbar id="status-bar" removeelement="true"/&gt;</tt>
345      </li>344        </li>
346      <li>Control the position of the inserted widgets:345        <li>Control the position of the inserted widgets:
347      </li>346        </li>
348    </ul>347      </ul>
349    <pre class="eval">348      <pre class="eval">
n356    <h4 name="Creating_New_User_Interface_Components">n355      <h4 name="Creating_New_User_Interface_Components">
357      Creating New User Interface Components356        Creating New User Interface Components
358    </h4>357      </h4>
359    <p>358      <p>
360      You can create your own windows and dialog boxes as separat359        You can create your own windows and dialog boxes as separ
>e .xul files, provide functionality by implementing user actions >ate .xul files, provide functionality by implementing user action
>in .js files, using DOM methods to manipulate UI widgets. You can>s in .js files, using DOM methods to manipulate UI widgets. You c
> use style rules in .css files to attach images, set colors etc.>an use style rules in .css files to attach images, set colors etc
361    </p>360      </p>
362    <p>361      <p>
363      View the <a href="en/XUL">XUL</a> documentation for more re362        View the <a href="en/XUL">XUL</a> documentation for more 
>sources for XUL developers.>resources for XUL developers.
364    </p>363      </p>
365    <h4 name="Defaults_Files">364      <h4 name="Defaults_Files">
366      Defaults Files365        Defaults Files
367    </h4>366      </h4>
368    <p>367      <p>
369      Defaults files that you use to seed a user's profile with s368        Defaults files that you use to seed a user's profile with
>hould be placed in <tt>defaults/</tt> under the root of your exte> should be placed in <tt>defaults/</tt> under the root of your ex
>nsion's folder hierarchy. Default preferences .js files should be>tension's folder hierarchy. Default preferences .js files should 
> stored in <tt>defaults/preferences/</tt> - when you place them h>be stored in <tt>defaults/preferences/</tt> - when you place them
>ere they will be automatically loaded by Firefox's preferences sy> here they will be automatically loaded by Firefox's preferences 
>stem when it starts so that you can access them using the <a href>system when it starts so that you can access them using the <a hr
>="en/Preferences_API">Preferences API</a>.>ef="en/Preferences_API">Preferences API</a>.
370    </p>369      </p>
371    <p>370      <p>
372      An example default preference file:371        An example default preference file:
373    </p>372      </p>
374    <pre class="eval">373      <pre class="eval">
n379    <h4 name="XPCOM_Components">n378      <h4 name="XPCOM_Components">
380      XPCOM Components379        XPCOM Components
381    </h4>380      </h4>
382    <p>381      <p>
383      Firefox supports <a href="en/XPCOM">XPCOM</a> components in382        Firefox supports <a href="en/XPCOM">XPCOM</a> components 
> extensions. You can create your own components easily in JavaScr>in extensions. You can create your own components easily in JavaS
>ipt or in C++ (using the <a href="en/Gecko_SDK">Gecko SDK</a>).>cript or in C++ (using the <a href="en/Gecko_SDK">Gecko SDK</a>).
384    </p>383      </p>
385    <p>384      <p>
386      Place all of your .js or .dll files in the <tt>components/<385        Place all of your .js or .dll files in the <tt>components
>/tt> directory - they are automatically registered the first time>/</tt> directory - they are automatically registered the first ti
> Firefox runs after your extension is installed.>me Firefox runs after your extension is installed.
387    </p>386      </p>
388    <p>387      <p>
389      For more information see <a href="en/How_to_Build_an_XPCOM_388        For more information see <a href="en/How_to_Build_an_XPCO
>Component_in_Javascript">How to Build an XPCOM Component in Javas>M_Component_in_Javascript">How to Build an XPCOM Component in Jav
>cript</a>, <a href="en/How_to_build_a_binary_XPCOM_component_usin>ascript</a>, <a href="en/How_to_build_a_binary_XPCOM_component_us
>g_Visual_Studio">How to build a binary XPCOM component using Visu>ing_Visual_Studio">How to build a binary XPCOM component using Vi
>al Studio</a> and the <a href="en/Creating_XPCOM_Components">Crea>sual Studio</a> and the <a href="en/Creating_XPCOM_Components">Cr
>ting XPCOM Components</a> book.>eating XPCOM Components</a> book.
390    </p>389      </p>
391    <h5 name="Application_Command_Line">390      <h5 name="Application_Command_Line">
392      Application Command Line391        Application Command Line
393    </h5>392      </h5>
394    <p>393      <p>
395      One of the possible uses of custom XPCOM components is addi394        One of the possible uses of custom XPCOM components is ad
>ng a command line handler to Firefox or Thunderbird. You can use >ding a command line handler to Firefox or Thunderbird. You can us
>this technique to run your extension as an application:>e this technique to run your extension as an application:
396    </p>395      </p>
397    <pre class="eval">396      <pre class="eval">
n400    <p>n399      <p>
401      <span class="comment">I should move the useful parts of thi400        <span class="comment">I should move the useful parts of t
>s to the Command Line page. -Nickolay This is done by adding a co>his to the Command Line page. -Nickolay This is done by adding a 
>mponent containing the function... function NSGetModule(comMgr, f>component containing the function... function NSGetModule(comMgr,
>ileSpec) { return myAppHandlerModule; } This function is run by f> fileSpec) { return myAppHandlerModule; } This function is run by
>irefox each time firefox is started. Firefox registers the myAppH> firefox each time firefox is started. Firefox registers the myAp
>andlerModule's by calling its 'registerSelf()'. Then it obtains t>pHandlerModule's by calling its 'registerSelf()'. Then it obtains
>he myAppHandlerModule's handler factory via 'getClassObject()'. T> the myAppHandlerModule's handler factory via 'getClassObject()'.
>he handler factory is then used to create the handle using its 'c> The handler factory is then used to create the handle using its 
>reateInstance(). Finally, the handle's 'handle(cmdline)' processe>'createInstance(). Finally, the handle's 'handle(cmdline)' proces
>s the command line cmdline's handleFlagWithParam() and handleFlag>ses the command line cmdline's handleFlagWithParam() and handleFl
>().</span> See <a href="en/Chrome/Command_Line">Chrome: Command L>ag().</span> See <a href="en/Chrome/Command_Line">Chrome: Command
>ine</a> and a <a class="external" href="http://forums.mozillazine> Line</a> and a <a class="external" href="http://forums.mozillazi
>.org/viewtopic.php?t=365297">forum discussion</a> for details.>">forum discussion</a> for details.
402    </p>401      </p>
403    <h4 name="Localization">402      <h4 name="Localization">
404      Localization403        Localization
405    </h4>404      </h4>
406    <p>405      <p>
407      To support more than one language, you should separate stri406        To support more than one language, you should separate st
>ngs from your content using <a href="en/XUL_Tutorial/Localization>rings from your content using <a href="en/XUL_Tutorial/Localizati
>">entities</a> and <a href="en/XUL_Tutorial/Property_Files">strin>on">entities</a> and <a href="en/XUL_Tutorial/Property_Files">str
>g bundles</a>. It is much easier to do this while you are develop>ing bundles</a>. It is much easier to do this while you are devel
>ing your extension, rather than come back and do it later!>oping your extension, rather than come back and do it later!
408    </p>407      </p>
409    <p>408      <p>
410      Localization information is stored in the locale directory 409        Localization information is stored in the locale director
>for the extension. For example, to add a locale to our sample ext>y for the extension. For example, to add a locale to our sample e
>ension, create a directory named "locale" in chrome (where the "c>xtension, create a directory named "locale" in chrome (where the 
>ontent" directory is located) and add the following line to the c>"content" directory is located) and add the following line to the
>hrome.manifest file:> chrome.manifest file:
411    </p>410      </p>
412    <pre class="eval">411      <pre class="eval">
n415    <p>n414      <p>
416      To create localizable attribute values in XUL, you put the 415        To create localizable attribute values in XUL, you put th
>values in a <tt>.ent</tt> (or a <tt>.dtd</tt>) file, which should>e values in a <tt>.ent</tt> (or a <tt>.dtd</tt>) file, which shou
> be placed in the locale directory and looks like this:>ld be placed in the locale directory and looks like this:
417    </p>416      </p>
418    <pre class="eval">417      <pre class="eval">
n422    <p>n421      <p>
423      And then include it at the top of your XUL document (but un422        And then include it at the top of your XUL document (but 
>derneath the "&lt;?xml version"1.0"?&gt;") like so:>underneath the "&lt;?xml version"1.0"?&gt;") like so:
424    </p>423      </p>
425    <pre class="eval">424      <pre class="eval">
n428    <p>n427      <p>
429      where <code><b>window</b></code> is the <code><a href="en/D428        where <code><b>window</b></code> is the <code><a href="en
>OM/element.localName">localName</a></code> value of the root elem>/DOM/element.localName">localName</a></code> value of the root el
>ent of the XUL document, and the value of the <tt>SYSTEM</tt> pro>ement of the XUL document, and the value of the <tt>SYSTEM</tt> p
>perty is the chrome URI to the entity file. For our sample extens>roperty is the chrome URI to the entity file. For our sample exte
>ion, the root element is <code><b>overlay</b></code>.>nsion, the root element is <code><b>overlay</b></code>.
430    </p>429      </p>
431    <p>430      <p>
432      To use the entities, modify your XUL to look like this:431        To use the entities, modify your XUL to look like this:
433    </p>432      </p>
434    <pre class="eval">433      <pre class="eval">
n437    <p>n436      <p>
438      The Chrome Registry will make sure the entity file is loade437        The Chrome Registry will make sure the entity file is loa
>d from the localization bundle corresponding to the selected loca>ded from the localization bundle corresponding to the selected lo
439    </p>438      </p>
440    <p>439      <p>
441      For strings that you use in script, create a .properties fi440        For strings that you use in script, create a .properties 
>le, a text file that has a string on each line in this format:>file, a text file that has a string on each line in this format:
442    </p>441      </p>
443    <pre class="eval">442      <pre class="eval">
t446    <p>t445      <p>
447      and then use <tt><a href="en/NsIStringBundleService">nsIStr446        and then use <tt><a href="en/NsIStringBundleService">nsIS
>ingBundleService</a></tt>/<tt><a href="en/NsIStringBundle">nsIStr>tringBundleService</a></tt>/<tt><a href="en/NsIStringBundle">nsIS
>ingBundle</a></tt> or the <tt><a class="external" href="http://xu>tringBundle</a></tt> or the <tt><a class="external" href="http://
>undle&gt;</a></tt> tag to load the values into script.>gbundle&gt;</a></tt> tag to load the values into script.
448    </p>447      </p>
449    <h4 name="Understanding_the_Browser">448      <h4 name="Understanding_the_Browser">
450      Understanding the Browser449        Understanding the Browser
451    </h4>450      </h4>
452    <p>451      <p>
453      Use the <a href="en/DOM_Inspector">DOM Inspector</a> (not p452        Use the <a href="en/DOM_Inspector">DOM Inspector</a> (not
>art of the <b>Standard</b> Firefox installation, you must reinsta> part of the <b>Standard</b> Firefox installation, you must reins
>ll with the Custom install path and choose <b>Developer Tools</b>>tall with the Custom install path and choose <b>Developer Tools</
> if there is not a "DOM Inspector" item in your browser's Tools m>b> if there is not a "DOM Inspector" item in your browser's Tools
>enu) to inspect the browser window or any other XUL window you wa> menu) to inspect the browser window or any other XUL window you 
>nt to extend.>want to extend.
454    </p>453      </p>
455    <p>454      <p>
456      Use the point-and-click node finder button at the top left 455        Use the point-and-click node finder button at the top lef
>of the DOM Inspector's toolbar to click on a node in the XUL wind>t of the DOM Inspector's toolbar to click on a node in the XUL wi
>ow visually to select it. When you do this the DOM inspector's DO>ndow visually to select it. When you do this the DOM inspector's 
>M hierarchy tree view will jump to the node you clicked on.>DOM hierarchy tree view will jump to the node you clicked on.
457    </p>456      </p>
458    <p>457      <p>
459      Use the DOM Inspector's right side panel to discover merge 458        Use the DOM Inspector's right side panel to discover merg
>points with ids that you can use to insert your elements from ove>e points with ids that you can use to insert your elements from o
>rlays. If you cannot discover an element with an id that you can >verlays. If you cannot discover an element with an id that you ca
>merge into, you may need to attach a script in your overlay and i>n merge into, you may need to attach a script in your overlay and
>nsert your elements when the <tt>load</tt> event fires on the mas> insert your elements when the <tt>load</tt> event fires on the m
>ter XUL window.>aster XUL window.
460    </p>459      </p>
461    <h4 name="Debugging_Extensions">460      <h4 name="Debugging_Extensions">
462      Debugging Extensions461        Debugging Extensions
463    </h4>462      </h4>
464    <p>463      <p>
465      <b>Analytical Tools for Debugging</b>464        <b>Analytical Tools for Debugging</b>
466    </p>465      </p>
467    <ul>466      <ul>
468      <li>The <a href="en/DOM_Inspector">DOM Inspector</a> - insp467        <li>The <a href="en/DOM_Inspector">DOM Inspector</a> - in
>ect attributes, DOM structure, CSS style rules that are in effect>spect attributes, DOM structure, CSS style rules that are in effe
> (e.g. find out why your style rules don't seem to be working for>ct (e.g. find out why your style rules don't seem to be working f
> an element - an invaluable tool!)>or an element - an invaluable tool!)
469      </li>468        </li>
470      <li>469        <li>
471        <a href="en/Venkman">Venkman</a> - set breakpoints in Jav470          <a href="en/Venkman">Venkman</a> - set breakpoints in J
>aScript and inspect call stacks>avaScript and inspect call stacks
472      </li>471        </li>
473      <li>472        <li>
474        <code><a href="en/Core_JavaScript_1.5_Reference/Objects/F473          <code><a href="en/Core_JavaScript_1.5_Reference/Objects
>unction/arguments/callee">arguments.callee</a>.<a href="en/Core_J>/Function/arguments/callee">arguments.callee</a>.<a href="en/Core
>> in JavaScript - access a function's call stack>de> in JavaScript - access a function's call stack
475      </li>474        </li>
476    </ul>475      </ul>
477    <p>476      <p>
478      <b>printf debugging</b>477        <b>printf debugging</b>
479    </p>478      </p>
480    <ul>479      <ul>
481      <li>Run Firefox with <tt>-console</tt> at the command line 480        <li>Run Firefox with <tt>-console</tt> at the command lin
>and use <code><a href="en/DOM/window.dump">dump</a>("string")</co>e and use <code><a href="en/DOM/window.dump">dump</a>("string")</
>de> (see the link for details)>code> (see the link for details)
482      </li>481        </li>
483      <li>Use <code><a href="en/NsIConsoleService">nsIConsoleServ482        <li>Use <code><a href="en/NsIConsoleService">nsIConsoleSe
>ice</a></code> to log to the JavaScript console>rvice</a></code> to log to the JavaScript console
484      </li>483        </li>
485    </ul>484      </ul>
486    <p>485      <p>
487      <b>Advanced debugging</b>486        <b>Advanced debugging</b>
488    </p>487      </p>
489    <ul>488      <ul>
490      <li>Run a debug Firefox build and set breakpoints in Firefo489        <li>Run a debug Firefox build and set breakpoints in Fire
>x itself, or your C++ components. For the experienced developer, >fox 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 hre
>"en/Build_Documentation">Build Documentation</a> and <a href="en/>f="en/Build_Documentation">Build Documentation</a> and <a href="e
>Developing_Mozilla">Developing Mozilla</a> for more information.>n/Developing_Mozilla">Developing Mozilla</a> for more information
491      </li>490        </li>
492      <li>See <a href="en/Debugging_a_XULRunner_Application">Debu491        <li>See <a href="en/Debugging_a_XULRunner_Application">De
>gging a XULRunner Application</a> for more helpful tips.>bugging a XULRunner Application</a> for more helpful tips.
493      </li>492        </li>
494    </ul>493      </ul>
495    <h3 name="Quick_Start">494      <h3 name="Quick_Start">
496      Quick Start495        Quick Start
497    </h3>496      </h3>
498    <p>497      <p>
499      You can use the <a class="external" href="http://ted.mielcz498        You can use the <a class="external" href="http://ted.miel
>">Extension Wizard</a> online >">Extension Wizard</a> onlin
>tool to generate a simple extension to work with.>e tool to generate a simple extension to work with.
500    </p>499      </p>
501    <p>500      <p>
502      A <a class="external" href="        A <a class="external" href="
>f/">Hello World extension</a> similar to what you c>uff/">Hello World extension</a> similar to what you
>an generate with the Extension Wizard is explained line-by-line i> can generate with the Extension Wizard is explained line-by-line
>n <a class="external" href="> in <a class="external" href="
>rted_with_extension_development">another tutorial from MozillaZin>tarted_with_extension_development">another tutorial from MozillaZ
>e Knowledge Base</a>.>ine Knowledge Base</a>.
503    </p>502      </p>
504    <h3 name="Further_information">503      <h3 name="Further_information">
505      Further information504        Further information
506    </h3>505      </h3>
507    <ul>506      <ul>
508      <li>507        <li>
509        <a href="en/Extension_FAQ">Extension FAQ</a>508          <a href="en/Extension_FAQ">Extension FAQ</a>
510      </li>509        </li>
511      <li>510        <li>
512        <a href="en/Extensions">Extensions</a>511          <a href="en/Extensions">Extensions</a>
513      </li>512        </li>
513      </ul>
514    </ul>{{ wiki.languages( { "de": "de/Erweiterung_erstellen", "514    </div>{{ wiki.languages( { "de": "de/Erweiterung_erstellen", 
>es": "es/Creando_una_extensi\u00f3n", "fr": "fr/Construire_une_ex>"es": "es/Creando_una_extensi\u00f3n", "fr": "fr/Construire_une_e
>tension", "ja": "ja/Building_an_Extension", "pl": "pl/Tworzymy_ro>xtension", "ja": "ja/Building_an_Extension", "pl": "pl/Tworzymy_r
>zszerzenie", "pt": "pt/Construir_uma_Extens\u00e3o", "it": "it/Sv>ozszerzenie", "pt": "pt/Construir_uma_Extens\u00e3o", "it": "it/S
>iluppare_un\'Estensione", "zh-cn": "cn/\u6784\u5efa\u4e00\u4e2a\u>viluppare_un\'Estensione", "zh-cn": "cn/\u6784\u5efa\u4e00\u4e2a\
>6269\u5c55" } ) }}>u6269\u5c55" } ) }}

Back to History