The document provides an overview of how to build Firefox add-ons using the Add-On SDK. It discusses key aspects like using JavaScript, HTML and CSS with no XUL needed. It outlines the packaging and testing tools as well as CommonJS module format. It provides guidance on getting started including reading documentation, tutorials and API references. It also covers topics like using the cfx tool, Package.json, the console, modules, JavaScript best practices and asynchronous programming.

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/