Chapter 1: Introduction to Extensions

  • Revision slug: Firefox_addons_developer_guide/Introduction_to_Extensions
  • Revision title: Chapter 1: Introduction to Extensions
  • Revision id: 97779
  • Created:
  • Creator: Lebedel.delphine
  • Is current revision? No
  • Comment no wording changes

Revision Content

{{ Fx_minversion_header("3") }} {{ Draft() }}

Introduction

If you’re reading this paper, you’ve probably used Firefox before. Perhaps the first time you looked at Firefox, you may have been surprised to see that it has a much simpler structure than other full-featured browsers, such as Opera or Sleipnir.

What features are considered de rigueur for web browsers these days? Perhaps things like fine-grained tab controls, mouse gestures, extensive toolbars and buttons, a feed reader, integration with a variety of web applications, or sophisticated tools to assist with web design. But we did not set out to create an all-in-one browser that can satisfy everyone.

Instead, Firefox can support these features through extensions. The core browser is limited to basic features, so it’s something that a beginner can be comfortable with, but users who want something beyond that can install extensions.

About extensions

Mozilla Suite extensions

Firefox’s predecessor, the Mozilla Suite, had an extension architecture, making it possible to add features to the browser. The extension-management system for the Mozilla Suite, unfortunately, was primitive, and incredibly lacked an uninstaller mechanism. The quality of extensions was not very high, either.

Management using the Add-on Manager

Firefox’s Add-on Manager (Figure 1) is an excellent way to manage extensions, and is a great step up in ease of use.

  • Performs installs and uninstalls safely;
  • Checks compatibility between Firefox and extensions;
  • Manages whitelist of installation sites;
  • Troubleshoots extensions using initial disabling and safe-mode;
  • Confirms and runs updates;
  • Provides access to settings dialogs;
  • Provides access to support site.

Development-environment amenities

Initially, there wasn’t even adequate documentation available, and extension developers were largely left to fend for themselves1; by now, they’ve acquired a considerable store of knowledge.

Because Firefox and its extensions are designed to support multiple languages, excellent extensions come from all over the world, and can be quickly localized by anyone interested.

This lowers the threshold both to using and to developing extensions, and that fact, combined with Firefox’s rapidly growing popularity, has created a positive feedback loop, with the number of extension users and extension developers growing explosively—there are now nearly 2000 extensions and themes published at the Firefox Add-ons site (https://addons.mozilla.org).

The future of the Add-ons site

The Firefox Add-ons site, run by the Mozilla Corporation, has in the past been English-only, and has had a number of unmaintained extensions lingering there, making it less than entirely usable.

The Add-ons site is currently undergoing a top-to-bottom rethinking, and multi-lingual support is a planned improvement. It is also going to segregate stable releases for the general public that have been through review from sandboxed versions that are under review or unmaintained; the review process as well is going to be improved. A preview edition of the new Add-ons site currently being written is available at the following URL (http://preview.addons.mozilla.org/).

What you can do with extensions

Let’s look at what features extensions can add, and some actual examples of extensions.

Single-feature extensions

These are relatively simple extensions that add a single feature.

       • Text Link
          https://addons.mozilla.org/firefox/1939/
          Makes it so that double-clinking on an unlinked URL follows that URL.
       • Undo Closed Tabs Button
          https://addons.mozilla.org/firefox/3082/
          Adds a toolbar button to re-open the most recently closed tabs to the History menu
          (Figure 2).
       • Locationbar2
          https://addons.mozilla.org/firefox/4014/
          Separates a URL’s domain and path in the location bar for easier reading (Figure 3).

Feature-enhancing extensions

These extensions enhance features that already exist in Firefox.

      • Tab Mix Plus
         https://addons.mozilla.org/firefox/1122/
         Offers detailed tab-related settings.
      • PrefBar
         http://prefbar.mozdev.org
         Gives access to numerous preferences from the toolbar (Figure 4).
      • Noscript
         https://addons.mozilla.org/firefox/722/
         Permits JavaScript execution on a site-by-site basis.

Web-application integration extensions

The use the APIs of certain web applications to provide certain pieces of information.

      • GmailManager
         https://addons.mozilla.org/firefox/1320/
         Displays number of messages received in the status bar.
      • Adsense Notifier
         https://addons.mozilla.org/firefox/500/
         Displays Adsense revenue in status bar.
      • Forecastfox
         https://addons.mozilla.org/firefox/398/
         Displays weather forecast in status bar (Figure 5).

New-feature extensions

Extensions can add completely new features to Firefox. This class of extension requires a greater level of knowledge and programming ability.

      • Greasemonkey
         https://addons.mozilla.org/firefox/748/
      • UserChrome.js
         http://forums.mozillazine.org/viewtopic.php?t=397735

Both of these provide an environment for running user scripts (JavaScript) in Firefox itself,
where the scripts can target specific websites.

      • Adblock Plus
         https://addons.mozilla.org/firefox/1865/
         Blocks the display of unwanted advertisements on web pages.
       • All-in-One Gestures
         https://addons.mozilla.org/firefox/12/
         Adds mouse-gesture functionality.

Application-level extensions

These are sophisticated extensions that can be considered full-scale applications in their own right, essentially using Firefox as the development platform.

Sage
https://addons.mozilla.org/firefox/77/
An advanced RSS reader.

Scrapbook
https://addons.mozilla.org/firefox/427/
A web-page scrapbook organizer.

Firebug
https://addons.mozilla.org/firefox/1843/
An extremely sophisticated web-development environment for inspecting and debugging CSS,
HTML, and JavaScript (Figure 6).

One-trick gag extensions

There are a number of one-trick gag extensions that aren’t very useful.

       • Together with Foxkeh
         https://addons.mozilla.org/firefox/3867/
         Displays Foxkeh, the mascot of Mozilla Japan, in the sidebar and in dialogs.

       • Turn Cancel button into a shiitake mushroom
         https://addons.mozilla.org/firefox/4298
         Like it says on the tin, turns the Cancel button into the cap of a shiitake mushroom.

This is a very brief survey of a few extensions , but there are many other unique extensions available.

Table 1: Advanced customization methods for Firefox

  Web page Firefox itself
User style sheets (change appearance through CSS)

Yes

userContent.css

Stylish

Yes

userChrome.css

Stylish

User scripts (change appearance and functionality through JavaScript)

 

Yes

Greasemonkey

bookmarklets

Yes

userChrome.js

Extensions (anything can do) Yes Yes
Theming (change appearance) No Yes

 

Let’s build an extension

Table 1 shows the various customization options available to a user in Firefox. Users have flexible customization options, using CSS in user style sheets and JavaScript/DOM in user scripts (these depend on Stylish, Greasemonkey, and userChrome.js).

In addition to CSS and JavaScript, extensions can take advantage of XUL and XPCOM technologies for more sophisticated features. Themes, which alter Firefox’s appearance, are a special kind of extension.

In order to create an extension, you need an idea and just a little programming ability. The following chapters explain in detail the extension-writing techniques of some of Japan’s leading extension authors. We encourage you to try your hand as well.

Figure 1: Add-on Manager
Figure 2: Undo Closed Tabs Button, which adds a button to the toolbar.
Figure 3: Locationbar, which makes the URL more legible.
Figure 4: Prefbar, which adds its own special toolbar.
Figure 5: Forecastfox, which displays weather information in the status bar.
Figure 6: Firebug, an advanced web debugging environment.
Figure 7: The Cancel button as a shiitake mushroom.

Revision Source

<p style="text-align: justify;"><font size="3"><font color="#000000">{{ Fx_minversion_header("3") }} {{ Draft() }}</font></font></p>
<h2>Introduction</h2>
<p>If you’re reading this paper, you’ve probably used Firefox before. Perhaps the first time you looked at Firefox, you may have been surprised to see that it has a much simpler structure than other full-featured browsers, such as Opera or Sleipnir.</p>
<p>What features are considered de rigueur for web browsers these days? Perhaps things like fine-grained tab controls, mouse gestures, extensive toolbars and buttons, a feed reader, integration with a variety of web applications, or sophisticated tools to assist with web design. But we did not set out to create an all-in-one browser that can satisfy everyone.</p>
<p>Instead, Firefox can support these features through extensions. The core browser is limited to basic features, so it’s something that a beginner can be comfortable with, but users who want something beyond that can install extensions.</p>
<h2>About extensions</h2>
<h3>Mozilla Suite extensions</h3>
<p>Firefox’s predecessor, the Mozilla Suite, had an extension architecture, making it possible to add features to the browser. The extension-management system for the Mozilla Suite, unfortunately, was primitive, and incredibly lacked an uninstaller mechanism. The quality of extensions was not very high, either.</p>
<h3>Management using the Add-on Manager</h3>
<p>Firefox’s Add-on Manager (Figure 1) is an excellent way to manage extensions, and is a great step up in ease of use.</p>
<ul> <li>Performs installs and uninstalls safely;</li> <li>Checks compatibility between Firefox and extensions;</li> <li>Manages whitelist of installation sites;</li> <li>Troubleshoots extensions using initial disabling and safe-mode;</li> <li>Confirms and runs updates;</li> <li>Provides access to settings dialogs;</li> <li>Provides access to support site.</li>
</ul>
<h3>Development-environment amenities</h3>
<p>Initially, there wasn’t even adequate documentation available, and extension developers were largely left to fend for themselves<sup>1</sup>; by now, they’ve acquired a considerable store of knowledge.</p>
<p>Because Firefox and its extensions are designed to support multiple languages, excellent extensions come from all over the world, and can be quickly localized by anyone interested.</p>
<p>This lowers the threshold both to using and to developing extensions, and that fact, combined with Firefox’s rapidly growing popularity, has created a positive feedback loop, with the number of extension users and extension developers growing explosively—there are now nearly 2000 extensions and themes published at the Firefox Add-ons site (<a class=" link-https" href="https://addons.mozilla.org" rel="freelink">https://addons.mozilla.org</a>).</p>
<h3>The future of the Add-ons site</h3>
<p>The Firefox Add-ons site, run by the Mozilla Corporation, has in the past been English-only, and has had a number of unmaintained extensions lingering there, making it less than entirely usable.</p>
<p>The Add-ons site is currently undergoing a top-to-bottom rethinking, and multi-lingual support is a planned improvement. It is also going to segregate stable releases for the general public that have been through review from sandboxed versions that are under review or unmaintained; the review process as well is going to be improved. A preview edition of the new Add-ons site currently being written is available at the following URL (<a class=" external" href="http://preview.addons.mozilla.org/" rel="freelink">http://preview.addons.mozilla.org/</a>).</p>
<h2>What you can do with extensions</h2>
<p>Let’s look at what features extensions can add, and some actual examples of extensions.</p>
<h3>Single-feature extensions</h3>
<p>These are relatively simple extensions that add a single feature.</p>
<p>       • Text Link<br>
          <a class=" link-https" href="https://addons.mozilla.org/firefox/1939/" rel="freelink">https://addons.mozilla.org/firefox/1939/</a><br>
          Makes it so that double-clinking on an unlinked URL follows that URL.<br>
       • Undo Closed Tabs Button<br>
          <a class=" link-https" href="https://addons.mozilla.org/firefox/3082/" rel="freelink">https://addons.mozilla.org/firefox/3082/</a><br>
          Adds a toolbar button to re-open the most recently closed tabs to the History menu<br>
          (Figure 2).<br>
       • Locationbar2<br>
          <a class=" link-https" href="https://addons.mozilla.org/firefox/4014/" rel="freelink">https://addons.mozilla.org/firefox/4014/</a><br>
          Separates a URL’s domain and path in the location bar for easier reading (Figure 3).</p>
<h3>Feature-enhancing extensions</h3>
<p>These extensions enhance features that already exist in Firefox.</p>
<p>      • Tab Mix Plus<br>
         <a class=" link-https" href="https://addons.mozilla.org/firefox/1122/" rel="freelink">https://addons.mozilla.org/firefox/1122/</a><br>
         Offers detailed tab-related settings.<br>
      • PrefBar<br>
         <a class=" external" href="http://prefbar.mozdev.org" rel="freelink">http://prefbar.mozdev.org</a><br>
         Gives access to numerous preferences from the toolbar (Figure 4).<br>
      • Noscript<br>
         <a class=" link-https" href="https://addons.mozilla.org/firefox/722/" rel="freelink">https://addons.mozilla.org/firefox/722/</a><br>
         Permits JavaScript execution on a site-by-site basis.</p>
<h3>Web-application integration extensions</h3>
<p>The use the APIs of certain web applications to provide certain pieces of information.</p>
<p>      • GmailManager<br>
         <a class=" link-https" href="https://addons.mozilla.org/firefox/1320/" rel="freelink">https://addons.mozilla.org/firefox/1320/</a><br>
         Displays number of messages received in the status bar.<br>
      • Adsense Notifier<br>
         <a class=" link-https" href="https://addons.mozilla.org/firefox/500/" rel="freelink">https://addons.mozilla.org/firefox/500/</a><br>
         Displays Adsense revenue in status bar.<br>
      • Forecastfox<br>
         <a class=" link-https" href="https://addons.mozilla.org/firefox/398/" rel="freelink">https://addons.mozilla.org/firefox/398/</a><br>
         Displays weather forecast in status bar (Figure 5).</p>
<h3>New-feature extensions</h3>
<p>Extensions can add completely new features to Firefox. This class of extension requires a greater level of knowledge and programming ability.</p>
<p>      • Greasemonkey<br>
         <a class=" link-https" href="https://addons.mozilla.org/firefox/748/" rel="freelink">https://addons.mozilla.org/firefox/748/</a><br>
      • UserChrome.js<br>
         <a class=" external" href="http://forums.mozillazine.org/viewtopic.php?t=397735" rel="freelink">http://forums.mozillazine.org/viewtopic.php?t=397735</a></p>
<p>Both of these provide an environment for running user scripts (JavaScript) in Firefox itself,<br>
where the scripts can target specific websites.</p>
<p>      • Adblock Plus<br>
         <a class=" link-https" href="https://addons.mozilla.org/firefox/1865/" rel="freelink">https://addons.mozilla.org/firefox/1865/</a><br>
         Blocks the display of unwanted advertisements on web pages.<br>
       • All-in-One Gestures<br>
         <a class=" link-https" href="https://addons.mozilla.org/firefox/12/" rel="freelink">https://addons.mozilla.org/firefox/12/</a><br>
         Adds mouse-gesture functionality.</p>
<h3>Application-level extensions</h3>
<p>These are sophisticated extensions that can be considered full-scale applications in their own right, essentially using Firefox as the development platform.</p>
<p>Sage<br>
<a class=" link-https" href="https://addons.mozilla.org/firefox/77/" rel="freelink">https://addons.mozilla.org/firefox/77/</a><br>
An advanced RSS reader.</p>
<p>Scrapbook<br>
<a class=" link-https" href="https://addons.mozilla.org/firefox/427/" rel="freelink">https://addons.mozilla.org/firefox/427/</a><br>
A web-page scrapbook organizer.</p>
<p>Firebug<br>
<a class=" link-https" href="https://addons.mozilla.org/firefox/1843/" rel="freelink">https://addons.mozilla.org/firefox/1843/</a><br>
An extremely sophisticated web-development environment for inspecting and debugging CSS,<br>
HTML, and JavaScript (Figure 6).</p>
<h3>One-trick gag extensions</h3>
<p>There are a number of one-trick gag extensions that aren’t very useful.</p>
<p>       • Together with Foxkeh<br>
         <a class=" link-https" href="https://addons.mozilla.org/firefox/3867/" rel="freelink">https://addons.mozilla.org/firefox/3867/</a><br>
         Displays Foxkeh, the mascot of Mozilla Japan, in the sidebar and in dialogs.</p>
<p>       • Turn Cancel button into a shiitake mushroom<br>
         <a class=" link-https" href="https://addons.mozilla.org/firefox/4298" rel="freelink">https://addons.mozilla.org/firefox/4298</a><br>
         Like it says on the tin, turns the Cancel button into the cap of a shiitake mushroom.</p>
<p>This is a very brief survey of a few extensions , but there are many other unique extensions available.</p>
<p>Table 1: Advanced customization methods for Firefox</p>
<table align="center" border="1" cellpadding="1" cellspacing="1" width="200"> <tbody> <tr> <td> </td> <td>Web page</td> <td>Firefox itself</td> </tr> <tr> <td>User style sheets (change appearance through CSS)</td> <td> <p>Yes</p> <p>userContent.css</p> <p>Stylish</p> </td> <td> <p>Yes</p> <p>userChrome.css</p> <p>Stylish</p> </td> </tr> <tr> <td>User scripts (change appearance and functionality through JavaScript)</td> <td> <p> </p> <p>Yes</p> <p>Greasemonkey</p> <p>bookmarklets</p> </td> <td> <p>Yes</p> <p>userChrome.js</p> </td> </tr> <tr> <td>Extensions (anything can do)</td> <td>Yes</td> <td>Yes</td> </tr> <tr> <td>Theming (change appearance)</td> <td>No</td> <td>Yes</td> </tr> </tbody>
</table>
<p> </p>
<h2>Let’s build an extension</h2>
<p>Table 1 shows the various customization options available to a user in Firefox. Users have flexible customization options, using CSS in user style sheets and JavaScript/DOM in user scripts (these depend on Stylish, Greasemonkey, and userChrome.js).</p>
<p>In addition to CSS and JavaScript, extensions can take advantage of XUL and XPCOM technologies for more sophisticated features. Themes, which alter Firefox’s appearance, are a special kind of extension.</p>
<p>•</p>
<p>In order to create an extension, you need an idea and just a little programming ability. The following chapters explain in detail the extension-writing techniques of some of Japan’s leading extension authors. We encourage you to try your hand as well.</p>
<p>Figure 1: Add-on Manager<br>
Figure 2: Undo Closed Tabs Button, which adds a button to the toolbar.<br>
Figure 3: Locationbar, which makes the URL more legible.<br>
Figure 4: Prefbar, which adds its own special toolbar.<br>
Figure 5: Forecastfox, which displays weather information in the status bar.<br>
Figure 6: Firebug, an advanced web debugging environment.<br>
Figure 7: The Cancel button as a shiitake mushroom.</p>
Revert to this revision