Well after part 1 on cfx, you should know what the cfx command line tool is, so let's see if you can build a add-on with it now. FYI, I'm going to assume you know how to use git, because if you don't then you should learn asap.

First of all you'll need to have the Jetpack SDK (aka Add-on SDK) source downloaded, I recommend getting the source from github here. I typically keep all git clones from github in a folder called "github" someplace on my HD. After you've got the Jetpack SDK downloaded, you will want to clone my simple Copy HTML add-on for Firefox.

Once you have the Jetpack source, and the Copy HTML source downloaded, navigate to the Jetpack SDK clone in a shell program and follow these instructions. You should have gotten a message that says something like "Welcome to the Add-on SDK. Run 'cfx docs' for assistance.". Running cfx docs here would allow you to access the Jetpack SDK documentation, which is very valuable, and you should get familiar with it. You can disregard the message for now though, and navigate to the Copy HTML clone in your same shell window, once you are there you can use two important commands which build your addon; the first is "cfx xpi" which will build a xpi, and the second is "cfx run" which will build the add-on temporarily and open it in Firefox instance for you to test it out. Typically you will use "cfx run" and few times, testing changes out, before finally running "cfx xpi" and distributing your add-on.

The Copy HTML add-on is a simple add-on which adds a context menu called "Copy HTML" that allows one to copy the HTML source code for the area selected. So if you highlight a blog post, and copy the html, then you will have the html source of the blog post in your clipboard, img tags, anchor links, and all.

Well give this a try, and see if you can get it to work, so that you will be ready for part 3 on using packages.

I'm starting a new series on using the Jetpack SDK, as I like to call it; you may know it as the Add-on SDK, and I wold not hold that against you ;). I won't be talking about the Add-on Builder, that's another topic that I will save for later. If you are new to the Jetpack SDK, and think you are capable of running it via command line, then I hope that this will be a good starting point for you.

So you may be asking yourself "just wtf is cfx?" at this point. Well, cfx is short for Cuddlefish executer iirc, but the point I want to make is that the name doesn't really matter, it was just a arbitrary name for the tool afaik. However, cfx is the command-line tool provided by the Jetpack SDK that will allow you to build, run, and test add-ons that you develop with it, as well as allow you to access the documentation for the Jetpack SDK, and other packages that you may be using; so the name may not be important, but the tool is. The latest version of the documentation can be accessed here, but you will be able to access the documentation of third party packages (more on what these are to come!) with the cfx command-line tool, so it's usually easier to read the documentation with the cfx tool imo.

The instructions on how to install cfx are here, and the instructions on how to use cfx are here. So I won't bore you with those details, but I suggest you read them over, so that you are ahead of the game for part 2 "how to build a addon".

Jetpack is the future. Give the old school add-ons up, it's over. Because sooner or later everything will be possible with some CommonJS style module, which would mean you'd be a fool to ignore these modules.

At the moment, I see normal restartless add-ons as those that write their own bootstrap.js file, which is a method I've been trying to help people learn to do with this series, because I felt it would be a stepping stone to converting existing old school add-ons to Jetpacks which I needed, and that other developers might need as well. Now, I can't explain why very well, but I feel that there is a freedom writing the bootstrap yourself which is very nice, and although it requires me to think about how to cleanup my code a lot more, that's something I needed.

There are serious drawbacks to building Jetpacks I think as well. Such as the file size of Jetpacks, a simple add-on which only uses a couple of the built-in modules is actually shipped with every module built-in to the add-on sdk, which means that anything you build will be at least ~250kb no matter what it does. Now that just sucks for desktop users, but for mobile users it really sucks.

Now though, I'm starting to write some common includes for my restartless add-ons, and those which I contribute to, which I'd like to share, and I'm starting to see Jetpack modules/packages being written that I want to use in my restartless add-ons. So I thought "it'd be nice to have a require() method for bootstrap.js", so I wrote a simple one:

If you copy & paste this code into your bootstrap.js file somewhere near the top of the file then you will have a require() method which will look in your add-on's "packages" folder for a ".js" file with the name you provide, if a module is not found there then the name is assumed to be a relative url.

With that you can start writing CommonJS modules which can be used by Jetpacks and even NodeJS and the like, as well as for your lean mean restartless add-ons. You can even start using Jetpack modules and other CommonJS style modules in your restartless add-on as well!

As always you can checkout Restartless Restart as a example.

This morning I created a Jetpack module which makes it dead simple to include userstyles in a addon.

How to use

Here's a example:

In this example, the addon is loading a userstyle/css file located within it's "data" folder.

If you'd like to use this module, then it is available on github here for those of you that know how to use the addon-sdk. Otherwise, the module is also available on the Addon Builder here, and I have a example of how to use the module in the Addon Builder here. So give it a try!

UserStyles

For those of you that don't already know, a userstyle can be used to modify the css of any webpage (aka content) or Firefox window (aka chrome), and has been made popular by Stylish add-on for Firefox for which there is a site, userstyles.org, where thousands of userstyles can be found.

I was doing a little hacking on the Add-on SDK a few weeks ago and whipped up a simple add-on for Google Reader which demonstrates a typical use case for the widget and panel modules which are part of the addon-kit package which comes with the Mozilla Add-on SDK. I call this add-on GReader Panel, and it basically just creates a clickable widget (which is just an icon that you can put anyplace that a toolbar item can go), which when clicked will open/close a panel about the size of a iPod screen with Google Reader mobile.

Check it out on AMO!

If you're interested in seeing the code, it's available on Github like all of my open source work.

I had a very difficult time trying to setup FlightDeck locally for development when I tried months ago, partly because I couldn't find documentation that walked me all of the way through setting it up, and also partly due to the fact that I'm so new to Python. So one of my personal goals for the Mozilla all hands work week was to seek help from Piotr Zalewa (aka Zalun) on how to install FlightDeck on my macbook. Well he was very kind and helped me out, and now I've got FlightDeck running locally! so I thought I would document what I did as best I can so that I don't forget this information, and so that I can share it with you.

Requirements (for these instructions)

• OSX
• Python 2.6
• Git
• MySQL

Installation

Now add the following to ~/.bash_profile

Then close your terminal instance and start a new one, then type to following commands:

Now you are in a virtual environment called "flightdeck", when you want to return to this virtual environment later on remember to use 'workon flightdeck'.

Now you need to install the required dependencies, to do so to the following:

Now you'll need to create a new settings_local.py file in the root (where settings.py can be found):

Note: you need to create a new MySQL db called 'flightdeck-db' (or whatever you want it to be).

Then type the following:

When you are asked "Would you like to create one now? (yes/no):" then type "yes" and follow the instructions from there.

Now you're done! and FlightDeck should be running locally now (you should see a message that says something like "Development server is running at http://127.0.0.1:8000/")

When you want to shutdown the server go to the terminal window and hit ctrl+c.

The next time that you want to run the server do this:

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.