LivemarksLiberated: The First Chickenfoot Script to Hit the Repository

Today I was the first to donate a script to the Chickenfoot Script Repository. We set up the wiki for the repository right after UIST 2005, but we have been focusing so much of our efforts on improving Chickenfoot that we didn't have a chance to do much more with it until now.

The script that I wrote is called LivemarksLiberated; it lets the user override the default behavior of the Live Bookmarks button in Firefox. Oftentimes, I want to get the URL of a feed onto my clipboard, so I can paste it into another RSS aggregator, such as Google Reader. Although the Live Bookmarks button is handy because it lists the feeds for the page, the only thing you can do with these feeds is add them to a bookmarks folder in Firefox. For anyone who prefers a different reader, this can be annoying.

Originally, I planned to write a new Firefox extension that would allow the user to copy the URL of the feed to the clipboard instead of adding it as a Live Bookmark. I also considered integrating the extension with Google Reader, as I was surprised that no such extension already existed on Mozilla Update. Fortunately, I did a little blogrolling after my friend Akshay launched his PartyChat bot for Google Talk. I ended up at Mihai Parparita's blog, which had an interesting type of RSS link that I had never seen before:

After doing a little searching, I learned that this RSS button is supported by Google. When you click on it, it brings you to a page that asks if you would like to add the feed to either Google Reader or Google Personalized Homepage. Hmm...adding a URL to Google Reader would require automated webform submissions...and then it was clear: instead of making a full-blown Firefox extension to solve my problem, I should write a Chickenfoot script!

Even for a simple script like LivemarksLiberated, turning it into a nice Firefox extension involves quite a bit of work. To do it right, you need to add a nice Options panel for the extension, as well as support for internationalization of that panel. Then you need to test the extension on multiple versions of Firefox, maybe even Mozilla, etc. I wasn't up for it because the fun part of the creating the extension is writing the code that comprises the Chickenfoot script, so that's all I did. If someone else wants to take the time to package it up and make a website about it, then they can go right ahead (though I would appreciate a link back, in return).

But what I want to talk about here is how I figured out how to hook into the browser to write this script. There are a lot of Firefox extensions available now. Let's call those solved problems. These can be useful to novice extension writers, but what is even more useful, I think, is learning how those problems got solved.

For LivemarksLiberated, I started out by using the DOM Inspector to find out the name of the Live Bookmarks button. (The DOM Inspector should be available under the Tools menu in Firefox; if not, you'll have to reinstall Firefox and do a Custom Installation to make sure that it's included.) Once I had the DOM Inspector open, I navigated to a page with a feed (such as this one), chose File / Inspect a Window and selected my current browser window from the list. Then I clicked on the Find a node to inspect by clicking on it button:

I clicked on the Live Bookmarks button in the browser which selected the analogous node in the DOM Inspector. From there, I right clicked on the node and selected Copy XML to see what was going on inside. I pasted the contents into a text editor and saw:

<statusbarpanel tooltiptext="Page has no feeds for Live Bookmark"
                id="livemark-button"
                type="menu"
                class="statusbarpanel-menu-iconic"
                chromedir="ltr">
  <menupopup menugenerated="true"
             onpopupshowing="return livemarkFillPopup(this);"
             oncommand="livemarkAddMark(window._content, event.target.getAttribute('data'));">
    <menuitem label="Subscribe to 'RSS 2.0'..."
              data="http://www.bolinfest.com/changeblog/feed/"
              tooltiptext="http://www.bolinfest.com/changeblog/feed/"/>
    <menuitem label="Subscribe to 'Atom 0.3'..."
              data="http://www.bolinfest.com/changeblog/feed/atom/"
              tooltiptext="http://www.bolinfest.com/changeblog/feed/atom/"/>
  </menupopup>
</statusbarpanel>

From this, I deduced that livemarkFillPopup() was invoked to produce the popup menu when the button was clicked, and livemarkAddMark() was called once an item was selected from the popup menu. I was curious to know what these functions did, so I ran the following code in Chickenfoot:

output(chromeWindow.livemarkFillPopup);
output(chromeWindow.livemarkAddMark);

This dumped the source code for these two functions into the Chickenfoot console. By looking at them, I realized that I could just override livemarkAddMark() to add the functionality to Firefox that I wanted. Now that I knew where to hook in, it only took a little bit of code to get things working – don't be intimidated by the size of the script! Even though it is about 100 lines long, most of it is documentation. The nifty use of Chickenfoot is in these lines:

with(fetch('http://fusion.google.com/add?feedurl=' + url)) {
  if (mode == GOOGLE_READER) {
    click('Add to Google reader link');
  } else {
    click('Add to Google homepage link');
  }
}

This code automates the process of going to the Google webform. It does so in a hidden window by using Chickenfoot's fetch() command (while developing the script, I used the openTab() command to see what was going on). Once it reaches the webform, it uses click() to select the appropriate link, depending upon the value the user assigned to mode earlier in the script.

Chickenfoot and the DOM Inspector are both great tools for poking at Firefox. If you can learn to use them to reveal where you need to hook into the browser, you can spend more time working on the meat and potatoes of your next extension, which I assure you is much more fun.