I gave a presentation on Jetpack to the VanJS meetup group last night and I had a good time. It was my first presentation and I learned a lot I think, time will surely tell though. My main goal was to shine the light on Jetpack and hopefully start people thinking about how they might want to extend Firefox with Jetpack, which I think I achieved for the most part, so I'm happy about that.

Remember that if you have any questions that you'd like to ask me I'm easy to contact, and please feel free to do so. Also, the Jetpack discussion group is a great place to talk Jetpack.

Slides

Anyhow, here are the slides if you're interested, but they're sparse:

[More]

After a blog post I wrote last month, "The Context Menu Module & Microformats", Michael Kaply wrote a comment reminding me that there is an API for Microformats built in to Firefox.

So I spent a little time getting familiar with with the API and wrote a Jetpack module for it, which you can find here. This module just a wrapper to export the Microformats API, which can be seen in this file (only viewable from Firefox).

It might be the smallest module that I ever write =]

Get the Microformats Jetpack Module here.

Most members of the userscript community already know about Anthony Lieuallen's User Script Compiler, and Gina Trapani's Greasemonkey Multi Script Compiler (GMSC) which she based on Anthony's compiler. These two compilers allow a user script author to convert their userscript in to a Firefox extension, at which point the author can add functionality/features that Firefox extensions have, and usersripts do not have. So for example they can add UI elements to the browser that work with the userscript, or read+write files from the file system, etc..

I've used both compilers in the past and I find they are very handy, especially when you want to package disparate user scripts together in a single Firefox extension, or add functionality to a existing userscript, essentially upgrading the user script.

Now, around the time that the Jetpack SDK was released last month I started thinking about how the possibility of creating compilers similar to the ones above but for making Jetpacks that use userscripts. The other goal that immediately struck me was to make a userscript manager out of Jetpack, which is an idea I know others have been thinking about, at least Tim Smart expressed the same idea in the #greasemonkey irc channel not long ago.

Well, last week I was toying around with the idea of running a userscript within a Jetpack, and I had a lot of success, because within a few hours I was able to create a Jetpack which contained a collection of userscripts and it worked perfectly!

After I accomplished this, I started thinking about a road map for these ideas, so here it is..

Roadmap

Here are my goals for this project:

Complete the Userscript Package

This package has got to be dead simple to use, so that adding a userscript to a jetpack is as simple as dropping the userscript(s) in to the data folder of your jetpack, requiring the userscript package, and adding a line or two of code to your jetpack's main module which would make the jetpack aware that it has a userscript and act accordingly.

Furthermore, I want this package to be extendable so that third party's can create APIs that will be available in the userscript sandboxes. For example, a common question asked by new userscript authors is how to store data to disk in a file, which they quickly learn that they cannot do. But, when this package is complete their new option would be to write their userscript as they normally would, then if they come to the point where they want more API features than the GM_* API provides, then they will have the option to compile their userscript in to a jetpack, at which point they can start providing their userscript with more APIs that allow things such as storing data to a file on the file system.

Create a Userscript to Jetpack Compiler

This could be a website, command line package, or both, I don't really care at this point, but this must exist, and shouldn't be difficult once the Userscript package is complete. All that should be needed is a sparse Jetpack skeleton, which takes 1 or more userscripts and dumps them into the data folder, then creates a basic main module to run the userscripts.

Create a Jetpack to Manage Userscripts

Simply put this would be an alternative to Greasemonkey, maybe not quite as advanced as Greasemonkey, or with as nice a UI, but works and has all of the advantages of a Jetpack, namely you can install/update/remove without the need to restart, and takes advantage of the jetpack-core APIs which should mean that I won't have to worry as much about platform changes.

The Userscript Jetpack Package

I've posted the code I was working with last week in a git repo which is available on Github here. If you'd like to help out then fork this project and start hacking.

Example

If you would like to see the example I was working on last week, then it is available on Github as well here. This example is a remake of the BetterGWO Firefox addon that I created last year with Gina's GMSC.

Conclusion

If any of those goals sparked your interest then consider helping out, I would enjoy the company. Otherwise, I hope to have at least the userscript package mainly complete by the end of this month, so stay tuned.

Originally posted on Mozilla's Jetpack Blog

The Jetpack team recently released a context menu module in version 0.3 of the Jetpack SDK. This post will discuss the context menu module’s features and how it can be used to create an extension that allows users to interact with microformatted data on the web.

Microformats

If you are familiar with microformats, you can skip this section. In case you are not familiar with microformats, they are simply specifications on how to pattern commonly published data (contacts, events, reviews, etc.) in HTML so it can be easily consumed.

hCard, geo, & adr

Take the hCard microformat specification for example, an hCard represents a person, organization, or place and includes information such as a name, contact info, address info, and perhaps their geo coordinates all in HTML. Here is an example of a microformat that contains this information:

<div class="vcard">
<a class="fn org url" href="http://www.commerce.net/">CommerceNet</a>
<div class="adr">
<span class="type">Work</span>:
<div class="street-address">169 University Avenue</div>
<span class="locality">Palo Alto</span>,
<abbr class="region" title="California">CA</abbr>
<span class="postal-code">94301</span>
<div class="country-name">USA</div>
</div>
<div class="geo">Geo Coords:
<span class="latitude">37.386013</span>
<span class="longitude">-122.082932</span>
</div>
</div>

The Context Menu Module

You can find documentation and further details on the context menu module here. The primary feature of the context menu module is the ability to create items in the context menu that are shown when right clicking on various content within the browser or a web page. CSS is used to specify in which contexts your new context menu items will appear. If you create a new context menu item whose context is set to “a” then the menu item will appear in all menus shown when the user right-clicks a link.

Bring The Two Together

The combination of microformats and the context menu module makes many practical Jetpack ideas possible. When websites microformat data on their site, and users have extensions installed in their browser which allow for consumption of microformatted data, users productivity can be greatly enhanced.

Even when a website does not microformat data on its pages, a user script or a Jetpack Page Mod can be written to enhance the data on those pages with microformatting.

An Example

In order to show you how useful and extension that combines microformats and Jetpack’s context menu module is, I have created a jetpack-based extension which adds a ‘Find on Google Maps’ menu item to the context menu when the user right clicks on a geo or adr microformat – geo is used for geo coordinates, and adr for addresses. When the user clicks the extension’s context menu item, the targeted geo coordinate or address is displayed on Google Maps in a new tab. You can find this extension here on AMO, as well as the source code here. The bulk of the source code is < 50 lines.

Summary

If you maintain a website that isn’t properly tagged with microformats I would suggest you consider adding them to your content. If you are a user that notices a site that hasn’t properly tagged their site then you can either request that they do so, or write either a user script or page mod that does so for you. Once you have microformatted data you can then write & use extensions to interact with the data.