This week I had enough time to play around with an addon I made some time ago. JSONDiff is an addon to easily compare JSON documents, and its source code can be found on GitHub.

The latest version was based on JPM, so I decided to port it to WebExtension. Good for me, the addon is an easy one, it only relied on the tab API from the SDK. Thus, its porting from JPM to WebExtension was utterly painless.

I had few things to do:

1. Create a proper manifest.json file
2. Adapt the used APIs to the available ones in WebExtension
3. Check the addon on the new Firefox
4. Adapt the tests for a different framework (optional)

Manifest file

Mozilla has done a great job in improving both its code and the documentation. I am particularly happy with the WebExtension documentation that is now quite comprehensive.
The perfect entry point is this guide on how to get started with WebExtension or the walkthrough of your first addon. Of course, the next step is to go through the API documentation.

Adapting APIs

If you are lucky, like in my case, all the JPM APIs your addon uses are available in WebExtension as well. You just need to adapt your code to the new ones and that will be all.
In my case, I only have to adopt the tabs APIs.

WebExtension cli

Mozilla offers a command line tool to help people to build, run and test WebExtension addons. The web-ext cli can be easily installed through npm. Make sure to follow the instructions on https://github.com/mozilla/web-ext and read the documentation. I like this tool very much cause it helps you to try your addon for different versions of Firefox, even Firefox Android.

Unfortunately, running tests with this tool is a matter of open discussion at the time of writing this article.

Testing

For my addon, I chose to employ at least unit testing. At the time, I chose to rely on the JPM cli to run the tests but there is no equivalent in the web-ext cli.
After a couple of hours spent googling for JavaScript testing framework I came up with an idea to test my addon, thanks also to the suggestions discussed on the web-ext GitHub project.

My setup includes:

• Karma - Test runner
• Mocha - Test framework
• Chai - Assertion library for TDD and BDD

Get familiar with these tools if you really want to properly understand how to do testing in JS.

NOTE: I used Chai to achieve objects deep comparison.

In my karma-config.js file I specified the frameworks I want to load

> frameworks: ['mocha', 'sinon-chai'],

I also specified which files to load:

> files: [ 
> // Source 
> 'data/js/*.js', 
> 
> // Tests 
> 'tests/*.js' 
> ],

A test snippet may look like this:

> describe('jsondiff', function() {
>   describe('isArray', function() {
>     it('It should be false if not an array', function(done) {
>       expect(jsondiff.isArray(false)).to.equal(false);
>       done();
>     });
>   });
>  ....
> });

If the configuration is ok, you can run your tests with the command npm test.

Take a look at the JSONDiff repository for a complete example and CI (Travis) integration.