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!

11.
Open API Purposal

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...

16.
Simpler way...?
• https://builder.mozillalabs.com/

17.
All-in-one development IDE

18.
Jetpack SDK Basics

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

26.
main.js: 16 Lines!

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...

33.
main.js: 25 Lines!

34.
http://dl.dropbox.com/u/8093476/COSCUP10/sorry.xpi

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

40.
Result (unstable!)

41.
Package and deploy

42.
or cfx xpi

43.
Upload your work
on Mozilla Addons

44.
Advantages and
Possibility

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

50.
https://jetpack.mozillalabs.com/