3. What is Mozilla?
• Non-profit organization
• Support for better Internet: an open web
• Open Source Software
• Open Web Standard
• Major Products: Firefox & Thunderbird
7. MozTW?
• Mozilla communities in
Taiwan
• Group for Mozilla “fans”
• Localize Mozilla products
• Promote Mozilla product &
web standard
• Our mascot: Foxmosa
12. 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
13. 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
20. 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
25. 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!");
26. 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
27. 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)
});
28. 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"
}
29. 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
30. 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})
31. 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" /> <!-- Dirty Hack, very dirty -->
</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
33. 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!"); }
);
}
});
38. 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/
41. 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>";
});
42. 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
43. Tabs (II)
• Events:
• onReady: (inherited document is fully loaded)
• onFocus: focus changed
• Example
jetpack.tabs.onReady(
function(doc) {
console.log('ok');
}
);
44. 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!)
45. Settings (I)
• Import from future is needed
• Need some manifest:
• https://developer.mozilla.org/en/Jetpack/Storage/
Settings
• Resulting interface in about:jetpack:
46. 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;
47. 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!');
});
51. New "Jetpack" Architecture
Before After
jetpack jetpack jetpack jetpack jetpack
Jetpack Jetpack
Jetpack API Core Core
Firefox Firefox
52. New "Jetpack SDK"
• Python SDK, with features enabled:
• Testing
• XPI Packaging
• "Package-based"
• CommonJS based scripting
• https://jetpack.mozillalabs.com/sdk/0.1/docs/
53. 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
