Getting started
Firefox version: 2.0.0.4 (Mac)
Why this blog?
I decided that I wanted to learn how to write Firefox extensions because some of the research I am doing will probably require that. I very quickly realized that there is very little good documentation on the topic available (or at least easily findable) on the net so I thought I would try to document my learning process for the benefit of others who will need to go down this path. Realizing that the relevant standards and implementations change very rapidly, I am going to include Firefox version number I am using in each post so that people can judge its relevance for their work.
What should you expect?
A few words about my background and what I want to accomplish. I am a reasonably experienced Java developer and I am quite familiar with HTML and CSS but I haven’t touched JavaScript since 1997, I think. I have also some experience manipulating XML from Java so I have had some exposure to the basic concepts from the Document Object Model (DOM).
My research interests include adaptive user interfaces so over the course of the next several months I think I would like to learn how to do the following:
- parse and analyze new pages as soon as the user navigates to them;
- automatically instrument new pages (especially those containing AJAX applications) in order to see how the user interacts with the page (and therefore build a usage model);
- keep persistent state;
- automatically augment third-party pages with new elements;
- exchange information with a central server.
Hello World!
The single most helpful resource for getting started was a tutorial from the Mozilla Developer Center (MDC). It explains all of the components that go into building the most basic extension (which a “Hello World!” message to the status bar) and includes pointers to all the other basic resources one needs. This tutorial and several other sites also recommend an older tutorial from mozillaZine -- the extension it describes, however, does not work with Firefox 2.0 (it seems to have been written for Firefox 1.5). I still found that tutorial helpful because unlike the one from MDC, it included JavaScript, showed how to add a custom item to the Tools menu and how to pop up custom dialog boxes. Using the structure from the first tutorial and some of the code from the second, I felt like I got a good handle on how to get started.
The code is here and it shows the following features:
• GUI: adding a custom element to the status bar and a custom menu item in the Tools menu
• Localization: the labels are defined in .dtd files in the locale directory
• JavaScript invoked by clicking on the custom menu item:
• traverses Firefox GUI DOM model
• logs to the JavaScript error console (available through the Tools menu) -- see more on how to write to the console
• dynamically modifies the text in the custom status bar element
Few other pointers
- A re-introduction to JavaScript from mozillaZine -- a good refresher for those, who already know Java or C/C++/C#
- XULplanet -- a set of XUL references (XUL is the XML-based language that the Firefox user interface is written in)
- A full DOM reference from MDC
- “DOM Scripting” by Jeremy Keith -- a very nice overview of the techniques for manipulating the DOM with JavaScript; written for people who are beginner programmers so if you already have some experience, you will be able to go through it very quickly. It provides lots of examples and practical tips. I found it quite helpful and got through the first five chapters in slightly over an hour.
Tools
There do not appear to be any “ideal” tools for Firefox extension writing. I ended up installing JSEclipse and Eclipse Colorer plugins for Eclipse and I find that they are somewhat helpful but still lacking.
Acknowledgments
Besides the sources cited above, I am also learning a lot from Mira, Raphael and Jeff.
Why this blog?
I decided that I wanted to learn how to write Firefox extensions because some of the research I am doing will probably require that. I very quickly realized that there is very little good documentation on the topic available (or at least easily findable) on the net so I thought I would try to document my learning process for the benefit of others who will need to go down this path. Realizing that the relevant standards and implementations change very rapidly, I am going to include Firefox version number I am using in each post so that people can judge its relevance for their work.
What should you expect?
A few words about my background and what I want to accomplish. I am a reasonably experienced Java developer and I am quite familiar with HTML and CSS but I haven’t touched JavaScript since 1997, I think. I have also some experience manipulating XML from Java so I have had some exposure to the basic concepts from the Document Object Model (DOM).
My research interests include adaptive user interfaces so over the course of the next several months I think I would like to learn how to do the following:
- parse and analyze new pages as soon as the user navigates to them;
- automatically instrument new pages (especially those containing AJAX applications) in order to see how the user interacts with the page (and therefore build a usage model);
- keep persistent state;
- automatically augment third-party pages with new elements;
- exchange information with a central server.
Hello World!
The single most helpful resource for getting started was a tutorial from the Mozilla Developer Center (MDC). It explains all of the components that go into building the most basic extension (which a “Hello World!” message to the status bar) and includes pointers to all the other basic resources one needs. This tutorial and several other sites also recommend an older tutorial from mozillaZine -- the extension it describes, however, does not work with Firefox 2.0 (it seems to have been written for Firefox 1.5). I still found that tutorial helpful because unlike the one from MDC, it included JavaScript, showed how to add a custom item to the Tools menu and how to pop up custom dialog boxes. Using the structure from the first tutorial and some of the code from the second, I felt like I got a good handle on how to get started.
The code is here and it shows the following features:
• GUI: adding a custom element to the status bar and a custom menu item in the Tools menu
• Localization: the labels are defined in .dtd files in the locale directory
• JavaScript invoked by clicking on the custom menu item:
• traverses Firefox GUI DOM model
• logs to the JavaScript error console (available through the Tools menu) -- see more on how to write to the console
• dynamically modifies the text in the custom status bar element
Few other pointers
- A re-introduction to JavaScript from mozillaZine -- a good refresher for those, who already know Java or C/C++/C#
- XULplanet -- a set of XUL references (XUL is the XML-based language that the Firefox user interface is written in)
- A full DOM reference from MDC
- “DOM Scripting” by Jeremy Keith -- a very nice overview of the techniques for manipulating the DOM with JavaScript; written for people who are beginner programmers so if you already have some experience, you will be able to go through it very quickly. It provides lots of examples and practical tips. I found it quite helpful and got through the first five chapters in slightly over an hour.Tools
There do not appear to be any “ideal” tools for Firefox extension writing. I ended up installing JSEclipse and Eclipse Colorer plugins for Eclipse and I find that they are somewhat helpful but still lacking.
Acknowledgments
Besides the sources cited above, I am also learning a lot from Mira, Raphael and Jeff.
0 Comments:
Post a Comment
<< Home