Revision 66975 of Getting Started with Firefox Extensions

  • Revision slug: XUL_School/Getting_Started_with_Firefox_Extensions
  • Revision title: Getting Started with Firefox Extensions
  • Revision id: 66975
  • Created:
  • Creator: Jorge.villalobos
  • Is current revision? No
  • Comment one or more formatting changes
Tags: 

Revision Content

{{ PreviousNext("XUL_School/Introduction", "XUL_School/The_Essentials_of_an_Extension") }}

What's a Firefox Extension?

Extensions add new functionality to Mozilla applications such as Firefox and Thunderbird. They can add anything from a toolbar button to a completely new feature. They allow the application to be customized to fit the personal needs of each user if they need additional features, while keeping the applications small to download.

Taken from the Extensions page.

As described in the quoted text, an extension is a small application that adds something new to one or more Mozilla applications. This tutorial focuses on extensions for Firefox, but the same (or very similar) principles apply to creating extensions for other applications such as Thunderbird, Seamonkey, and Flock.

It is also worth noting that there are differences between the definition of extension and add-on. All extensions are add-ons, but add-ons can also be themes, plugins, or language packs. This tutorial is about extension development, but themes and language packs are developed in a very similar way. Plugins are entirely different, and they will not be covered here. You can read more about plugins and their development in the Plugins page.

Firefox provides a very rich and flexible architecture that allows extension developers to add advanced features, customize the user's experience, and completely replace and remove parts of the browser. The Mozilla Add-ons repository (AMO) holds an extensive number of extensions with a wide variety of functions: content filtering (AdBlock Plus, NoScript), web application interaction (Delicious Bookmarks, eBay Companion), web development (DOM Inspector, Firebug), and child protection (Glubble For Families). These are very advanced and complex extensions, and you'll learn most of what it takes to create extensions like these (Glaxstar actually worked on 3 of those listed).

Extensions now exist in 3 different forms: Add-ons SDK extensions (also known as Jetpacks), bootstrapped extensions and traditional extensions. If you're only getting started developing add-ons, the Add-ons SDK provides a great way to quickly create simple ones and build on them. This tutorial focuses on traditional extensions, which are created differently. Bootstrapped extensions are a step above traditional ones in complexity, so you should go through this tutorial before giving them a try.

We'll begin the tutorial by analyzing a very simple extension.

The Hello World Extension

Our sample extensions and this tutorial in general are meant for modern versions of Firefox, but most of it works on older versions too.

We'll now begin with a basic "Hello World" extension. Let's start by installing it. Click on the link below.

Install Hello World

This will either trigger an install or a file download, depending on the content type the web server is using for the file. The appropriate content type to trigger an install is application/x-xpinstall. In the case of this wiki, the content type is not properly set and a file download should occur.

If the content type is set correctly, you will probably get notified that the site is not allowed to install add-ons on Firefox. This is a security barrier that prevents sites from installing extensions without user consent. It is necessary because malicious extensions can do the same level of harm as any malicious program: stealing data, erasing or replacing files, and causing unwanted behavior in general. AMO is the only pre-allowed site because all published add-ons on AMO have gone through a review process that includes security checks.

After downloading the file, you can drag and drop it into the Firefox content area, and installation should begin.

You'll see a window telling you that you're about to install an extension, with some additional information such as the name of the author. You'll see a message saying that the author cannot be verified. Only extensions signed with a digital certificate can verify authorship. Signed extensions are rare, but we'll cover how to sign them later on.

Click on the Install Now button. After the extension is installed, you'll be asked to restart Firefox. Installing, uninstalling, enabling and disabling add-ons require a restart to complete, with the exception of NPAPI plugins, Add-ons SDK extensions and bootstrapped extensions. This is an important point to keep in mind if you're building an extension that manipulates other extensions or themes.

After installing, look at the main Firefox window and see if you notice anything different.

Did you see it? There's a new menu on the main menu, labeled "Hello World!". If you open the menu and then the menu item below, you'll see a nice alert message (for some definitions of 'nice'). Click on the OK button to close it.

That's all the extension does. Now let's take a closer look at it.

Extension Contents

You may have noticed that the extension file you installed is named xulschoolhello1.xpi. XPI (pronounced "zippy") stands for Cross-Platform Installer, because the same installer file can work on all platforms Firefox supports. XPIs are simply compressed ZIP files, but Firefox recognizes the XPI extension and triggers the installation process when an XPI file is loaded.

To look into the XPI file you need to download it first, not install it. If the server triggers an install when clicking on a link or button, what you need to do is right click on the install link, and choose the Save Link As... option.

Next, we'll decompress the XPI file. One way to do this is to rename the file extension from xpi to zip. Another way is to open the file using a ZIP tool. Take your pick, and decompress the file in a convenient location. You should see a directory structure similar to this one:

  • xulschoolhello1
    • chrome.manifest
    • install.rdf
    • content
      • browserOverlay.xul
      • browserOverlay.js
    • skin
      • browserOverlay.css
    • locale
      • en-US
        • browserOverlay.dtd
        • browserOverlay.properties

That's lots of files for something so simple! Well, don't worry, we'll shortly see the purpose of all of these files and realize this is quite simple. In the next section we'll inspect these files and see what they do.

{{ PreviousNext("XUL_School/Introduction", "XUL_School/The_Essentials_of_an_Extension") }}

This tutorial was kindly donated to Mozilla by Appcoast.

{{ languages( { "fr": "fr/Vulgarisation_XUL/Premiers_pas_avec_les_extensions_Firefox" } ) }}

Revision Source

<p>{{ PreviousNext("XUL_School/Introduction", "XUL_School/The_Essentials_of_an_Extension") }}</p>
<h2 id="What's_a_Firefox_Extension?">What's a Firefox Extension?</h2>
<blockquote> <p>Extensions add new functionality to Mozilla applications such as Firefox and Thunderbird. They can add anything from a toolbar button to a completely new feature. They allow the application to be customized to fit the personal needs of each user if they need additional features, while keeping the applications small to download.</p>
</blockquote>
<p>Taken from the <a href="/en/Extensions" title="en/Extensions">Extensions page</a>.</p>
<p>As described in the quoted text, an extension is a small application that adds something new to one or more Mozilla applications. This tutorial focuses on extensions for Firefox, but the same (or very similar) principles apply to creating extensions for other applications such as Thunderbird, Seamonkey, and Flock.</p>
<p>It is also worth noting that there are differences between the definition of <em>extension</em> and <em>add-on</em>. All extensions are add-ons, but add-ons can also be themes, plugins, or language packs. This tutorial is about extension development, but themes and language packs are developed in a very similar way. Plugins are entirely different, and they will not be covered here. You can read more about plugins and their development in the <a href="/en/Plugins" title="en/Plugins">Plugins page</a>.</p>
<p>Firefox provides a very rich and flexible architecture that allows extension developers to add advanced features, customize the user's experience, and completely replace and remove parts of the browser. The <a class="link-https" href="https://addons.mozilla.org" title="https://addons.mozilla.org/">Mozilla Add-ons</a> repository (AMO) holds an extensive number of extensions with a wide variety of functions: content filtering (<a class="link-https" href="https://addons.mozilla.org/en-US/firefox/addon/1865" title="https://addons.mozilla.org/en-US/firefox/addon/1865">AdBlock Plus</a>, <a class="link-https" href="https://addons.mozilla.org/en-US/firefox/addon/722" title="https://addons.mozilla.org/en-US/firefox/addon/722">NoScript</a>), web application interaction (<a class="link-https" href="https://addons.mozilla.org/en-US/firefox/addon/3615" title="https://addons.mozilla.org/en-US/firefox/addon/3615">Delicious Bookmarks</a>, <a class="link-https" href="https://addons.mozilla.org/en-US/firefox/addon/5202" title="https://addons.mozilla.org/en-US/firefox/addon/5202">eBay Companion</a>), web development (<a class="link-https" href="https://addons.mozilla.org/en-US/firefox/addon/6622" title="https://addons.mozilla.org/en-US/firefox/addon/6622">DOM Inspector</a>, <a class="link-https" href="https://addons.mozilla.org/en-US/firefox/addon/1843" title="https://addons.mozilla.org/en-US/firefox/addon/1843">Firebug</a>), and child protection (<a class="link-https" href="https://addons.mozilla.org/en-US/firefox/addon/5881" title="https://addons.mozilla.org/en-US/firefox/addon/5881">Glubble For Families</a>). These are very advanced and complex extensions, and you'll learn most of what it takes to create extensions like these (Glaxstar actually worked on 3 of those listed).</p>
<p>Extensions now exist in 3 different forms: <a class=" link-https" href="https://addons.mozilla.org/en-US/developers/builder" title="https://addons.mozilla.org/en-US/developers/builder">Add-ons SDK extensions</a> (also known as Jetpacks), <a href="/en/Extensions/Bootstrapped_extensions" title="https://developer.mozilla.org/en/Extensions/Bootstrapped_extensions">bootstrapped extensions</a> and traditional extensions. If you're only getting started developing add-ons, the Add-ons SDK provides a great way to quickly create simple ones and build on them. This tutorial focuses on traditional extensions, which are created differently. Bootstrapped extensions are a step above traditional ones in complexity, so you should go through this tutorial before giving them a try.</p>
<p>We'll begin the tutorial by analyzing a very simple extension.</p><h2 id="The_Hello_World_Extension">The Hello World Extension</h2>
<p>Our sample extensions and this tutorial in general are meant for modern versions of Firefox, but most of it works on older versions too.</p>
<p>We'll now begin with a basic "Hello World" extension. Let's start by installing it. Click on the link below.</p>
<p><a href="/@api/deki/files/5139/=xulschoolhello1.xpi" title="https://developer.mozilla.org/@api/deki/files/5139/=xulschoolhello1.xpi">Install Hello World</a></p>
<p>This will either trigger an install or a file download, depending on the content type the web server is using for the file. The appropriate content type to trigger an install is <strong>application/x-<strong>xpinstall</strong></strong>. In the case of this wiki, the content type is not properly set and a file download should occur.</p>
<p>If the content type is set correctly, you will probably get notified that the site is not allowed to install add-ons on Firefox. This is a security barrier that prevents sites from installing extensions without user consent. It is necessary because malicious extensions can do the same level of harm as any malicious program: stealing data, erasing or replacing files, and causing unwanted behavior in general. <a class="link-https" href="https://addons.mozilla.org/" title="https://addons.mozilla.org/">AMO</a> is the only pre-allowed site because all published add-ons on AMO have gone through a review process that includes security checks.</p>
<p>After downloading the file, you can drag and drop it into the Firefox content area, and installation should begin.</p>
<p>You'll see a window telling you that you're about to install an extension, with some additional information such as the name of the author. You'll see a message saying that the author cannot be verified. Only extensions signed with a digital certificate can verify authorship. Signed extensions are rare, but we'll cover how to sign them later on.</p>
<p>Click on the Install Now button. After the extension is installed, you'll be asked to restart Firefox. Installing, uninstalling, enabling and disabling add-ons require a restart to complete, with the exception of NPAPI plugins, Add-ons SDK extensions and bootstrapped extensions. This is an important point to keep in mind if you're building an extension that manipulates other extensions or themes.</p>
<p>After installing, look at the main Firefox window and see if you notice anything different.</p>
<p>Did you see it? There's a new menu on the main menu, labeled "Hello World!". If you open the menu and then the menu item below, you'll see a nice alert message (for some definitions of 'nice'). Click on the OK button to close it.</p>
<p><img alt="" class="internal" src="/@api/deki/files/4138/=helloworldalert.png" style="width: 326px; height: 126px;"></p>
<p>That's all the extension does. Now let's take a closer look at it.</p><h2 id="Extension_Contents">Extension Contents</h2>
<p>You may have noticed that the extension file you installed is named xulschoolhello1.xpi. <a href="/en/XPI" title="en/XPI">XPI</a> (pronounced "zippy") stands for Cross-Platform Installer, because the same installer file can work on all platforms Firefox supports. XPIs are simply compressed ZIP files, but Firefox recognizes the XPI extension and triggers the installation process when an XPI file is loaded.</p>
<p>To look into the XPI file you need to download it first, not install it. If the server triggers an install when clicking on a link or button, what you need to do is right click on the <a href="/@api/deki/files/5139/=xulschoolhello1.xpi" title="https://developer.mozilla.org/@api/deki/files/5139/=xulschoolhello1.xpi">install link</a>, and choose the Save Link As... option.</p>
<p>Next, we'll decompress the XPI file. One way to do this is to rename the file extension fro<span style="font-style: italic;">m </span><em>xpi</em> to <em>zip</em>. Another way is to open the file using a ZIP tool. Take your pick, and decompress the file in a convenient location. You should see a directory structure similar to this one:</p>
<ul> <li>xulschoolhello1 <ul> <li>chrome.manifest</li> <li>install.rdf</li> <li>content <ul> <li>browserOverlay.xul</li> <li>browserOverlay.js</li> </ul> </li> <li>skin <ul> <li>browserOverlay.css</li> </ul> </li> <li>locale <ul> <li>en-US <ul> <li>browserOverlay.dtd</li> <li>browserOverlay.properties</li> </ul> </li> </ul> </li> </ul> </li>
</ul>
<p>That's lots of files for something so simple! Well, don't worry, we'll shortly see the purpose of all of these files and realize this <em>is</em> quite simple. In the next section we'll inspect these files and see what they do.</p>
<p>{{ PreviousNext("XUL_School/Introduction", "XUL_School/The_Essentials_of_an_Extension") }}</p>
<p><span style="font-size: small;">This tutorial was kindly donated to Mozilla by Appcoast.</span></p>
<p>{{ languages( { "fr": "fr/Vulgarisation_XUL/Premiers_pas_avec_les_extensions_Firefox" } ) }}</p>
Revert to this revision