MozTW Jetpack Workshop: Taipei

Workshop: Taipei

Hsiao-Ting Yu “Littlebtc”
MozTW member / Jetpack Ambassador

What is Mozilla?

• Non-profit organization
• Support for better Internet: an open web
• Open Source Software
• Open Web Standard
• Major Products: Firefox & Thunderbird

Mozilla Labs?

• “Labs” in Mozilla
• Crazy ideas
• Explore future of the web

MozTW?

• Mozilla communities in
Taiwan

• Group for Mozilla “fans”
• Localize Mozilla products
• Promote Mozilla product &
web standard

• Our mascot: Foxmosa

Old-type Mozilla Extension

• XUL: user interface
• JavaScript: code
• CSS: styling
• XBL: binding
• XPCOM: core

• ... So much hard things :(

What is Jetpack?

• Simple-to-use API to develop
new-type extensions

• HTML, CSS and JavaScript
• JavaScript libraries available
• Fast to develop, test and
deploy

• Extensible API Photo by www.rocketman.org, CC-BY-2.5
http://en.wikipedia.org/wiki/File:Rose-4.jpg

Jetpack: Now and Future

• Now: Jetpack 0.8 (standalone extension)
• Experimental Prototype
• Jetpack as single JavaScript file
• Future: Jetpack SDK (Jetpack Reboot)
• Distributed as a development kit
• Jetpack as XPI extension bundle
• Future version of Firefox will have Jetpack API
supported included

Jetpack extension
https://addons.mozilla.org/zh-TW/firefox/addon/12025

Firebug
https://addons.mozilla.org/zh-TW/firefox/addon/1843

Procedure

• Prepare a .js file and a .htm file in the same folder
• in .htm file, add the following data:
<html>
<head>
<title>Jetpack Workshop Example</title>
<link rel="jetpack" href="example.js">
</head>
<body>
</body>
</html>

• in the .js file: add oneworld!');
console.log('Hello
line

• Open the .htm file to "Install" the Jetpack

Everyone needs a “Hello World”

• Log: Use Error Console (preferred) or Firebug Console
• Go “Develop” Tab
• Type
• console.log("Hello World!");

Notifications

• Simple Type
jetpack.notifications.show("Hello World!");

• Complex Type
jetpack.notifications.show( {
title: "Hi Jetpack!",
body: " ",
icon: "https://jetpack.mozillalabs.com/images/jetpack.png"

} );

Menu (I)

• Import from future:
jetpack.future.import("menu");

• Create new menu to a dummy menu object
(does nothing)
jetpack.menu.add("Aloha!");

• Create new menu to tools
jetpack.menu.tools.add("Aloha!");

Menu (II)
• What menu?

• jetpack.menu.file

• jetpack.menu.edit

• jetpack.menu.view

• jetpack.menu.history

• jetpack.menu.bookmarks

• jetpack.menu.tools

• Context Menu: Somehow complex

• jetpack.menu.context.browser for browser UI

• jetpack.menu.context.page for page

Menu (III)
• Object-type to allow more options

• How about command? => command

• Submenu? => menu

• Details: https://developer.mozilla.org/en/Jetpack/UI/Menu

jetpack.future.import("menu");
jetpack.menu.context.page.add({
label: "Ice Cream",
icon: "https://jetpack.mozillalabs.com/images/
jetpack.png",
menu: new jetpack.Menu(["Vanilla", "Chocolate",
"Pistachio", null, "None"]),
command: function (menuitem)
jetpack.notifications.show(menuitem.label)
});

Slidebar (I)

• It is not the sidebar! :D
• Import from future:
jetpack.future.import("slideBar");

• Append the slidebar with HTML content:
jetpack.slideBar.append(
{
icon: "https://jetpack.mozillalabs.com/images/jetpack.png",
html: "<html><body>Hello!</body></html>"
}

• Or a given URL:
jetpack.slideBar.append(
{
icon: "https://jetpack.mozillalabs.com/images/jetpack.png",
url: "http://moztw.org"

}

Slidebar (II)

• Events:
• onReady: when feature("slidebar page") is loaded
• onClick: when its icon is clicked
• onSelect: when featured is selected
• Options:
• autoReload: reload every time selected

Slidebar (III): Tips

• onReady, onSelect:
• Will have a slider object as a parameter
• You can use slider.contentDocument to access
the document

• Jetpack 0.8 is jQuery enabled, so:
function ready(slider) {
var _doc = slider.contentDocument;
$("body", _doc).html("..."); // Have fun!
}
jetpack.slider.append( {... , 'onReady': ready})

Slidebar (IV): Tips again

• You can use E4X hack to write HTML code:
var html = <>
<html>
<head>
<style type="text/css">
<![CDATA[
...
]]>
</style>
<base target="_blank" /> 
</head>
<body>
...
</body></html></>.toXMLString();
jetpack.slideBar.append({html: html});

• Another dirty hack: set target to _blank to make
links to open in the new tab, instead of in the
slidebar content

Toolbar
• https://wiki.mozilla.org/Labs/Jetpack/JEP/21#Initial_Implementation_API

• Import from future
jetpack.future.import("toolbar");

• Which Toolbar?

• jetpack.toolbar.navigation

• jetpack.toolbar.bookmarks

• Toolbar options
var myButton = {
id: "goMozTW",
label: "Go MozTW",
tooltip: "Access MozTW Website",
image: "http://www.mozilla.org/favicon.ico",
onclick: function(event) { jetpack.tabs.open('http://moztw.org/'); }
}

• Append And Remove
jetpack.toolbar.navigation.append(myButton);
jetpack.toolbar.navigation.remove("goMozTW");

Statusbar
• Somehow like slidebar, HTML-based

• Parameters: width, html

• onReady when HTML item is loaded

• widget, its HTML document as a parameter

• Example
jetpack.statusBar.append({
html: "<strong>Hi!</strong>",
width: 100,
onReady: function(widget) {
$("strong", widget).text("Jetpack rocks?");
$(widget).click(function()
{ jetpack.notifications.show("Yes!"); }
);
}
});

Code and result

• http://gist.github.com/323081

Hacks in the code

• $("<a />") to create element: not working
• Use _doc.createElement("a") instead
• Some Regex to fetch the real title
• jQuery.ajax to fetch the content:
http://api.jquery.com/jQuery.ajax/

Another example:
JetPlurk by irvinfly

Jetpack 0.8 APIs:
Not (so much) UI
related

Selection
• https://developer.mozilla.org/en/Jetpack/UI/Selection

• Import from future
jetpack.future.import("selection");

• Get Selection

• jetpack.selection.text as plain text

• jetpack.selection.html as HTML

• Event: onSelection

• Example
jetpack.future.import("selection");
jetpack.selection.onSelection(function(){
jetpack.notifications.show(jetpack.selection.text);
jetpack.selection.html = "<b>" + jetpack.selection.html +
"</b>";
});

Tabs (I)

• jetpack.tabs
• open(): open new tab
jetpack.tabs.open("http://www.example.com");

• Array-like operations:
• jetpack.tabs[0]: first tab
• length: number of tabs

Tabs (II)

• Events:
• onReady: (inherited document is fully loaded)
• onFocus: focus changed
• Example
jetpack.tabs.onReady(
function(doc) {
console.log('ok');
}
);

Simple Storage
• Simple Storage: implemented as JSON files
• Future namespace should be used:
jetpack.future.import("storage.simple");
var myStorage = jetpack.storage.simple;

• You can put some simple items: string, number, array,
into myStorage:
myStorage.group = 'moztw';
myStorage.members = ['littlebtc', 'bobchao', 'irvinfly'];

• So
console.log(myStorage.members[0])

is littlebtc!

• sync() to force writing, open() to force reading
(beware!)

Settings (I)

• Import from future is needed
• Need some manifest:
• https://developer.mozilla.org/en/Jetpack/Storage/
Settings

• Resulting interface in about:jetpack:

Settings (II)

• Setting types: text, password, boolean, range
• Available options: default, min (for range), max (for
range)

• Read/Write the setting is simple:
jetpack.storage.settings.facebook.username =
'jen';
music.volume = jetpack.storage.settings.volume;

Me, the extension

• Use "me":
jetpack.future.import("me");

• For first run purpose:
jetpack.me.onFirstRun(function () {
jetpack.tabs.open("http://moztw.org/");
jetpack.notifications.show('Welcome!');
});

Go Jetpack Gallery!
http://jetpackgallery.mozillalabs.com/

New "Jetpack" Architecture

Before After
jetpack jetpack jetpack jetpack jetpack

Jetpack Jetpack
Jetpack API Core Core

Firefox Firefox

New "Jetpack SDK"

• Python SDK, with features enabled:
• Testing
• XPI Packaging
• "Package-based"
• CommonJS based scripting
• https://jetpack.mozillalabs.com/sdk/0.1/docs/

Jetpack-based extensions

• Jetpack as an API
• Jetpack-based extension will:
• Require no restart to take effect
• Have automatic update
• And better security model
• No difference for users compared with traditional
extensions

• Hosted on AMO too

MozTW Jetpack Workshop: Taipei

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (7)

Similar to MozTW Jetpack Workshop: Taipei

Similar to MozTW Jetpack Workshop: Taipei (20)

More from littlebtc

More from littlebtc (8)

Recently uploaded

Recently uploaded (20)

MozTW Jetpack Workshop: Taipei

Editor's Notes