Your SlideShare is downloading. ×
  • Like
CP3108B (Mozilla) Sharing Session on Add-on SDK
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Now you can save presentations on your phone or tablet

Available for both IPhone and Android

Text the download link to your phone

Standard text messaging rates apply

CP3108B (Mozilla) Sharing Session on Add-on SDK

  • 482 views
Published

CP3108B (Mozilla) Sharing Session on Add-on SDK

CP3108B (Mozilla) Sharing Session on Add-on SDK

Published in Technology , News & Politics
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
482
On SlideShare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
1
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. Firefox Add-On SDKCreate Firefox Add-On SDK using StandardWeb Technologies: JavaScript, HTML, and CSS.
  • 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. 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/