Date post: | 14-May-2015 |
Category: |
Technology |
Upload: | littlebtc |
View: | 5,239 times |
Download: | 0 times |
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