Jetpack SDK:The New possibility of the extensions on browser

尤孝庭 / 笨笨的小BHsiao-Ting Yu / Littlebtc

I'm back again!COSCUP 2009 Reviewhttp://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

Open Web Standard

JavaScript

HTML5

XUL

CSS3

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

NEVER

NEVER

NEVERLive Demo!!

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

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

HTML5Eventually!!!! 總算!

audio

sorry.htm

put it to data or...

main.js: 25 Lines!

馬上玩玩看！http://dl.dropbox.com/u/8093476/COSCUP10/sorry.xpi

Example 3:"Plurk unread tracker"

request timer ?????simple-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...

• (But there is no good way to make preference UI in Jetpack SDK now)

Plurk API needs username/passwordeven if the user had logged in!!!!!!

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 workon Mozilla Addons

Advantages and Possibility

Install?

Compatibility?

Restart browser?

No difference from any otherextension on Firefox

Not your job!

Not Required onFx4.0/Gecko2!

Solve some classical problem for extensionon Mozilla platform

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 Library

A Extension

B Library

B Extension C Extension

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/