Extending Firefox with Jetpack @ VanJS
-
Upload
erik-vold -
Category
Technology
-
view
1.948 -
download
1
description
Transcript of 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!