Firefox Add-on SDK

Firefox Add-on SDK

Transcript

1. Firefox Add-On SDK Create Firefox Add-On SDK using Standard Web Technologies: JavaScript, HTML, and CSS.
2. About Me Wang Zhuochun • Computer Engineering Year 3 • CP3108B (Mozilla) Last Semester • 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 bin\activate (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 var result = Request({ url: "http://...", onComplete: function (response) { var tweet = response.json[0]; console.log("Tweet: " + tweet.text); return tweet; } }).get(); // trying to do things with result Console.log(result); // undefined // Synchronize WRONG method 2 var result; Request({ url: "http://...", onComplete: function (response) { var tweet = response.json[0]; console.log("Tweet: " + tweet.text); result = tweet; } }).get(); // trying to do things with result Console.log(result); // undefined
11. JavaScript (Closure, Async) // Async using closure callback function getRequest(callback) { Request({ url: "http://...", onComplete: function (response) { var tweet = response.json[0]; console.log("Tweet: " + tweet.text); callback(tweet); } }).get(); } // Use getRequest() function doSomething (result) { console.log(result); // data :) } getRequest(doSomething);
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/