Posted by: felipe | April 14, 2010

Creating my Jetpack dev environment

On the last couple of days I’ve started playing with the new Jetpack SDK, and I’m still working on understanding the main concepts of its development environment. I’m interested to find a good workflow while working on Jetpack (and to know how others are doing it), and since more people might be wondering the same, I’ll blog here about the dev env that I started building for me.

By far, my favorite tool to work with JS is the extremely awesome (this is an understatement) JS Shell running from the Extension Developer add-on. So, what I wanted was to be able to get Jetpack’s context inside the shell.

To do this, I first created a new Firefox profile (called dev) and installed said add-on on it. Now, we need to run Jetpack using that profile. To run Jetpack on Firefox, except when running it from the test harness, you need to run it from a package with a main.js module. So, I created a simple package from the `cfx docs` tutorial and added a main.js module. Now, we can load up our Firefox profile from this package:

(jetpack-sdk)felipe: my-first-package$ cfx run -a firefox -P path/to/dev/profile

With Firefox loaded, Tools > Extension Developer > Javascript Shell gets our shell. Now, we need to get Jetpack’s context. For this, we have to import the Cuddlefish module that has the Loader, and then load both the jetpack-core and our package libs. The path to the resources depends on the package you’re running from, so considering our package is called “my-first-package”, we can do:

var a = {};
Components.utils.import("resource://my-first-package-jetpack-core-lib/cuddlefish.js", a);
[Object BackstagePass]
var jetpack = a.Loader({rootPaths:
["resource://my-first-package-jetpack-core-lib",
"resource://my-first-package-my-first-package-lib/"]
});

Done. Now the jetpack object have jetpack’s main functionality, and you can now require your modules from it. Let’s see it using the example module from the tutorial, which have an add function:

jetpack.console.log("Hello World"); //message was printed at the console
var mymodule = jetpack.require("my-module");
mymodule.add
function add(a, b) {
  return a + b;
}
mymodule.add(1, 2)
3

And that’s it! Thanks to Drew for giving the ideas on how to make this work.

While we’re at it, there’s another thing that I’m still trying to understand. It looks to me that there’s just a thin line between developing an “add-on using the jetpack sdk” and “new modules for the jetpack core sdk”. Is that true? My current plan for developing these modules goes like this: develop it into an indepedent package, (so I can cfx run from that package and have some dummy consumers on main.js to help development), and after it’s finished, I move the module-name.js and tests to jetpack-core and get rid of my original package. Does this sound about right?


Responses

  1. D’oh, just found this in the docs:
    https://jetpack.mozillalabs.com/sdk/0.3/docs/#guide/xul-extensions

    In your package.json:
    { “id”: “test@example.com” }

    And in your code:
    Cc[“@mozilla.org/harness-service;1?id=test@example.com”].getService().wrappedJSObject.loader.require(module);


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Categories

%d bloggers like this: