Chapter 1: Introduction to Extensions

  • Revision slug: Firefox_addons_developer_guide/Introduction_to_Extensions
  • Revision title: Chapter 1: Introduction to Extensions
  • Revision id: 97827
  • Created:
  • Creator: akaustav
  • Is current revision? No
  • Comment 19 words removed

Revision Content

{{ Draft() }}

{{ PreviousNext("En/Firefox addons developer guide", "En/Firefox addons developer guide/Technologies used in developing extensions") }}

This document was authored by Hideyuki Emura and was originally published in Japanese for the Firefox Developers Conference Summer 2007. Emura-san is a co-author of Firefox 3 Hacks (O'Reilly Japan, 2008.)

Introduction

If you're reading this guide, 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 Safari.

What features are considered standard 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 didn't 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

Management using the Add-ons Manager

Firefox's Add-ons Manager is an excellent way to manage extensions, and is a great step up in ease of use.

Addons manager.png

The Add-ons Manager handles the following tasks:

  • Safely installs and uninstalls add-ons
  • Makes sure add-ons are compatible with the version of Firefox you're using
  • Manages a whitelist of sites trusted for installing add-ons
  • Helps troubleshoot add-ons by disabling them and offering a safe mode
  • Confirms and runs updates
  • Provides access to add-ons' settings dialogs
  • Provides access to add-ons' support sites

Development environment amenities

Initially, there wasn't adequate documentation available, and extension developers were largely left to fend for themselves1; however, now there's 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; 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 more than 7000 extensions and themes published at the Firefox Add-ons site (https://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
Makes it so that double-clinking on an unlinked URL follows that URL.
Undo Closed Tabs Button
Adds a toolbar button to re-open the most recently closed tabs to the History menu.
1211576231.png
Locationbar
Separates a URL’s domain and path in the location bar for easier reading.
locationbar.png

Feature enhancing extensions

These extensions enhance features that already exist in Firefox.

Tab Mix Plus
Offers detailed tab-related settings.
PrefBar
Gives access to numerous preferences from the toolbar.PrefBar.png
NoScript
Enables and disables 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
Displays number of messages received in the status bar.
AdSense Notifier
Displays AdSense revenue in status bar.
Forecastfox
Displays weather forecast in status bar.
Forecastfox.png

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
UserChrome.js
Both of these provide an environment for running user scripts (JavaScript) in Firefox itself, where the scripts can target specific websites.
Adblock Plus
Blocks the display of unwanted advertisements on web pages.
All-in-One Gestures
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
An advanced RSS reader.
Scrapbook
A web-page scrapbook organizer.
Firebug
An extremely sophisticated web-development environment for inspecting and debugging CSS,
HTML, and JavaScript {{ TODO("Screenshot: Firebug, an advanced web debugging environment") }}.

One-trick gag extensions

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

Together with Foxkeh
Displays Foxkeh, the mascot of Mozilla Japan, in the sidebar and in dialogs.
Turn Cancel button into a shiitake mushroom
Like it says on the tin, turns the Cancel button into the cap of a shiitake mushroom{{ TODO("Screenshot: The Cancel button as 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

Customization Method Does it work for web sites? Does it work for Firefox?
User style sheets (change appearance through CSS)

Yes; you can change the userContent.css file, or use the Stylish extension.

Yes; you can change the userChrome.css file, or use the Stylish extension.

User scripts (change appearance and functionality through JavaScript)

Yes; you can use the GreaseMonkey extension or "bookmarklets."

Yes; you can change userChrome.js to add functionality through JavaScript.

Extensions (these can do anything) Yes Yes
Theming (this changes the look of the browser) 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 kind of add-on.

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 at it as well.

1 One of the authors of this special edition, Piro, is world-famous as one of the original developers.

{{ PreviousNext("En/Firefox addons developer guide", "En/Firefox addons developer guide/Technologies used in developing extensions") }}

Revision Source

<p style="text-align: justify;"><font size="3"><font color="#000000">{{ Draft() }}</font></font></p>
<p>{{ PreviousNext("En/Firefox addons developer guide", "En/Firefox addons developer guide/Technologies used in developing extensions") }}</p>
<p><em>This document was authored by </em><a class="external" href="http://level.s69.xrea.com/mozilla/" title="http://level.s69.xrea.com/mozilla/"><em>Hideyuki Emura</em></a><em> and was originally published in Japanese for the </em><a class="link-https" href="https://wiki.mozilla.org/Japan/FxDevCon/Summer2007/English" title="https://wiki.mozilla.org/Japan/FxDevCon/Summer2007/English"><em>Firefox Developers Conference Summer 2007</em></a><em>. Emura-san is a co-author of <a class="external" href="http://www.oreilly.co.jp/books/9784873113753/index.html" title="http://www.oreilly.co.jp/books/9784873113753/index.html">Firefox 3 Hacks</a> (O'Reilly Japan, 2008.)<br>
</em></p>
<h2>Introduction</h2>
<p>If you're reading this guide, 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 Safari.</p>
<p>What features are considered standard 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 didn't 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>Management using the Add-ons Manager</h3>
<p>Firefox's Add-ons Manager is an excellent way to manage extensions, and is a great step up in ease of use.</p>
<p><img alt="Addons manager.png" class="internal default" src="/@api/deki/files/3290/=Addons%20manager.png" style="width: 520px; height: 380px;"></p>
<p>The Add-ons Manager handles the following tasks:</p>
<ul> <li>Safely installs and uninstalls add-ons</li> <li>Makes sure add-ons are compatible with the version of Firefox you're using</li> <li>Manages a whitelist of sites trusted for installing add-ons</li> <li>Helps troubleshoot add-ons by disabling them and offering a safe mode</li> <li>Confirms and runs updates</li> <li>Provides access to add-ons' settings dialogs</li> <li>Provides access to add-ons' support sites</li>
</ul>
<h3>Development environment amenities</h3>
<p>Initially, there wasn't adequate documentation available, and extension developers were largely left to fend for themselves<sup><a href="#footnote1" id="from_footnote1">1</a></sup>; however, now there's 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; 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 more than 7000 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>
<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>
<dl> <dt><a class="link-https" href="https://addons.mozilla.org/firefox/1939/" title="https://addons.mozilla.org/firefox/1939/">Text Link</a></dt> <dd>Makes it so that double-clinking on an unlinked URL follows that URL.</dd> <dt><a class="link-https" href="https://addons.mozilla.org/firefox/3082/" title="https://addons.mozilla.org/firefox/3082/">Undo Closed Tabs Button</a></dt> <dd>Adds a toolbar button to re-open the most recently closed tabs to the History menu.</dd> </dl><dl><dd><img alt="1211576231.png" class="internal default" src="/@api/deki/files/3316/=1211576231.png" style="width: 340px; height: 317px;"></dd></dl> <dl><dt><a class="link-https" href="https://addons.mozilla.org/firefox/4014/" title="https://addons.mozilla.org/firefox/4014/">Locationbar</a></dt> <dd>Separates a URL’s domain and path in the location bar for easier reading.</dd><dd><img alt="locationbar.png" class="internal default" src="/@api/deki/files/3317/=locationbar.png" style="width: 200px; height: 150px;"></dd><br>
</dl><dl>
<h3>Feature enhancing extensions</h3>
<p>These extensions enhance features that already exist in Firefox.</p>
<dl><dt><a class="link-https" href="https://addons.mozilla.org/firefox/1122/" title="https://addons.mozilla.org/firefox/1122/">Tab Mix Plus</a></dt> <dd>Offers detailed tab-related settings.</dd> <dt><a class="external" href="http://prefbar.mozdev.org/" title="http://prefbar.mozdev.org/">PrefBar</a></dt> <dd>Gives access to numerous preferences from the toolbar.<img alt="PrefBar.png" class="internal default" src="/@api/deki/files/3371/=PrefBar.png" style="width: 843px; height: 113px;"></dd> <dt><a class="link-https" href="https://addons.mozilla.org/firefox/722/" title="https://addons.mozilla.org/firefox/722/">NoScript</a></dt> <dd>Enables and disables JavaScript execution on a site-by-site basis.</dd> </dl>
<h3>Web application integration extensions</h3>
<p>The use the APIs of certain web applications to provide certain pieces of information.</p>
<dl> <dt><a class="link-https" href="https://addons.mozilla.org/firefox/1320/" title="https://addons.mozilla.org/firefox/1320/">GmailManager</a></dt> <dd>Displays number of messages received in the status bar.</dd> <dt><a class="link-https" href="https://addons.mozilla.org/firefox/500/" title="https://addons.mozilla.org/firefox/500/">AdSense Notifier</a></dt> <dd>Displays AdSense revenue in status bar.</dd> <dt><a class="link-https" href="https://addons.mozilla.org/firefox/398/" title="https://addons.mozilla.org/firefox/398/">Forecastfox</a></dt> <dd>Displays weather forecast in status bar.</dd><img alt="Forecastfox.png" class="internal default" src="/@api/deki/files/3372/=Forecastfox.png" style="width: 359px; height: 94px;"><br>
</dl>
<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>
<dl> <dt><a class="link-https" href="https://addons.mozilla.org/firefox/748/" title="https://addons.mozilla.org/firefox/748/">GreaseMonkey</a></dt><dt><a class="external" href="http://forums.mozillazine.org/viewtopic.php?t=397735" title="http://forums.mozillazine.org/viewtopic.php?t=397735">UserChrome.js</a></dt><dd>Both of these provide an environment for running user scripts (JavaScript) in Firefox itself, where the scripts can target specific websites.</dd></dl> <dl> <dt><a class="link-https" href="https://addons.mozilla.org/firefox/1865/" title="https://addons.mozilla.org/firefox/1865/">Adblock Plus</a></dt> <dd>Blocks the display of unwanted advertisements on web pages.</dd> <dt><a class="link-https" href="https://addons.mozilla.org/firefox/12/" title="https://addons.mozilla.org/firefox/12/">All-in-One Gestures</a></dt> <dd>Adds mouse-gesture functionality.</dd></dl>
<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>
<dl> <dt><a class="link-https" href="https://addons.mozilla.org/firefox/77/" title="https://addons.mozilla.org/firefox/77/">Sage</a></dt> <dd>An advanced RSS reader.</dd> <dt><a class="link-https" href="https://addons.mozilla.org/firefox/427/" title="https://addons.mozilla.org/firefox/427/">Scrapbook</a></dt> <dd>A web-page scrapbook organizer.</dd> <dt><a class="link-https" href="https://addons.mozilla.org/firefox/1843/" title="https://addons.mozilla.org/firefox/1843/">Firebug</a></dt> <dd>An extremely sophisticated web-development environment for inspecting and debugging CSS,<br>
HTML, and JavaScript {{ TODO("Screenshot: Firebug, an advanced web debugging environment") }}.</dd></dl>
<h3>One-trick gag extensions</h3>
<p>There are a number of one-trick gag extensions that aren’t very useful.</p>
<dl> <dt><a class="link-https" href="https://addons.mozilla.org/firefox/3867/" title="https://addons.mozilla.org/firefox/3867/">Together with Foxkeh</a></dt> <dd>Displays Foxkeh, the mascot of Mozilla Japan, in the sidebar and in dialogs.</dd> <dt><a class="link-https" href="https://addons.mozilla.org/firefox/4298" title="https://addons.mozilla.org/firefox/4298">Turn Cancel button into a shiitake mushroom</a></dt> <dd>Like it says on the tin, turns the Cancel button into the cap of a shiitake mushroom{{ TODO("Screenshot: The Cancel button as a shiitake mushroom") }}.</dd></dl>
<p>This is a very brief survey of a few extensions , but there are many other unique extensions available.</p>
<p><strong>Table 1: Advanced customization methods for Firefox<br>
</strong></p>
</dl>
<table class="standard-table"> <tbody> <tr> <td class="header">Customization Method</td> <td class="header">Does it work for web sites?</td> <td class="header">Does it work for Firefox?</td> </tr> <tr> <td>User style sheets (change appearance through CSS)</td> <td> <p>Yes; you can change the <code>userContent.css</code> file, or use the Stylish extension.</p> </td> <td> <p>Yes; you can change the <code>userChrome.css</code> file, or use the Stylish extension.</p> </td> </tr> <tr> <td>User scripts (change appearance and functionality through JavaScript)</td> <td> <p>Yes; you can use the GreaseMonkey extension or "bookmarklets."</p> </td> <td> <p>Yes; you can change <code>userChrome.js</code> to add functionality through JavaScript.</p> </td> </tr> <tr> <td>Extensions (these can do anything)</td> <td>Yes</td> <td>Yes</td> </tr> <tr> <td>Theming (this changes the look of the browser)</td> <td>No</td> <td>Yes</td> </tr> </tbody>
</table>
<dl>
<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 <code>userChrome.js</code>).</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 kind of add-on.</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 at it as well.</p>
<div class="footnotes">
<div class="note" id="footnote1"><a href="#from_footnote1">1</a> One of the authors of this special edition, Piro, is world-famous as one of the original developers.</div>
</div>
</dl>
<p>{{ PreviousNext("En/Firefox addons developer guide", "En/Firefox addons developer guide/Technologies used in developing extensions") }}</p>
Revert to this revision