Firefox Add-On SDKCreate Firefox Add-On SDK using StandardWeb Technologies: JavaScript, HTML, and CSS.
• Computer Engineering Year 3About Me                • CP3108B (Mozilla) Last SemesterWang Zhuochun   • Add-On: NUS IVLE H...
Why Add-On SDK?• No XML/XUL• High-Level JavaScript APIs• CommonJS format• Packaging Tool• Integrated Test Framework
How to build an Add-on • Read Documentations: https://addons.mozilla.org/en-   US/developers/docs/sdk/latest/ • Go through...
Installation and cfx • Download SDK • Run binactivate (Win) or source bin/activate (Mac/Linux) • cfx init • cfx run --prof...
Package.json and Console • Package.json: https://addons.mozilla.org/en-   US/developers/docs/sdk/latest/dev-guide/package-...
CommonJS Modules• Make JavaScript much better• require === import/include• exports
JavaScript • JSHint: a tool to detect errors and potential problems in JavaScript code.   http://www.jshint.com/ • Eloquen...
JavaScript (Con’t) • Comparison Operators      • == (Equal)           •   3 == ‘3’ // true      • === (Strict Equal)      ...
JavaScript (Closure, Async) // Synchronize WRONG method 1              // Synchronize WRONG method 2 var result = Request(...
JavaScript (Closure, Async) // Async using closure callback                // Use getRequest()                            ...
Find Out More •   Add-On SDK Documentation: https://addons.mozilla.org/en-US/developers/docs/sdk/latest/ •   Community Dev...
Upcoming SlideShare
Loading in …5
×

CP3108B (Mozilla) Sharing Session on Add-on SDK

780 views

Published on

CP3108B (Mozilla) Sharing Session on Add-on SDK

Published in: Technology, News & Politics
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
780
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
2
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

CP3108B (Mozilla) Sharing Session on Add-on SDK

  1. 1. Firefox Add-On SDKCreate Firefox Add-On SDK using StandardWeb Technologies: JavaScript, HTML, and CSS.
  2. 2. • Computer Engineering Year 3About Me • CP3108B (Mozilla) Last SemesterWang Zhuochun • Add-On: NUS IVLE Helper (http://ivle.pen.io/) NUS IVLE Helper Page
  3. 3. Why Add-On SDK?• No XML/XUL• High-Level JavaScript APIs• CommonJS format• Packaging Tool• Integrated Test Framework
  4. 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. 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. 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. 7. CommonJS Modules• Make JavaScript much better• require === import/include• exports
  8. 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. 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. 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. 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. 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/

×