Compare Revisions

Building an extension

Revision 33541:

Revision 33541 by Gabrielqs on

Revision 33542:

Revision 33542 by Mgodwin on

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

Revision 33541
Revision 33542
n22      Extensions are packaged and distributed in ZIP files, or <an22      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">Bundles</a>, with the <tt>XPI</tt> (<i>pronoun
>ced “zippy”</i>) file extension. The layout of content within the>ced “zippy”</i>) file extension.
> XPI file is like so: 
23    </p>
23    </p>24    <p>
25      An example of the content within a typical XPI file:
26    </p>
n25extension.xpi:n28exampleExt.xpi:
n39      Because of this, it is easier if we lay out our source filen42      We'll want to create a file structure similar to the one ab
>s in a similar fashion, unless you want to write some sort of Mak>ove for our tutorial, so lets begin by creating a folder for your
>efile or shell script to package and zip all of your files. Even > extension somewhere on your hard disk, preferably in all lower-c
>if you are prepared to do that, testing is much simpler if you la>ase <span class="comment">Why?</span> (e.g. <tt>C:\extensions\my_
>y out your files like this because of a feature of the Add-on Sys>extension\</tt> or <tt>~/extensions/my_extension/</tt>). Inside y
>tem provided by Firefox 1.5 and later.>our new extension folder, create another folder called <tt>chrome
 ></tt>, and inside the <tt>chrome</tt> folder create a folder call
 >ed <tt>content</tt>.
40    </p>
41    <p>43    </p>
42      So let's get started. Create a folder for your extension so
>mewhere on your hard disk, e.g. <tt>C:\extensions\my_extension\</ 
>tt> or <tt>~/extensions/my_extension/</tt>. (note: use all lower  
>case) Inside this folder create another folder called <tt>chrome< 
>/tt>, inside the <tt>chrome</tt> folder create a folder called <t 
>t>content</tt>. (On Unix-like systems you can usually create both 
> directories just by running <tt>mkdir -p chrome/content</tt> fro 
>m within the extension's root directory.) 
43    </p>44    <p>
45      Inside the <b>root</b> directory of your extension folder, 
 >create two new empty text files, one called <tt>chrome.manifest</
 >tt> and the other called <tt>install.rdf</tt>.
44    <p>46    </p>
45      Inside the <b>root</b> of your extension folder, alongside 
>the <tt>chrome</tt> folder, create two new empty text files, one  
>called <tt>chrome.manifest</tt> and the other called <tt>install. 
>rdf</tt>. 
46    </p>47    <p>
47    <p>48      You should end up with this directory structure:
48      For example:
n51#!/bin/shn51&lt;ext path&gt;\
52h=$HOME/moExt52          install.rdf
53mkdir -p $h/my_extension/chrome/content53          chrome.manifest
54touch $h/my_extension/chrome.manifest $h/my_extension/install.rdf54          chrome\
55             content\
t57      More tips on setting up the development environment can be t58      <span class="comment">&lt;pre&gt; #!/bin/sh h=$HOME/moExt m
>found in the article <a href="en/Setting_up_extension_development>kdir -p $h/my_extension/chrome/content touch $h/my_extension/chro
>_environment">Setting up extension development environment</a>.>me.manifest $h/my_extension/install.rdf &lt;/pre&gt;</span> Pleas
 >e read the additional information about setting up your developme
 >nt environment in the article <a href="en/Setting_up_extension_de
 >velopment_environment">Setting up extension development environme
 >nt</a>.

Back to History