Ad
More Related Content
What's hot (20)
Similar to Jetpack SDK: The new possibility of the extensions on browser (20)
Ad
More from littlebtc (10)
Ad
Recently uploaded (20)
Jetpack SDK: The new possibility of the extensions on browser
- 1. Jetpack SDK: The New possibility of the extensions on browser / B Hsiao-Ting Yu / Littlebtc
- 2. I'm back again! COSCUP 2009 Review http://www.youtube.com/watch?v=f_1cLDVIom8
- 3. Who I Am • (Hsiao-Ting Yu) • Undergraduate in NTUEE • One of the Jetpack Ambassadors, volunteers to spread addons development tips on Mozilla platform • Developer of NicoFox and Voyage • http://plurk.com/littlebtc • or search B , littlebtc little-b-t-c
- 4. Overview • Extend your Firefox happily! • • Not just talking about it, do something about it
- 5. Not so related to HTML5
- 6. ...But related to the browser.
- 7. Jetpack SDK: A brand new way to develop extension on Mozilla platform (e.g. Firefox).
- 8. Old Jetpack? Deprecated and labeled as a prototype
- 9. Writing extension in HTML5... • Google Chrome • Safari • Jetpack Prototype • So what's new in Jetpack SDK?????
- 10. It's ALL ABOUT OPEN!
- 12. HTML5 CSS3 JavaScript XUL Open Web Standard
- 13. Open development & deployment environment
- 14. So how to develop?
- 15. Using Jetpack SDK • A toolkit based on Python • Able to test Jetpack SDK extensions • Able to pack the extension into XPI file • But ... command Line IT'S TOO HARD...
- 19. Coding on Jetpack SDK • Package-based • Reusable code, document, data • JavaScript Code • CommonJS Module Specification • Modular and simple to maintain • Every module works as a "sandbox" (only exports objects will be public) • Limited accesses to XPCOM
- 20. Default packages of Jetpack SDK
- 21. Package file structure • manifest.json - Manifest • lib • main.js - Main program entry • xxx.js - Module • data • abc.htm - Static data
- 22. NEV ER NEVER Live Demo!! EVE R N
- 23. Example 1: "Push to Plurk" tabs widget
- 24. Purpose • Share current viewing page to Plurk, a microblogging service • In very simple way: Open a tab with URL containing specific parameters
- 25. API needed • widget • Create a space for extension icon / small UI • Will be integrated with Firefox 4 UI • tabs • Operate tabs on browser
- 27. Try it now! http://dl.dropbox.com/u/8093476/COSCUP10/plurk-pusher.xpi
- 28. Example 2: "Say sorry" pt 2 feat. littlebtc page- context- worker menu
- 29. Purpose • A fun extension to "say sorry" • doggy Lots of people occupied the bandwidth, the network on COSCUP sucks! • jack @doggy I'm sorry, it's my fault! • • • Re-do Bob's work on Jetpack SDK
- 30. API needed • page-worker • Create a invisible page, and work with its DOM object • "Visible page" - Panels, are expected in future release. • context-menu • Add items to context menu.
- 31. sorry.htm audio HTML5 Eventually!!!! !
- 32. put it to data or...
- 35. Example 3: "Plurk unread tracker" simple- request timer storage ?????
- 36. Purpose • Get unread counts on Plurk and display on the widget • We don't have panel, so can't do a complex UI like microblogging viewer • When writing the extension... Plurk API needs username/password even if the user had logged in!!!!!! • (But there is no good way to make preference UI in Jetpack SDK now)
- 37. API Required • widget • simple-storage: Store simple object • request Make request to HTTP server with XML, JSON, or plain text return • timer Timer function like setTimeout() setInterval() • Self-made module Some prompt dialog • Provided by XPCOM API in Firefox
- 38. Self-made module • Using nsIPromptService XPCOM API, display dialog for username / password input and alert()- like dialog. 20 lines
- 39. Actual code on main.js • 73 lines • Doing lots of jobs: • Handle very simple login/logout • Communicate with Plurk API
- 42. or cfx xpi
- 43. Upload your work on Mozilla Addons
- 45. Solve some classical problem for extension on Mozilla platform No difference from any other Install? extension on Firefox Compatibility? Not your job! Restart browser? Not Required on Fx4.0/Gecko2!
- 46. More Open Development • Everyone can share their package as library on Addon Builder • Code can be widely reused and remixed into new extensions! • Good for open source development ecosystem A Extension B Extension C Extension A Library B Library
- 47. Future
- 48. API parts • Panel API • PageMods API (UserScript ) • Sidebar API • Notification API • E10S (multiprocess) support • Jetpack SDK team are working hard on them...
- 49. Non-API Parts • Firefox 4 • New addon widget UI • Auto and silent update for Jetpack extensions • Mozilla Addons Website • Addon Marketplace