• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Jetpack SDK: The new possibility of the extensions on browser

Jetpack SDK: The new possibility of the extensions on browser






Total Views
Views on SlideShare
Embed Views



10 Embeds 455

http://infuture.pixnet.net 269
http://blog.littleb.tc 126
http://littlebtc.blogspot.ru 18
http://littlebtc.blogspot.tw 14
http://littlebtc.blogspot.com 13
http://feeds2.feedburner.com 5
http://webcache.googleusercontent.com 5
http://littlebtc.blogspot.jp 2
http://littlebtc.blogspot.hk 2
http://littlebtc.blogspot.com.au 1



Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
Post Comment
Edit your comment

    Jetpack SDK: The new possibility of the extensions on browser Jetpack SDK: The new possibility of the extensions on browser Presentation Transcript

    • 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 addons development tips on Mozilla platform • Developer of NicoFox and Voyage • http://plurk.com/littlebtc • or search B , littlebtc little-b-t-c
    • 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 XPI file • But ... command Line IT'S TOO HARD...
    • 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 • Modular and simple to maintain • Every module works as a "sandbox" (only exports objects will be public) • Limited accesses to XPCOM
    • Default packages of Jetpack SDK
    • Package file structure • manifest.json - Manifest • lib • main.js - Main program entry • xxx.js - Module • data • abc.htm - Static data
    • 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 containing specific parameters
    • API needed • widget • Create a space for extension icon / small UI • Will be integrated with Firefox 4 UI • tabs • Operate tabs on browser
    • 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 sucks! • jack @doggy I'm sorry, it's my fault! • • • Re-do Bob's work on Jetpack SDK
    • 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.
    • 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 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)
    • 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
    • Self-made module • Using nsIPromptService XPCOM API, display dialog for username / password input and alert()- like dialog. 20 lines
    • 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 Install? extension on Firefox Compatibility? Not your job! Restart browser? Not Required on Fx4.0/Gecko2!
    • 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
    • Future
    • API parts • Panel API • PageMods API (UserScript ) • Sidebar API • Notification API • E10S (multiprocess) support • Jetpack SDK team are working hard on them...
    • Non-API Parts • Firefox 4 • New addon widget UI • Auto and silent update for Jetpack extensions • Mozilla Addons Website • Addon Marketplace
    • https://jetpack.mozillalabs.com/