extending firefox with jetpack @ vanjs
DESCRIPTION
TRANSCRIPT
![Page 1: Extending Firefox with Jetpack @ VanJS](https://reader033.vdocuments.net/reader033/viewer/2022061217/54b514ad4a79596f458b456e/html5/thumbnails/1.jpg)
Extending Firefoxwith
Jetpack
Erik VoldJetpack Ambassador
http://erikvold.com/http://twitter.com/erikvoldhttp://identi.ca/erikvold
@ VanJS, Vancouver, BC
May 19th 2010
![Page 2: Extending Firefox with Jetpack @ VanJS](https://reader033.vdocuments.net/reader033/viewer/2022061217/54b514ad4a79596f458b456e/html5/thumbnails/2.jpg)
Outline
Why extend the browser? Firefox Extensions Jetpack Prototype Jetpack Reboot Examples Down the road
![Page 3: Extending Firefox with Jetpack @ VanJS](https://reader033.vdocuments.net/reader033/viewer/2022061217/54b514ad4a79596f458b456e/html5/thumbnails/3.jpg)
Why extend the browser? Personalization
Productivity Accessibility Information Functionality Security
![Page 4: Extending Firefox with Jetpack @ VanJS](https://reader033.vdocuments.net/reader033/viewer/2022061217/54b514ad4a79596f458b456e/html5/thumbnails/4.jpg)
Firefox Extensions
XULRunner & Chrome XUL, XPCOM, and JS Modules (JSM) XPI addons.mozilla.org (AMO) XUL, CSS, & JS
![Page 5: Extending Firefox with Jetpack @ VanJS](https://reader033.vdocuments.net/reader033/viewer/2022061217/54b514ad4a79596f458b456e/html5/thumbnails/5.jpg)
Problems withFirefox Extensions
Restarts Following platform changes Testing XPCOM & JSM are not useable in other contexts Security
![Page 6: Extending Firefox with Jetpack @ VanJS](https://reader033.vdocuments.net/reader033/viewer/2022061217/54b514ad4a79596f458b456e/html5/thumbnails/6.jpg)
Jetpack Prototype
Single file Web technologies (JS, HTML, and CSS) Smart, Simple, and Powerful APIs jQuery Rapid development cycle
No restarts Easy to share
![Page 7: Extending Firefox with Jetpack @ VanJS](https://reader033.vdocuments.net/reader033/viewer/2022061217/54b514ad4a79596f458b456e/html5/thumbnails/7.jpg)
Problems withJetpack Prototype
Requires a FF addon Single file Code reuse Security Reliance on jQuery
![Page 8: Extending Firefox with Jetpack @ VanJS](https://reader033.vdocuments.net/reader033/viewer/2022061217/54b514ad4a79596f458b456e/html5/thumbnails/8.jpg)
Jetpack Reboot (SDK)
SecurityGenerative DilemmaPrinciple of Least Authority
CommonJS Code Reuse
No Restarts Unit Testing Future & Application Resilient
![Page 9: Extending Firefox with Jetpack @ VanJS](https://reader033.vdocuments.net/reader033/viewer/2022061217/54b514ad4a79596f458b456e/html5/thumbnails/9.jpg)
Jetpack Modules
![Page 10: Extending Firefox with Jetpack @ VanJS](https://reader033.vdocuments.net/reader033/viewer/2022061217/54b514ad4a79596f458b456e/html5/thumbnails/10.jpg)
Example 1: View Page Source In Tabvar tabBrowser = require("tab-browser");var contextMenu = require("context-menu");
exports.main = function() { var viewSourceItem = contextMenu.Item({ label: "View Page Source in Tab", onClick: function (contextObj, item) { tabBrowser.addTab("view-source:" + contextObj.document.URL); } }); contextMenu.add(viewSourceItem);}
![Page 11: Extending Firefox with Jetpack @ VanJS](https://reader033.vdocuments.net/reader033/viewer/2022061217/54b514ad4a79596f458b456e/html5/thumbnails/11.jpg)
Example 1: View Page Source In Tab
Source: http://github.com/erikvold/view-page-source-in-tab-jetpackDownload: https://addons.mozilla.org/en-US/firefox/addon/151809/
![Page 12: Extending Firefox with Jetpack @ VanJS](https://reader033.vdocuments.net/reader033/viewer/2022061217/54b514ad4a79596f458b456e/html5/thumbnails/12.jpg)
Example 2:Google Maps 4 Microformatsvar tabBrowser = require("tab-browser");var contextMenu = require("context-menu");var microformats = require("microformats").Microformats;
exports.main = function() { contextMenu.add(contextMenu.Item({ context: [".geo"], label: "Find on Google Maps", onClick: function (contextObj, item) { var ele = contextObj.node, geo = microformats.get('geo',ele.parentNode)[0]; tabBrowser.addTab("http://maps.google.com/?q=" + geo.latitude + ', ' + geo.longitude); } }));}
![Page 13: Extending Firefox with Jetpack @ VanJS](https://reader033.vdocuments.net/reader033/viewer/2022061217/54b514ad4a79596f458b456e/html5/thumbnails/13.jpg)
Example 2:Google Maps 4 Microformats
Source: http://github.com/erikvold/googlemaps4microformats-jetpackDownload: https://addons.mozilla.org/en-US/firefox/addon/153353/
![Page 14: Extending Firefox with Jetpack @ VanJS](https://reader033.vdocuments.net/reader033/viewer/2022061217/54b514ad4a79596f458b456e/html5/thumbnails/14.jpg)
Running the Jetpack SDK$ mkdir vanjs-example$ cd vanjs-example$ hg clone http://hg.mozilla.org/labs/jetpack-sdk/$ cd jetpack-sdk/$ lsREADME.txt bin examples packages python-lib static-files$ source bin/activateWelcome to the Jetpack SDK. Run 'cfx docs' for assistance.(jetpack-sdk)$ cd ..(jetpack-sdk)$ git clone git://github.com/erikvold/view-page-source-in-tab-jetpack.git(jetpack-sdk)$ cd view-page-source-in-tab-jetpack/(jetpack-sdk)$ lsREADME.md lib package.json(jetpack-sdk)$ cfx run -a firefox(jetpack-sdk)$ cfx xpiExporting extension to view-page-source-in-tab.xpi.
![Page 15: Extending Firefox with Jetpack @ VanJS](https://reader033.vdocuments.net/reader033/viewer/2022061217/54b514ad4a79596f458b456e/html5/thumbnails/15.jpg)
Jetpack FlightDeck
![Page 16: Extending Firefox with Jetpack @ VanJS](https://reader033.vdocuments.net/reader033/viewer/2022061217/54b514ad4a79596f458b456e/html5/thumbnails/16.jpg)
JEP 102 - Single UI Element
widget = require("basic-widget").Widget({ content: "http://reddit.com/favicon.ico", panel: "http://m.reddit.com"});
https://wiki.mozilla.org/Labs/Jetpack/Reboot/JEP/102
![Page 17: Extending Firefox with Jetpack @ VanJS](https://reader033.vdocuments.net/reader033/viewer/2022061217/54b514ad4a79596f458b456e/html5/thumbnails/17.jpg)
JEP 103 - Panel
const Panel = require("panel").Panel;let panel = Panel({ content: "Look ma, a panel!"}).show();
https://wiki.mozilla.org/Labs/Jetpack/Reboot/JEP/103
![Page 18: Extending Firefox with Jetpack @ VanJS](https://reader033.vdocuments.net/reader033/viewer/2022061217/54b514ad4a79596f458b456e/html5/thumbnails/18.jpg)
Jetpack Enhancement Proposals (JEPs) JEP 102 - Single UI Element JEP 103 – Panel JEP 104 – Simple Storage JEP 107 – Page Mods JEP 108 – Page Worker JEP 109 – XHR Request JEP 110 – Tabs JEP 111 – Selection JEP 112 – Context Menu JEP 113 – Localization JEP 114 – Places
https://wiki.mozilla.org/Labs/Jetpack/Reboot/JEP/
![Page 19: Extending Firefox with Jetpack @ VanJS](https://reader033.vdocuments.net/reader033/viewer/2022061217/54b514ad4a79596f458b456e/html5/thumbnails/19.jpg)
Getting InvolvedThe Jetpack SDK is an open source project and everyone is welcome to participate in its design, development, and testing.
Website: https://jetpack.mozillalabs.com/ Wiki: https://wiki.mozilla.org/Labs/Jetpack Discuss Jetpack: http://groups.google.com/group/mozilla-labs-jetpack Grab the source code: http://hg.mozilla.org/labs/jetpack-sdk/
![Page 20: Extending Firefox with Jetpack @ VanJS](https://reader033.vdocuments.net/reader033/viewer/2022061217/54b514ad4a79596f458b456e/html5/thumbnails/20.jpg)
Personalize the browser!