Extension development: Difference between revisions

From MozillaZine Knowledge Base
Jump to navigationJump to search
 
(36 intermediate revisions by 18 users not shown)
Line 7: Line 7:
You will almost certainly need to use the following technologies, although it is not necessary to be an expert in them. You may be able to pick up much of what you need just by examining the source code for other extensions.
You will almost certainly need to use the following technologies, although it is not necessary to be an expert in them. You may be able to pick up much of what you need just by examining the source code for other extensions.
*[[Development resources#XUL|XUL (XML User-Interface Language)]]. Used to define the onscreen layout of the UI and to attach scripts and style to the interface.
*[[Development resources#XUL|XUL (XML User-Interface Language)]]. Used to define the onscreen layout of the UI and to attach scripts and style to the interface.
*[[Development resources#Javascript|Javascript]]. The primary scripting language in Mozilla and the language in which most extensions are written.
*[[Development resources#JavaScript|JavaScript]]. The primary scripting language in Mozilla and the language in which most extensions are written.
*[[Development resources#DOM|DOM (Document Object Model)]]. Used to manipulate XUL in real-time as well as any HTML documents loaded.
*[[Development resources#DOM|DOM (Document Object Model)]]. Used to manipulate XUL in real-time as well as any HTML documents loaded.
*[[Development resources#XPCOM_/_XPConnect|XPCOM/XPConnect]]. Mozilla packages together useful functions into XPCOM (Cross-Platform Component Object Model) components, which may then be accessed from external code, including JavaScript via XPConnect. This allows the extension developers access to the [[Dev : Using preferences|preferences]] database, the [[File IO|filesystem]], and many other pieces of Mozilla technology.
*[[Development resources#XPCOM_/_XPConnect|XPCOM/XPConnect]]. Mozilla packages together useful functions into XPCOM (Cross-Platform Component Object Model) components, which may then be accessed from external code, including JavaScript via XPConnect. This allows the extension developers access to the [[Dev : Using preferences|preferences]] database, the [[File IO|filesystem]], and many other pieces of Mozilla technology (Extensions can be written in JavaScript, C++, or even Python with [http://developer.mozilla.org/en/docs/PyXPCOM PyXPCOM]).
*[[Development resources#CSS|CSS (Cascading Style Sheets)]]. Used to style the interface and to attach XBL bindings to XUL documents.
*[[Development resources#CSS|CSS (Cascading Style Sheets)]]. Used to style the interface and to attach XBL bindings to XUL documents.


More advanced extensions may require the following technologies.
More advanced extensions may require the following technologies.
Line 20: Line 19:
===Setting up your environment===
===Setting up your environment===
* Please see [[Setting up extension development environment]] for development preferences you can set and extensions you can install. It also contains information about running a separate instance of Firefox using a development profile.
* Please see [[Setting up extension development environment]] for development preferences you can set and extensions you can install. It also contains information about running a separate instance of Firefox using a development profile.
* [[Getting started with extension development]] contains tips on easily setting up extensions development environment in Firefox/Thunderbird 1.1a1+ (so that you no longer have to recreate the JAR and/or XPI files each time you make a change in your extension). It is also a quickstart guide containing useful links for beginners and the obligatory helloworld extension, which can be used as a basis of your extensions.
* [[Getting started with extension development]] contains tips on easily setting up extensions development environment in Firefox/Thunderbird 1.5 (so that you no longer have to recreate the JAR and/or XPI files each time you make a change in your extension). It is also a quickstart guide containing useful links for beginners and the obligatory helloworld extension, which can be used as a basis of your extensions.


===Tutorials===
===Tutorials===
There is a variety of tutorials available which will help with general extension development or with learning specific technologies. You don't have to read all of them before starting hacking.
There is a variety of third-party tutorials available which will help with general extension development or with learning specific technologies.
* [http://xulplanet.com/ XulPlanet] is the premier resource on the internet for XUL and XPCOM. It contains an extensive [http://xulplanet.com/tutorials/xultu/ tutorial] which will walk you through XUL.
 
* roachfiend.com has a [http://roachfiend.com/archives/2004/12/08/how-to-create-firefox-extensions/ HowTo] that walks through the entire extension development process. The tutorial is newer and covers creating extensions for newer (post 0.9) Firefox versions. (Some content is Windows specific.)
On this Knowledge Base and Mozilla's website:
* There is a minimal [http://www.yergler.net/blog/archives/2004/05/20/writing-mozilla-extensions example extension] available at yergler.net.
* [[Getting started with extension development]]
* [http://www.orablogs.com/duffblog/archives/000536.html Brian Duff's Hello World tutorial].
* [http://developer.mozilla.org/en/docs/Building_an_Extension "Building an Extension" (Devmo).]
* [http://www.borngeek.com/firefox/tutorial/ Jonah Bishop's Firefox Toolbar Tutorial] — creating toolbar extensions (like WebDeveloper or Googlebar) for Firefox.
* [http://www.mozilla.org/docs/tutorials/tinderstatus/ "Creating a Mozilla Extension"]: Walks through the process of creating a simple extension. It has a particularly useful section on XUL Overlays, which enable modifications to existing chrome without editing the actual chrome file. However, it has not yet been updated to cover the new packaging system.
* [http://mozilla-firefox-extension-dev.blogspot.com/ mozilla-firefox-extension-dev.blogspot.com] — various information on extensions development.
 
* [http://thunderbirddocs.blogspot.com/ thunderbirddocs.blogspot.com] — various information on Thunderbird extension development.
On other websites:
* [http://www.mozdevgroup.com/docs/pete/Signing-an-XPI.html Signing an XPI] by Pete Collins.
* [http://xulplanet.com/ XULPlanet] ([http://xulplanet.mozdev.org/ mirror]): Premier resource on the internet for XUL and XPCOM. It contains [http://xulplanet.com/tutorials/xultu/ an extensive tutorial] that walks you through XUL.
* [http://www.mozilla.org/docs/tutorials/tinderstatus/ Creating a Mozilla Extension] is a document on mozilla.org which walks through the process of creating a simple extension. It has a particularly useful section on XUL Overlays which enable modifications to existing chrome without editing the existing file. However, it has not been yet been updated to cover the new packaging system.
* [http://roachfiend.com/archives/2004/12/08/how-to-create-firefox-extensions/ HowTo (Roachfiend.com)]: Walks through the entire extension development process. The tutorial covers creating extensions for Firefox 1.0 and later versions. (Some content is Windows specific.)
* [http://yergler.net/blog/2004/05/20/writing-mozilla-extensions/ Nathan Yergler's minimal example extension.]
* [http://www.orablogs.com/duffblog/archives/000536.html Brian Duff's Hello World tutorial.]
* [http://www.borngeek.com/firefox/toolbar-tutorial/ Jonah Bishop's Firefox Toolbar Tutorial]: Creating toolbar extensions (like WebDeveloper or Googlebar) for Firefox.
* [http://www.mozdevgroup.com/docs/pete/Signing-an-XPI.html "Signing an XPI" by Pete Collins.]
* [http://arstechnica.com/articles/columns/linux/linux-20050907.ars "Developing Firefox Extensions with GNU/Linux" (Ars Technica's Linux.Ars column).]
 
Weblogs:
* [http://mozilla-firefox-extension-dev.blogspot.com/ A Mozilla Suite and Firefox extension development weblog.]
* [http://thunderbirddocs.blogspot.com/ The Deep End]: A Thunderbird weblog that focuses on extensions.


===Books===
===Books===
As well as web resources, there are a couple of books available describing Mozilla technologies and their usage. Both books cover a comprehensive range of Mozilla technologies. They are available both online and in a more user-friendly dead-tree format.
As well as web resources, there are a couple of books available describing Mozilla technologies and their usage. Both books cover a comprehensive range of Mozilla technologies. They are available both online and in a more user-friendly dead-tree format.
* [http://books.mozdev.org/ Creating Applications With Mozilla]. O'Reilly's reference, released at about same time as Seamonkey (the Mozilla suite) 1.0 and avaliable online as a collection of HTML files.
* [http://books.mozdev.org/ Creating Applications With Mozilla]. O'Reilly's reference, released at about same time as Mozilla 1.0 and avaliable online as a collection of HTML files.
* [http://www.informit.com/title/0131423436# Rapid Application Development With Mozilla]. Available as a set of compressed PDF files, and more up-to-date and more detailed than the O'Reilly offering.
* [http://www.informit.com/title/0131423436# Rapid Application Development With Mozilla]. Available as a set of compressed PDF files, and more up-to-date and more detailed than the O'Reilly offering. Also available as a collection of [http://mb.eschew.org/ XHTML pages].


==Getting finished==
==Getting finished==
===Packaging===
==== with .jar file ====
Mozilla.org provides the most comprehensive [http://www.mozilla.org/projects/firefox/extensions/packaging/extensions.html technical document] on packaging extensions. It explains the format of the install.rdf file for those wishing to create one from scratch. However, there also are tools and templates for easier creation of the [[install.rdf]] file.
The Extension Manager—and hence the extension/theme packaging system—underwent a major revision with Firefox 0.9 and Thunderbird 0.7. If you wish to support earlier versions of these products, or the Mozilla Suite, you will need to provide the old-style [[install.js]] file as well as the new install.rdf.
The whole process for the new packaging system is made clear in both [http://roachfiend.com/archives/2004/12/08/how-to-create-firefox-extensions/#testing roachfiend’s tutorial] and [http://www.borngeek.com/firefox/tutorial/part_06.html Jonah Bishop's toolbar tutorial]. The [http://xulplanet.com/tutorials/xultu/xpinstall.html tutorial on XulPlanet] covers the old system (most of this tutorial also applies to new-style extensions too). Jed Brown also has a tutorial on [http://jedbrown.net/1.0/mozilla/EM/ repackaging old extensions] in the new style.
There are also tools which will automatically package your extension files: a [[bash build script]], [[Windows build script]], [http://www.borngeek.com/firefox/tutorial/build_script.txt Googlebar Lite Perl build script], a [[Makefile for packaging an extension|makefile]].
==== without .jar file ====
While developing your Extension it can make sense not to .jar files but to use them directly instead. That way you can debug in the extensions directory of a usersprofile directly without re-packing and re-jaring. Creating a package without a .jar file is the same like described above with only some changes:
* '''Use a directory instead of a JAR:'''<br />Instead of packing your files into a file called <tt>chrome/myextension.jar</tt> you copy them into a directory called <tt>chrome/myextension</tt>
* '''Change the install.rdf:'''<br />Change it from:<br /><tt><Description about="urn:mozilla:extension:file:myextension.jar"></tt><br />to:<br /><tt><Description about="urn:mozilla:extension:file:myextension"></tt>
* '''Change the install.js:'''<br />For Mozilla Suite there might be additional modifications in the install.js file necessary which reflect the install.rdf file changes which is replaced by the .js file. It is unknown if this applies to Firefox or Thunderbird, too.
More: [[Dev_:_Tips_:_Disable_XUL_cache#Getting_rid_of_JARs|Getting rid of JARs (Tip & Example)]]. Please note, that it's recommended to package chrome files in a JAR, for better startup performance.


===Releasing your extension===
To make your extension available to others, you need to [[Packaging extensions|package it as XPI]] and [[Releasing extension|release it]] (make sure you thoroughly test it first!).
Once you have thoroughly tested your extension, you can [[Releasing extension|release it]] to the rest of the world!


==Making it better==
==Making it better==
===Localization===
* Be sure to make your extensions localizable: [http://www.xulplanet.com/tutorials/xultu/locale.html Use DTDs] for XUL and [http://www.xulplanet.com/tutorials/xultu/locprops.html properties] for scripts.
[http://www.xulplanet.com/tutorials/xultu/locale.html Use DTDs] for XUL and [http://www.xulplanet.com/tutorials/xultu/locprops.html properties] for scripts.
* Themes apply CSS using various selectors, particularly based on <code>id</code> and <code>class</code> attributes on your elements. Include these to make [[theme development]] easier.
 
* Try to follow the set of [[Extension guidelines]]. This can help to make all extensions act predictably, which increases usability.
===Themes (skins)===
Themes apply CSS using ID and class attributes. Include these as much as possible to make [[Theme_development | theme development]] possible.
 
===Guidelines===
Try to follow the set of [[Extension guidelines]]. This can help to make all extensions act predictably, which increases usability.


==Further Information==
==Further Information==
Line 85: Line 69:
====Development fundamentals====
====Development fundamentals====
* [[Extension development advice|General advice]] for extension development, including how to avoid rebuilding JAR files and how to correctly register overlays.
* [[Extension development advice|General advice]] for extension development, including how to avoid rebuilding JAR files and how to correctly register overlays.
* [[XML namespaces]]. Why http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul is at the top of every XUL document.


====Troubleshooting====
====Troubleshooting====
Line 95: Line 78:
===Other resources===
===Other resources===
* [[Development resources|Mozilla development resources]]
* [[Development resources|Mozilla development resources]]
* [http://www.mozilla.org/projects/firefox/extensions/ A few mozilla.org documents about Firefox extensions/themes]
* [http://www.mozilla.org/projects/firefox/extensions/ A few mozilla.org documents about extensions/themes]
* [http://developer.mozilla.org/en/docs/Extensions Extensions section of Devmo]


===Getting help===
===Getting help===
*MozillaZine provides a [http://forums.mozillazine.org/viewforum.php?f=27 Development forum] which is the place for technical questions and an [http://forums.mozillazine.org/viewforum.php?f=19 Extensions forum] which occasionally has technical discussion but is more useful for releasing extensions to get testing and feedback.
*MozillaZine provides a [http://forums.mozillazine.org/viewforum.php?f=27 Development forum] which is the place for technical questions and an [http://forums.mozillazine.org/viewforum.php?f=19 Extensions forum] which occasionally has technical discussion but is more useful for releasing extensions to get testing and feedback.
*The [http://groups.google.com/groups?q=netscape.public.mozilla netscape.public.mozilla] newsgroups are the official location for code-related queries. They are particularly useful if you're implementing an XPCOM component or have a question that MozillaZine posters can't answer. See the [http://www.mozilla.org/community/developer-forums.html developer forums page] for a description of each newsgroup.
*The mozilla.dev.* newsgroups are the official location for code-related queries. They are particularly useful if you're implementing an XPCOM component or have a question that MozillaZine posters can't answer. See the [http://www.mozilla.org/community/developer-forums.html developer forums page] for a description of each newsgroup.
*[http://www.mozilla.org/community/developer-forums.html#chat IRC] (see also [[IRC|this]]). Live Developers! Get satisfaction online from red hot developers! (Note: this is not a dating service.)
*[http://www.mozilla.org/community/developer-forums.html#chat IRC] (see also [[IRC|this]]). Live Developers! Get satisfaction online from red hot developers! (Note: this is not a dating service.), #extdev is the place to be!


===Get involved===
===Get involved===
* Take a look at [[Dev : Project ideas]] to see the list of requested extensions.
* Take a look at [[Dev : Project ideas]] to see the list of requested extensions.
* Help maintaining the [[Extension development]] Knowledge Base. Post your tips and code snippets for others to use. You may use the MozillaZine forums (preferably ''Development'' or ''Extensions'') to discuss the tips.
* Help maintaining the ''Extension development'' knowledge base. Post your tips and code snippets for others to use. (You may use the MozillaZine forums (preferably ''Development'' or ''Extensions'') to discuss the tips.) Also consider helping the [http://developer.mozilla.org/en/docs/Devmo:How_to_Help Devmo project].
* Contribute to existing extensions.
* Contribute to existing extensions.
* List ideas at (or borrow ideas from) [http://www.allyourideas.com/index.php?title=Category:Mozilla_extension AllYourIdeas extension category]


[[Category:Development]]
[[Category:Development]]

Latest revision as of 19:54, 2 February 2007

This page is part of the extension development documentation project.

Ask your questions in MozillaZine Forums. Also try browsing example code.

Note: development documentation is in process of being moved to Mozilla Development Center (MDC).

Introduction

Extensions allow programmers to add new features to Mozilla applications or allow existing features to be modified. Typically, extensions modify the “chrome” of their target application—the user interface and the scripts that add functionalty to that interface. However, it is also possible for extensions to include compiled code in the form of XPCOM components.

Extension technologies

You will almost certainly need to use the following technologies, although it is not necessary to be an expert in them. You may be able to pick up much of what you need just by examining the source code for other extensions.

  • XUL (XML User-Interface Language). Used to define the onscreen layout of the UI and to attach scripts and style to the interface.
  • JavaScript. The primary scripting language in Mozilla and the language in which most extensions are written.
  • DOM (Document Object Model). Used to manipulate XUL in real-time as well as any HTML documents loaded.
  • XPCOM/XPConnect. Mozilla packages together useful functions into XPCOM (Cross-Platform Component Object Model) components, which may then be accessed from external code, including JavaScript via XPConnect. This allows the extension developers access to the preferences database, the filesystem, and many other pieces of Mozilla technology (Extensions can be written in JavaScript, C++, or even Python with PyXPCOM).
  • CSS (Cascading Style Sheets). Used to style the interface and to attach XBL bindings to XUL documents.

More advanced extensions may require the following technologies.

Getting started

Setting up your environment

  • Please see Setting up extension development environment for development preferences you can set and extensions you can install. It also contains information about running a separate instance of Firefox using a development profile.
  • Getting started with extension development contains tips on easily setting up extensions development environment in Firefox/Thunderbird 1.5 (so that you no longer have to recreate the JAR and/or XPI files each time you make a change in your extension). It is also a quickstart guide containing useful links for beginners and the obligatory helloworld extension, which can be used as a basis of your extensions.

Tutorials

There is a variety of third-party tutorials available which will help with general extension development or with learning specific technologies.

On this Knowledge Base and Mozilla's website:

On other websites:

Weblogs:

Books

As well as web resources, there are a couple of books available describing Mozilla technologies and their usage. Both books cover a comprehensive range of Mozilla technologies. They are available both online and in a more user-friendly dead-tree format.

Getting finished

To make your extension available to others, you need to package it as XPI and release it (make sure you thoroughly test it first!).

Making it better

  • Be sure to make your extensions localizable: Use DTDs for XUL and properties for scripts.
  • Themes apply CSS using various selectors, particularly based on id and class attributes on your elements. Include these to make theme development easier.
  • Try to follow the set of Extension guidelines. This can help to make all extensions act predictably, which increases usability.

Further Information

Local resources

Example code

  • Example Code. Common development tasks and techniques.
  • Example Extensions. Extensions that provide a clear demonstration of a particular technique or function.

Coding style

Development fundamentals

  • General advice for extension development, including how to avoid rebuilding JAR files and how to correctly register overlays.

Troubleshooting

File locations

  • Chrome URLs. Discover the location within the installation folder of the chrome you wish to overlay.

Other resources

Getting help

  • MozillaZine provides a Development forum which is the place for technical questions and an Extensions forum which occasionally has technical discussion but is more useful for releasing extensions to get testing and feedback.
  • The mozilla.dev.* newsgroups are the official location for code-related queries. They are particularly useful if you're implementing an XPCOM component or have a question that MozillaZine posters can't answer. See the developer forums page for a description of each newsgroup.
  • IRC (see also this). Live Developers! Get satisfaction online from red hot developers! (Note: this is not a dating service.), #extdev is the place to be!

Get involved

  • Take a look at Dev : Project ideas to see the list of requested extensions.
  • Help maintaining the Extension development knowledge base. Post your tips and code snippets for others to use. (You may use the MozillaZine forums (preferably Development or Extensions) to discuss the tips.) Also consider helping the Devmo project.
  • Contribute to existing extensions.
  • List ideas at (or borrow ideas from) AllYourIdeas extension category