Jetpack SDK:
The New possibility of the
extensions on browser
       /           B
Hsiao-Ting Yu / Littlebtc
I'm back again!
COSCUP 2009 Review
http://www.youtube.com/watch?v=f_1cLDVIom8
Who I Am

•         (Hsiao-Ting Yu)

• Undergraduate in NTUEE
• One of the Jetpack Ambassadors, volunteers to
  spread add...
Overview



•
    Extend your Firefox happily!

•
• Not just talking about it, do something about it
Not so related to
HTML5
...But related to the browser.
Jetpack SDK:
A brand new way to develop
extension on Mozilla
platform (e.g. Firefox).
Old Jetpack?
Deprecated and labeled as a prototype
Writing extension in HTML5...



• Google Chrome
• Safari
• Jetpack Prototype

• So what's new in Jetpack SDK?????
It's ALL ABOUT OPEN!
Open API Purposal
HTML5                 CSS3




            JavaScript

   XUL




Open Web Standard
Open development &
deployment environment
So how to develop?
Using Jetpack SDK



• A toolkit based on Python
• Able to test Jetpack SDK extensions
• Able to pack the extension into X...
Simpler way...?

• https://builder.mozillalabs.com/
All-in-one development IDE
Jetpack SDK Basics
Coding on Jetpack SDK

• Package-based
 • Reusable code, document, data
• JavaScript Code
 • CommonJS Module Specification...
Default packages of Jetpack SDK
Package file structure


• manifest.json - Manifest
• lib
 • main.js - Main program entry
 • xxx.js - Module
• data
 • abc...
NEV
   ER
NEVER Live Demo!!

 EVE R
N
Example 1:
"Push to Plurk"
 tabs   widget
Purpose




• Share current viewing page to Plurk, a
  microblogging service

• In very simple way: Open a tab with URL
  ...
API needed



• widget
 • Create a space for extension icon / small UI
 • Will be integrated with Firefox 4 UI
• tabs
 • O...
main.js: 16 Lines!
Try it now!
http://dl.dropbox.com/u/8093476/COSCUP10/plurk-pusher.xpi
Example 2:
"Say sorry" pt 2 feat. littlebtc
   page-     context-
  worker      menu
Purpose

• A fun extension to "say sorry"
 • doggy Lots of people occupied the bandwidth,
      the network on COSCUP suck...
API needed


• page-worker
 • Create a invisible page, and work with its DOM
    object

 • "Visible page" - Panels, are e...
sorry.htm




            audio
  HTML5
  Eventually!!!!    !
put it to data or...
main.js: 25 Lines!
http://dl.dropbox.com/u/8093476/COSCUP10/sorry.xpi
Example 3:
"Plurk unread tracker"
                   simple-
 request   timer
                   storage   ?????
Purpose

• Get unread counts on Plurk and display on the
  widget

• We don't have panel, so can't do a complex UI like
  ...
API Required

• widget
• simple-storage: Store simple object
• request Make request to HTTP server with
  XML, JSON, or pl...
Self-made module

• Using nsIPromptService XPCOM API, display
  dialog for username / password input and alert()-
  like d...
Actual code on main.js



• 73 lines
• Doing lots of jobs:
 • Handle very simple login/logout
 • Communicate with Plurk API
Result (unstable!)
Package and deploy
or cfx xpi
Upload your work
on Mozilla Addons
Advantages and
Possibility
Solve some classical problem for extension
             on Mozilla platform


         No difference from any other
Instal...
More Open Development

• Everyone can share their package as library on
  Addon Builder

• Code can be widely reused and r...
Future
API parts

• Panel API
• PageMods API (UserScript      )

• Sidebar API
• Notification API
• E10S (multiprocess) support

...
Non-API Parts



• Firefox 4
 • New addon widget UI
 • Auto and silent update for Jetpack extensions
• Mozilla Addons Webs...
https://jetpack.mozillalabs.com/
Upcoming SlideShare
Loading in...5
×

Jetpack SDK: The new possibility of the extensions on browser

5,306

Published on

Published in: Technology
0 Comments
5 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
5,306
On Slideshare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
59
Comments
0
Likes
5
Embeds 0
No embeds

No notes for slide

Jetpack SDK: The new possibility of the extensions on browser

  1. 1. Jetpack SDK: The New possibility of the extensions on browser / B Hsiao-Ting Yu / Littlebtc
  2. 2. I'm back again! COSCUP 2009 Review http://www.youtube.com/watch?v=f_1cLDVIom8
  3. 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. 4. Overview • Extend your Firefox happily! • • Not just talking about it, do something about it
  5. 5. Not so related to HTML5
  6. 6. ...But related to the browser.
  7. 7. Jetpack SDK: A brand new way to develop extension on Mozilla platform (e.g. Firefox).
  8. 8. Old Jetpack? Deprecated and labeled as a prototype
  9. 9. Writing extension in HTML5... • Google Chrome • Safari • Jetpack Prototype • So what's new in Jetpack SDK?????
  10. 10. It's ALL ABOUT OPEN!
  11. 11. Open API Purposal
  12. 12. HTML5 CSS3 JavaScript XUL Open Web Standard
  13. 13. Open development & deployment environment
  14. 14. So how to develop?
  15. 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...
  16. 16. Simpler way...? • https://builder.mozillalabs.com/
  17. 17. All-in-one development IDE
  18. 18. Jetpack SDK Basics
  19. 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. 20. Default packages of Jetpack SDK
  21. 21. Package file structure • manifest.json - Manifest • lib • main.js - Main program entry • xxx.js - Module • data • abc.htm - Static data
  22. 22. NEV ER NEVER Live Demo!! EVE R N
  23. 23. Example 1: "Push to Plurk" tabs widget
  24. 24. Purpose • Share current viewing page to Plurk, a microblogging service • In very simple way: Open a tab with URL containing specific parameters
  25. 25. API needed • widget • Create a space for extension icon / small UI • Will be integrated with Firefox 4 UI • tabs • Operate tabs on browser
  26. 26. main.js: 16 Lines!
  27. 27. Try it now! http://dl.dropbox.com/u/8093476/COSCUP10/plurk-pusher.xpi
  28. 28. Example 2: "Say sorry" pt 2 feat. littlebtc page- context- worker menu
  29. 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. 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. 31. sorry.htm audio HTML5 Eventually!!!! !
  32. 32. put it to data or...
  33. 33. main.js: 25 Lines!
  34. 34. http://dl.dropbox.com/u/8093476/COSCUP10/sorry.xpi
  35. 35. Example 3: "Plurk unread tracker" simple- request timer storage ?????
  36. 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. 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. 38. Self-made module • Using nsIPromptService XPCOM API, display dialog for username / password input and alert()- like dialog. 20 lines
  39. 39. Actual code on main.js • 73 lines • Doing lots of jobs: • Handle very simple login/logout • Communicate with Plurk API
  40. 40. Result (unstable!)
  41. 41. Package and deploy
  42. 42. or cfx xpi
  43. 43. Upload your work on Mozilla Addons
  44. 44. Advantages and Possibility
  45. 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. 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. 47. Future
  48. 48. API parts • Panel API • PageMods API (UserScript ) • Sidebar API • Notification API • E10S (multiprocess) support • Jetpack SDK team are working hard on them...
  49. 49. Non-API Parts • Firefox 4 • New addon widget UI • Auto and silent update for Jetpack extensions • Mozilla Addons Website • Addon Marketplace
  50. 50. https://jetpack.mozillalabs.com/
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×