Extending Firefox with Jetpack @ VanJS

Extending Firefoxwith

Jetpack

Erik VoldJetpack Ambassador

http://erikvold.com/http://twitter.com/erikvoldhttp://identi.ca/erikvold

@ VanJS, Vancouver, BC

May 19th 2010

Outline

Why extend the browser? Firefox Extensions Jetpack Prototype Jetpack Reboot Examples Down the road

Why extend the browser? Personalization

Productivity Accessibility Information Functionality Security

Firefox Extensions

XULRunner & Chrome XUL, XPCOM, and JS Modules (JSM) XPI addons.mozilla.org (AMO) XUL, CSS, & JS

Problems withFirefox Extensions

Restarts Following platform changes Testing XPCOM & JSM are not useable in other contexts Security

Jetpack Prototype

Single file Web technologies (JS, HTML, and CSS) Smart, Simple, and Powerful APIs jQuery Rapid development cycle

No restarts Easy to share

Problems withJetpack Prototype

Requires a FF addon Single file Code reuse Security Reliance on jQuery

Jetpack Reboot (SDK)

SecurityGenerative DilemmaPrinciple of Least Authority

CommonJS Code Reuse

No Restarts Unit Testing Future & Application Resilient

Jetpack Modules

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);}

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/

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); } }));}

Example 2:Google Maps 4 Microformats

Source: http://github.com/erikvold/googlemaps4microformats-jetpackDownload: https://addons.mozilla.org/en-US/firefox/addon/153353/

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.

Jetpack FlightDeck

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

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

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/

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/

Personalize the browser!

erikvvold@gmail.com