Extending Firefox with Jetpack Erik Vold Jetpack Ambassador http://erikvold.com/ http://twitter.com/erikvold http://identi...
<ul><li>Outline </li></ul><ul><li>Why extend the browser? </li></ul><ul><li>Firefox Extensions </li></ul><ul><li>Jetpack P...
<ul><li>Why extend the browser? </li></ul><ul><li>Personalization </li></ul><ul><ul><li>Productivity </li></ul></ul><ul><u...
<ul><li>Firefox Extensions </li></ul><ul><li>XULRunner & Chrome </li></ul><ul><li>XUL, XPCOM, and JS Modules (JSM) </li></...
<ul><li>Problems with </li></ul><ul><li>Firefox Extensions </li></ul><ul><li>Restarts </li></ul><ul><li>Following platform...
<ul><li>Jetpack Prototype </li></ul><ul><li>Single file </li></ul><ul><li>Web technologies (JS, HTML, and CSS) </li></ul><...
<ul><li>Problems with </li></ul><ul><li>Jetpack Prototype </li></ul><ul><li>Requires a FF addon </li></ul><ul><li>Single f...
<ul><li>Jetpack Reboot (SDK) </li></ul><ul><li>Security </li></ul><ul><ul><li>Generative Dilemma </li></ul></ul><ul><ul><l...
Jetpack Modules
Example 1:  View Page Source In Tab var tabBrowser = require(&quot;tab-browser&quot;); var contextMenu = require(&quot;con...
Example 1:  View Page Source In Tab Source:   http://github.com/erikvold/view-page-source-in-tab-jetpack Download:   https...
Example 2: Google Maps 4 Microformats var tabBrowser = require(&quot;tab-browser&quot;); var contextMenu = require(&quot;c...
Example 2: Google Maps 4 Microformats Source:   http://github.com/erikvold/googlemaps4microformats-jetpack Download:   htt...
Running the Jetpack SDK $ mkdir vanjs-example $ cd vanjs-example $ hg clone http://hg.mozilla.org/labs/jetpack-sdk/ $ cd j...
Jetpack FlightDeck
JEP 102 - Single UI Element widget = require(&quot;basic-widget&quot;).Widget({ content: &quot;http://reddit.com/favicon.i...
JEP 103 - Panel const Panel = require(&quot;panel&quot;).Panel; let panel = Panel({ content: &quot;Look ma, a panel!&quot;...
<ul><li>Jetpack Enhancement Proposals (JEPs) </li></ul><ul><li>JEP 102 - Single UI Element </li></ul><ul><li>JEP 103 – Pan...
<ul><li>Getting Involved </li></ul><ul><li>The Jetpack SDK is an open source project and everyone is welcome to participat...
Personalize the browser!
[email_address]
Upcoming SlideShare
Loading in...5
×

Extending Firefox with Jetpack @ VanJS

2,024

Published on

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
2,024
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
10
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Extending Firefox with Jetpack @ VanJS

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

    Clipping is a handy way to collect important slides you want to go back to later.

×