Jetpack SDK: The new possibility of the extensions on browser
Upcoming SlideShare
Loading in...5

Jetpack SDK: The new possibility of the extensions on browser






Total Views
Views on SlideShare
Embed Views



10 Embeds 461 275 126 18 14 13 5 5 2 2 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
  • 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 • • or search B , littlebtc little-b-t-c View slide
  • Overview • Extend your Firefox happily! • • Not just talking about it, do something about it View slide
  • 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?????
  • 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...? •
  • 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!
  • 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!
  • 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