Using Jetpack SDK, part 2: Building Add-ons

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.