Jetpack SDK: The new possibility of the extensions on browser

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/

http://infuture.pixnet.net	142
http://blog.littleb.tc	126
http://littlebtc.blogspot.com	12
http://feeds2.feedburner.com	3
http://webcache.googleusercontent.com	2

Jetpack SDK: The new possibility of the extensions on browser

by littlebtc on Aug 14, 2010

Accessibility

Categories

Tags

Upload Details

Usage Rights

5 Embeds 285

Statistics

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