How to add a new feed handler in Firefox 2.0

Firefox 2.0 is out… uhm? What are you saying? What great news?… oh yeah, but this isn't the main topic of this post.

As some of you probably remember, in June I made a few tests with Firefox 2.0 Bon Echo 3, focused on how the new Firefox handles feeds. Firefox 2 gives you full control over Web feeds, showing you a preview and letting you choose how you want to subscribe.

At the end of the tests I wrote an article showing how it's possible to add a new content handler, a.k.a. web aggregator, in Firefox 2.0… it was also on Digg! (Note. The article is no longer available). Since Firefox 2.0 was not yet released at the time the article was written, I didn't know that there was an easier way to add a content handler without manually tweaking the Firefox registry.

Using registerContentHandler() JavaScript function it's possible to add a new feed handler with just one click… how? Let me show you.

Adding a new feed handler to Firefox 2.0 with registerContentHandler()

registerContentHandler() is a JavaScript function that allows you to register a new content handler in Firefox 2.0.

It accepts three required parameters:

mimeType

the content MIME type. For a feed, it must be application/vnd.mozilla.maybe.feed.

uri

the content handler URI. %s can be used as a placeholder for the resource URI.

title

the content handler Title

Once again, let's use Rmail as an example. Rmail's add-new-subscription URI is (always the same) http://www.r-mail.org/bm.aspx?rss=%s while the content handler title is Rmail. Thus, the final JavaScript should look like the following.

navigator.registerContentHandler('application/vnd.mozilla.maybe.feed',
'http://www.r-mail.org/bm.aspx?rss=%s',
'Rmail');

You can put/call this JavaScript function anywhere in an HTML page, for example as a link (as Netvibes did)…

Example 1.

Look & feel

Click here and add Rmail

Code

<p>
<a href="javascript:window.navigator.registerContentHandler('application/vnd.mozilla.maybe.feed',
'http://www.r-mail.org/bm.aspx?rss=%s','Rmail');">Click here</a>
and add Rmail
</p>

You can also put it into a form button…

Example 2.

Look & feel

Code

<p>
<input type="button" name="add" value="Click here and add Rmail"
onclick="window.navigator.registerContentHandler('application/vnd.mozilla.maybe.feed',
'http://www.r-mail.org/bm.aspx?rss=%s','Rmail');" />
</p>

or include it in a JavaScript function and call it anywhere in the page.

Example 3.

Code

<script type="text/javascript">
function subWith() {
navigator.registerContentHandler('application/vnd.mozilla.maybe.feed', 'http://www.r-mail.org/bm.aspx?rss=%s', 'Rmail');
}
</script>
<input type="button" name="add" value="Click here and add Rmail"
onclick="function subWith();" />

More power to registerContentHandler()

This tutorial might be closed here, but the real reason why I wrote this post is to show how it's possible to add more power to registerContentHandler() with a few JavaScript lines.

The idea comes from this post where Randy shows a button to add Rmail as a new content handler. In a comment pat asks which technique is better: Randy's magic button (see examples 2 and 3) or my tutorial (Note. The tutorial is no longer available).

This is Randy's answer.

Pat, Simone's technique is actually superior as it also includes the email address. I'm working on making that possible too! Randy

The only difference between my code and Randy's code is that I used the following Rmail subscription string (please note the mailto parameter)

http://www.r-mail.org/bm.aspx?rss=%s&mailto=YOUR_EMAIL

instead of

http://www.r-mail.org/bm.aspx?rss=%s

Thus, what we should do is find a way to allow users to type their own email address and append it to the content handler URI.

My first idea was to create a new input text field. It's better than using other techniques such as JavaScript input boxes since the field can be easily filled with a server-side programming language in a more complex site, can be validated and you can reuse in a thousand ways. While I was writing the code, I decided to do a little more. Why not create a script that allows developers to add custom arguments to a content handler URI instead of a single one? Rmail just needs a mailto param but other readers may need mail and user…

This is what I wrote!

The following script allows you to register a new content handler in Firefox 2.0 by calling a simple function. In addition, you can create as many form fields as you wish calling them name="args". For each field, the script will collect its value and if the field isn't empty, will append the value to the content handler URI.

Let's see an example. Again, I will use Rmail and I will show you how easy it is to append your personal email to the URI.

Example 4.

<!-- include the script -->
<script type="text/javascript" src="firefox2-registerFeedHandler.js"></script>

<!-- add as many fields as you wish.
Each field called 'args' will be appended to the content handler URI.
The argument name will be its unique form ID, the value the field value.
-->
<input type="text" name="args" id="email" value="" /><br />

<!-- call the function, use subWith(true) instead of subWith()
to collect form fields.
-->
<input type="button" name="subWith" onclick="subWith(true);" value="Make Rmail your Firefox RSS handler" />

First, you must include the script. Don't forget to customize chUri and chTitle variables, as written at the top of the javaScript file.

Then add an input text field for each argument you wish to append to the URI. You can also use hidden inputs to pass hidden values. Don't forget to call them args or the script will not work.

Now call the subWith() function. You can use a link, a button, or a common JavaScript event.

Enjoy the confirmation dialog! :D