Posted by: Raffaele Spinelli | September 8, 2015

Developing and testing Mozilla Add-on – part 1

Developing add-on for Mozilla is quite easy but testing every single changes made to the code can became tedious.

The usual process would be:

  • made a change
  • create the xpi
  • load Firefox
  • install the add-on in Firefox
  • test it

Have you ever wondered if you can simplify this process? The answer is “Yes! Of course.”
The idea is to automate the packaging and the installation of the add-on at every change it’s made.

Firstly, we need to know a little more about the Mozilla add-on SDK and its tool.
The latest tool made available by Mozilla to develop add-on is called jpm and it shows a very interesting command

– watchpost: It create a new xpi everytime a change is made to the add-on files and post the fresh xpi to a specified URL. More details can be found on Mozilla jpm page.

FUrther, thanks to Wladimir Palant, we can use an add-on that can help us to simplify this process.  It allows you to install/update an add-on by command line, using web-socket.
Download and install this add-on, you can find more information about the configuration here.

Now that we have a convenient way of installing/upgrading an add-on, we can take advantage of the jpm `watchpost` command.
We can now simply run the following command in our add-on directory:

jpm watchpost –post-url http://localhost:8888/

You can see a simple log for this command on my machine:

JPM [info] Starting jpm watchpost on <ADD-ON NAME>
Creating XPI
JPM [info] XPI created at <XPI-PATH> (249ms)
Created XPI at<XPI-PATH>
Successfully created xpi at<XPI-PATH>
Posted XPI to http://localhost:8888/
Removed XPI from<XPI-PATH>

Our process to test the add-on now is:

  • load Firefox
  • made a change to our add-on (the watchpost command will take care to upload the add-on to Firefox)
  • test it

I hope this can be useful, please feel free to contribute.
Next part will be about CI in add-on development using travis and github.

Advertisements

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: