Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

MozTW Jetpack Workshop: Taichung

  • Login to see the comments

MozTW Jetpack Workshop: Taichung

  1. 1. Workshop: Taichung Hsiao-Ting Yu “Littlebtc” MozTW member / Jetpack Ambassador
  2. 2. Mozilla
  3. 3. What is Mozilla? • Non-profit organization • Support for better Internet: an open web • Open Source Software • Open Web Standard • Major Products: Firefox & Thunderbird
  4. 4. Mozilla Labs? • “Labs” in Mozilla • Crazy ideas • Explore future of the web
  5. 5. Jetpack Ambassadors
  6. 6. MozTW? • Mozilla communities in Taiwan • Group for Mozilla “fans” • Localize Mozilla products • Promote Mozilla product & web standard • Our mascot: Foxmosa
  7. 7. Jetpack Introduction
  8. 8. Your Firefox, customized
  9. 9. Old-type Mozilla Extension • XUL: user interface • JavaScript: code • CSS: styling • XBL: binding • XPCOM: core • ... So much hard things :(
  10. 10. Faster, faster and faster
  11. 11. 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
  12. 12. Jetpack: Now and Future • Old: Jetpack Prototype 0.8 (standalone extension) • Experimental Prototype • Jetpack as single JavaScript file • Very Near 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
  13. 13. Jetpack Prototype 0.8 Guides
  14. 14. Jetpack Prototype extension https://addons.mozilla.org/zh-TW/firefox/addon/12025
  15. 15. Firebug https://addons.mozilla.org/zh-TW/firefox/addon/1843
  16. 16. Go about:jetpack
  17. 17. Try it out!
  18. 18. Prepare a testing extension
  19. 19. 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
  20. 20. Refresh?
  21. 21. Refresh: the dirty way • For local files only(?) • Go to or refresh the about:jetpack page
  22. 22. Jetpack 0.8 APIs: UI Related
  23. 23. Everyone needs a “Hello World” • Log: Use Error Console (preferred) or Firebug Console • Go “Develop” Tab • Type • console.log("Hello World!");
  24. 24. 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" } );
  25. 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. 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. 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. 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. 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. 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. 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
  32. 32. 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");
  33. 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!"); } ); } });
  34. 34. A complex slidebar example
  35. 35. The Target
  36. 36. In RSS
  37. 37. Code and result • http://gist.github.com/323081
  38. 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/
  39. 39. Another example: JetPlurk by irvinfly http://go.sto.tw/jetplurk
  40. 40. Jetpack 0.8 APIs: Not (so much) UI related
  41. 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. 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. 43. Tabs (II) • Events: • onReady: (inherited document is fully loaded) • onFocus: focus changed • Example jetpack.tabs.onReady( function(doc) { console.log('ok'); } );
  44. 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. 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. 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. 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!');    });  
  48. 48. more... https://wiki.mozilla.org/Labs/Jetpack/ JEP https://developer.mozilla.org/en/Jetpack
  49. 49. After finished...
  50. 50. Go Jetpack Gallery! http://jetpackgallery.mozillalabs.com/
  51. 51. Jetpack SDK: Jetpack rebooted
  52. 52. Review of Jetpack Prototype https:// • Wrong things jetpack.mozillalabs.com/ prototype.html • Scope • Right things • Quality • Usability • Non-Systemic API • Web Technologies • Document • JEPs • jQuery only • Quick Release • Tools integration
  53. 53. New "Jetpack" Architecture Before After jetpack jetpack jetpack jetpack jetpack Jetpack Jetpack Jetpack API Core Core Firefox Firefox
  54. 54. New "Jetpack SDK" • Python SDK, with features enabled: • Testing • XPI Packaging • "Package-based" • CommonJS based scripting • http://mozillalabs.com/jetpack/2010/03/09/ announcing-the-jetpack-sdk/ • https://jetpack.mozillalabs.com/sdk/0.1/docs/
  55. 55. "Packaging" • One package, one directory • Every package directory should contain a mainfest.json at least • Description, Dependency, ... • JS files, known as "module", used for some reusable code, can be pulled in lib/xxx.js
  56. 56. "Packaging" (II): CommonJS • Export a functions in my-module.js: exports.foo = function() { return "work!" } exports.add = funciton(a, b) { return a + b; } • Use and test it in main.js: var myModule = require("my-module"); exports.main = function(options, callbacks) { myModule.foo(); callbacks.quit(); } • "main" function exported from "main" module (main.js) will be called as your program "activate"s
  57. 57. Testing • Create lib/test-my-module.js: var myModule = require("my-module"); exports.ensureAdditionWorks = function (test) { test.assertEqual(myModule.add(1, 1), 2, "1 + 1 = 2"); }; • cfx test --verbose to test!
  58. 58. cfx works! • After grab the SDK, run in OSX/Linux: source bin/activate In Windows (Python and Python for Windows extension is required): source bin/activate • cfx testall : Sanity Check • Run in the package directory: • cfx test --verbose : test module • cfx xpi : make Jetpack XPI
  59. 59. 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
  60. 60. Extension manager redesign
  61. 61. FlightDeck
  62. 62. Instant development!
  63. 63. What about JEPs? https://wiki.mozilla.org/Labs/Jetpack/Reboot/JEP
  64. 64. Future: it's your turn!

×