CP3108B (Mozilla) Sharing Session on Add-on SDK

1. Firefox Add-On SDK
Create Firefox Add-On SDK using Standard
Web Technologies: JavaScript, HTML, and CSS.

2. • Computer Engineering Year 3
About Me
• CP3108B (Mozilla) Last Semester
Wang Zhuochun • Add-On: NUS IVLE Helper (http://ivle.pen.io/)
NUS IVLE Helper Page

3. Why Add-On SDK?
• No XML/XUL
• High-Level JavaScript APIs
• CommonJS format
• Packaging Tool
• Integrated Test Framework

4. How to build an Add-on
• Read Documentations: https://addons.mozilla.org/en-
US/developers/docs/sdk/latest/
• Go through Tutorials
• Read API Documentations

5. Installation and cfx
• Download SDK
• Run binactivate (Win) or source bin/activate (Mac/Linux)
• cfx init
• cfx run --profile-dir="~/addon-dev/profiles/cp"
• cfx xpi
• cfx test
• local.json https://addons.mozilla.org/en-US/developers/docs/sdk/latest/dev-
guide/cfx-tool.html#Using Configurations

6. Package.json and Console
• Package.json: https://addons.mozilla.org/en-
US/developers/docs/sdk/latest/dev-guide/package-spec.html
• Console: https://addons.mozilla.org/en-
US/developers/docs/sdk/latest/dev-guide/console.html
• Console.log(“help you debug your code”);
• Works like printf()
• Log messages will shown in Firefox Error Console

7. CommonJS Modules
• Make JavaScript much better
• require === import/include
• exports

8. JavaScript
• JSHint: a tool to detect errors and potential problems in JavaScript code.
http://www.jshint.com/
• Eloquent JavaScript: a modern Introduction to Programming
http://eloquentjavascript.net/
• Mozilla Developer Network: JavaScript Guide
https://developer.mozilla.org/en-US/docs/JavaScript/Guide

9. JavaScript (Con’t)
• Comparison Operators
• == (Equal)
• 3 == ‘3’ // true
• === (Strict Equal)
• 3 === ‘3’ // false
• Be careful with Typeof
• True or False
• null, undefined, ‘’, 0 // false
• ‘0’, [], {} // true

10. JavaScript (Closure, Async)
// Synchronize WRONG method 1 // Synchronize WRONG method 2
var result = Request({ var result;
url: "http://...",
onComplete: function (response) { Request({
var tweet = response.json[0]; url: "http://...",
console.log("Tweet: " + tweet.text); onComplete: function (response) {
return tweet; var tweet = response.json[0];
} console.log("Tweet: " + tweet.text);
}).get(); result = tweet;
}
}).get();
// trying to do things with result
// trying to do things with result
Console.log(result); // undefined
Console.log(result); // undefined

11. JavaScript (Closure, Async)
// Async using closure callback // Use getRequest()
function doSomething (result) {
function getRequest(callback) { console.log(result); // data :)
Request({ }
url: "http://...",
onComplete: function (response) { getRequest(doSomething);
var tweet = response.json[0];
console.log("Tweet: " + tweet.text);
callback(tweet);
}
}).get();
}

12. Find Out More
• Add-On SDK Documentation: https://addons.mozilla.org/en-US/developers/docs/sdk/latest/
• Community Developed Modules: https://github.com/mozilla/addon-sdk/wiki/Community-developed-modules
• Jetpack Wiki Page: https://wiki.mozilla.org/Jetpack
• Stack Overflow: http://stackoverflow.com/