Skip to main content

If you don't have an IBM ID and password, register here.

By clicking Submit, you agree to the developerWorks terms of use.

The first time you sign into developerWorks, a profile is created for you. This profile includes the first name, last name, and display name you identified when you registered with developerWorks. Select information in your developerWorks profile is displayed to the public, but you may edit the information at any time. Your first name, last name (unless you choose to hide them), and display name will accompany the content that you post.

All information submitted is secure.

The first time you sign in to developerWorks, a profile is created for you, so you need to choose a display name. Your display name accompanies the content you post on developerworks.

Please choose a display name between 3-31 characters. Your display name must be unique in the developerWorks community and should not be your email address for privacy reasons.

By clicking Submit, you agree to the developerWorks terms of use.

All information submitted is secure.

Tip: Use the new microformats API in your Firefox 3.0 Extensions

Enable your Firefox extensions for the Semantic Web

Rob Crowther (robert@crowther.info), Web developer, Freelance
Photo of Rob Crowther
Rob Crowther is a Web Developer from London and is currently moderator of the Exploring Semantic Web Technologies forum on developerWorks. He has a keen interest in Web Standards and blogs sporadically at http://www.boogdesign.com/b2evo/.

Summary:  The upcoming Firefox 3.0 release has built-in support for microformats in the form of an API that you can access from a Firefox extension. In this tip, you follow a simple example of how to use this API from within your extension code. You take a skeleton Hello World extension and give it the ability to store an hCard from any Web page and then use that stored hCard to populate a Web form.

View more content in this series

Date:  03 Jun 2008
Level:  Intermediate
Also available in:   Chinese

Activity:  18211 views
Comments:  

To follow along with this tip you'll need a basic understanding of how extensions are built for Firefox. Fortunately, if you write JavaScript and HTML, you already have almost all the knowledge you need. For an overview of extension development, check out the Resources at the end of the tip. You'll only cover the basics of it in this tip. You will also need Firefox 3.0, which at the time of writing this is not yet released. If you don't have it installed, then download and install the latest release candidate or a nightly build. If you want to avoid anything from happening to your existing Firefox profile, set up a separate profile for developing. For further details on how to set up an extension development environment on Mozilla Developer Center, see Resources.

Create the extension framework

Frequently used acronyms

  • API: application programming interface
  • HTML: Hypertext Markup Language
  • UI: User Interface
  • XML: Extensible Markup Language
  • XUL: XML User Interface Language

You'll use the extension wizard to build the basic structure for you. The file I generated is available from Downloads. Download and extract that file into your working directory if you want to follow along.

Rather than build the extension and install it, you'll map the working directory into the Firefox extension folder. Create a text file with the name hcardformfiller@rob.crowther and put it in the path to the extension files in your working directory (see Listing 1). Then save this file in the extensions directory of your development profile, which for me is /home/robert/.mozilla/firefox/r6z6s4yl.default30/extensions (see the Mozillazine knowledge base for more details).


Listing 1. The hcardformfiller@rob.crowther file
                
/home/robert/code/xpcom/hcardformfiller

After you've done this, restart your Firefox development version using the script built in Listing 1. The extension should install and you should be able to access the default Hello World elements.


Add UI elements

Since you want the user to be able to trigger the extension functionality, you'll provide them with a couple of toolbar buttons. To add toolbar buttons you'll need to describe them in the XUL overlay. Open the file hcardformfiller/content/firefoxOverlay.xul and replace what's already there with the code in Listing 2.


Listing 2. The firefoxOverlay.xul file
                
<?xml-stylesheet href="chrome://hcardformfiller/skin/overlay.css" 
   type="text/css"?>
<!DOCTYPE overlay SYSTEM "chrome://hcardformfiller/locale/hcardformfiller.dtd">
<overlay id="hcardformfiller-overlay"
         xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
  <script src="overlay.js"/>
  <stringbundleset id="stringbundleset">
    <stringbundle id="hcardformfiller-strings" 
src="chrome://hcardformfiller/locale/hcardformfiller.properties"/>
  </stringbundleset>
  <toolbarpalette id="BrowserToolbarPalette">
  <toolbarbutton id="hcardformfiller-toolbar-button-grab"
    image="chrome://hcardformfiller/content/hcardformfiller16.png"
    label="&hcardformfillerToolbar.grabLabel;"
    tooltiptext="&hcardformfillerToolbar.grabTooltip;"
    oncommand="hcardformfiller.onToolbarButtonGrabCommand()"
    class="toolbarbutton-1 chromeclass-toolbar-additional"/>
  <toolbarbutton id="hcardformfiller-toolbar-button-paste"
    image="chrome://hcardformfiller/content/hcardformfiller16.png"
    label="&hcardformfillerToolbar.pasteLabel;"
    tooltiptext="&hcardformfillerToolbar.pasteTooltip;"
    oncommand="hcardformfiller.onToolbarButtonPasteCommand()"
    class="toolbarbutton-1 chromeclass-toolbar-additional"/>
  </toolbarpalette>
</overlay>

Listing 2 gives you two toolbar buttons, a Grab button and a Paste button. For convenience, they both use the same icon, hcardformfiller.png, which is available in the Download file. If you save everything at this point and restart Firefox, you can drag the buttons onto your navigation toolbar if you right click on each of them and select Customize. Figure 1 shows the end results.


Figure 1. The toolbar buttons in place
The toolbar buttons in place

Grabbing microformats from the page

Now that you have toolbar buttons, you need them to do something when users click them. This means you'll have to write the JavaScript functions that support toolbar buttons defined in Listing 2. First, when the user clicks the Grab toolbar button, you want it to search the current page for microformats and store the first one it finds. Open up hcardformfiller/content/overlay.js and replace the code with Listing 3.


Listing 3. The overlay.js file
                
Components.utils.import("resource://gre/modules/Microformats.js");
var hcardformfiller = {
  onLoad: function() {
    this.initialized = true;
    this.strings = document.getElementById("hcardformfiller-strings");
    this.uF = {};
  },
  onToolbarButtonGrabCommand: function(e) {
    var uFcount = 
            Microformats.count('hCard', content.document, {recurseExternalFrames: true});
    if (uFcount > 0) {
        var uFlist = 
            Microformats.get('hCard', content.document, {recurseExternalFrames: true});
        this.uF = uFlist[0];
    }
  }
};
window.addEventListener("load", function(e) { hcardformfiller.onLoad(e); }, false);

The first line of Listing 3 loads the microformats API, which is needed for anything else to work. Further down, you define the onToolbarButtonGrabCommand, which is the code that runs when a user clicks the Grab toolbar button. Next, call Microformats.count() to see if the page has any hCards. This method accepts a microformats name, a document reference to start the search from, and an optional array of parameters. Here you search for hCards anywhere in the current window, and you allow the parser to recurse down through any frames it encounters. After you determine that you have at least one hCard, you then get a list of all hCards on the page using the Microformats.get() method. The parameters are identical to your previous call, but this time the code returns an array of objects of type hCard. To keep the example simple, you only grab the first one and store it in your global variable.


Inserting the hCard into a form

Now that you've grabbed the hCard you want to do something with it. I created a simple form in Listing 4 for the extension to populate with hCard details. Just put it into a standard HTML Web page and save it locally—you don't need to process the submit form for the purposes of this tip.


Listing 4. A simple target form for the extension
                
<h1>hCardFormFiller Target Form</h1>
<form action="#" method="post">
    <label>Name: <input type="text" id="name" /></label><br />
    <label>Email: <input type="text" id="email" /></label><br />
    <label>Home page: <input type="text" id="homepage" /></label><br />
    <label>Street Address: <input type="text" id="address1" /></label><br />
    <label>City: <input type="text" id="address2" /></label><br />
    <label>Region: <input type="text" id="city" /></label><br />
    <label>Postcode: <input type="text" id="postcode" /></label><br />
    <input type="submit" />
</form>

Now you need to define the function attached to the Paste button defined in Listing 2, so when the user clicks the button, the form is filled in. See the code for your extension to fill this form in Listing 5.


Listing 5. Adding the paste command to overlay.js
                
onToolbarButtonPasteCommand: function(e) {
 if (this.uF.fn) {
   content.document.getElementById('name').value = this.uF.fn;
   content.document.getElementById('email').value = this.uF.email[0].value;
   content.document.getElementById('homepage').value = this.uF.url[0];
   content.document.getElementById('address1').value = this.uF.adr[0]['street-address'];
   content.document.getElementById('address2').value = this.uF.adr[0].locality;
   content.document.getElementById('city').value = this.uF.adr[0].region;
   content.document.getElementById('postcode').value = this.uF.adr[0]['postal-code'];
 }
}

The first step is to see if there is an hCard to paste—the fn is one of the two required fields in an hCard microformats. If fn exists, then you have an hCard. You then put that fn in the first field of the form. An hCard can have multiple e-mail values, so the email property on hCard is an array—you just grab whatever the first one is—and each email has two properties: type, which can be internet, x400, or pref for preferred; and value, which is the actual e-mail address. The url property of hCard is also an array but this time without subproperties, whereas the adr property is an array of the atomic adr microformat, which you can also manipulate directly outside hCard. The main point to note on these adr properties is that I used the alternative reference syntax in JavaScript, because the hyphen gets treated as a minus otherwise. You can see the results in Figure 2.


Figure 2. Filling in the form from Listing 4 with a stored hCard
Filling in the form from Listing 4 with a stored hCard

In Figure 2, I grabbed the hCard off the about page of my Web site, then used it to fill in the form—seven fields filled in with a couple of clicks of the mouse!


Summary

In this tip, you took a standard Firefox extension template and quickly gave it the ability to use the hCard microformats thanks to the new APIs in Firefox 3.0. You can see that the API makes manipulating microformats data very easy. With very little code, you can build an extension that is a massive time saver, and to add similar features to your own extensions will be very little work.

As a next step, you might consider generalizing the paste action to provide a mapping file for any form, and allow use of an hCard microformats to fill it. A shared repository of mappings can vastly simplify the process of filling in forms on the Web.



Download

DescriptionNameSizeDownload method
Sample codehcardformfillerfiles.zip24KB HTTP

Information about download methods


Resources

Learn

Get products and technologies

  • IBM trial software for product evaluation: Build your next project with trial software available for download directly from developerWorks, including application development tools and middleware products from DB2®, Lotus®, Rational®, Tivoli®, and WebSphere®.

Discuss

About the author

Photo of Rob Crowther

Rob Crowther is a Web Developer from London and is currently moderator of the Exploring Semantic Web Technologies forum on developerWorks. He has a keen interest in Web Standards and blogs sporadically at http://www.boogdesign.com/b2evo/.

Report abuse help

Report abuse

Thank you. This entry has been flagged for moderator attention.


Report abuse help

Report abuse

Report abuse submission failed. Please try again later.


developerWorks: Sign in

If you don't have an IBM ID and password, register here.


Forgot your IBM ID?


Forgot your password?
Change your password


By clicking Submit, you agree to the developerWorks terms of use.

 


The first time you sign into developerWorks, a profile is created for you. This profile includes the first name, last name, and display name you identified when you registered with developerWorks. Select information in your developerWorks profile is displayed to the public, but you may edit the information at any time. Your first name, last name (unless you choose to hide them), and display name will accompany the content that you post.

Choose your display name

The first time you sign in to developerWorks, a profile is created for you, so you need to choose a display name. Your display name accompanies the content you post on developerWorks.

Please choose a display name between 3-31 characters. Your display name must be unique in the developerWorks community and should not be your email address for privacy reasons.

(Must be between 3 – 31 characters.)


By clicking Submit, you agree to the developerWorks terms of use.

 


Rate this article

Comments

Help: Update or add to My dW interests

What's this?

This little timesaver lets you update your My developerWorks profile with just one click! The general subject of this content (AIX and UNIX, Information Management, Lotus, Rational, Tivoli, WebSphere, Java, Linux, Open source, SOA and Web services, Web development, or XML) will be added to the interests section of your profile, if it's not there already. You only need to be logged in to My developerWorks.

And what's the point of adding your interests to your profile? That's how you find other users with the same interests as yours, and see what they're reading and contributing to the community. Your interests also help us recommend relevant developerWorks content to you.

View your My developerWorks profile

Return from help

Help: Remove from My dW interests

What's this?

Removing this interest does not alter your profile, but rather removes this piece of content from a list of all content for which you've indicated interest. In a future enhancement to My developerWorks, you'll be able to see a record of that content.

View your My developerWorks profile

Return from help

static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=1
Zone=XML, Web development, Open source
ArticleID=311174
ArticleTitle=Tip: Use the new microformats API in your Firefox 3.0 Extensions
publish-date=06032008
author1-email=robert@crowther.info
author1-email-cc=dwxed@us.ibm.com

Tags

Help
Use the search field to find all types of content in My developerWorks with that tag.

Use the slider bar to see more or fewer tags.

For articles in technology zones (such as Java technology, Linux, Open source, XML), Popular tags shows the top tags for all technology zones. For articles in product zones (such as Info Mgmt, Rational, WebSphere), Popular tags shows the top tags for just that product zone.

For articles in technology zones (such as Java technology, Linux, Open source, XML), My tags shows your tags for all technology zones. For articles in product zones (such as Info Mgmt, Rational, WebSphere), My tags shows your tags for just that product zone.

Use the search field to find all types of content in My developerWorks with that tag. Popular tags shows the top tags for this particular content zone (for example, Java technology, Linux, WebSphere). My tags shows your tags for this particular content zone (for example, Java technology, Linux, WebSphere).

Special offers