Extend the Browser
with Jetpack


mitcho
Michael Yoshitaka Erlewine


Boston JavaScript Meetup
February 25, 2010
mitcho
                                  linguist, coder, teacher
                       Mozilla Labs: Ubiquity core devel...
Today
 •   extending Firefox with Jetpack add-ons

 •   simple code demo

 •   Jetpack present and future
The big question:

hackability
the web should be generative
the browser should be generative
Firefox Add-ons
 1. addons.mozilla.org (AMO)

 2. over 6000 in the wild

 3. HTML, JavaScript, XUL

 4. Extend Firefox con...
Firefox Add-ons
 1. addons.mozilla.org (AMO)

 2. over 6000 in the wild

 3. HTML, JavaScript, XUL

 4. Extend Firefox con...
Firefox Add-ons
 1. addons.mozilla.org (AMO)

 2. over 6000 in the wild

        my favorites: Tree Style Tabs, del.icio.u...
Firefox Add-ons
 1. addons.mozilla.org (AMO)

 2. over 6000 in the wild

 3. HTML, JavaScript, XUL

 4. Extend Firefox con...
Firefox Add-ons
 1. addons.mozilla.org (AMO)

 2. over 6000 in the wild

 3. HTML, JavaScript, XUL

 4. Extend Firefox con...
DEMO
+

      Firefox Addons

largest extension platform ever
+

 Firefox Addons

1.5 million downloads
but...
Current Add-ons
 1. installs need restarts

 2. not trivial to develop

 3. requires manual upgrades

 4. not designed for...
Current Add-ons
 1. installs need restarts

 2. not trivial to develop

 3. requires manual upgrades

 4. not designed for...
Current Add-ons
 1. installs need restarts

 2. not trivial to develop

 3. requires manual upgrades

 4. not designed for...
Current Add-ons
 1. installs need restarts

 2. not trivial to develop

 3. requires manual upgrades

 4. not designed for...
© John Slabyk
jetpack.mozillalabs.com
Jetpack

 a new way to extend Firefox

      doesn’t replace XUL add-ons
Jetpack
 It’s easy
   1. JavaScript, HTML, CSS
      •      use tools like
      •      simple, modular API
   2. instant ...
Jetpack
 It’s easy
   1. JavaScript, HTML, CSS
      •      use tools like
      •      simple, modular API
   2. instant ...
Jetpack
 It’s easy
   1. JavaScript, HTML, CSS
      •      use tools like
      •      simple, modular API
   2. instant ...
Jetpack
 It’s easy
   1. JavaScript, HTML, CSS
      •      use tools like
      •      simple, modular API
   2. instant ...
Jetpack
 It’s easy
   1. JavaScript, HTML, CSS
      •      use tools like
      •      simple, modular API
   2. instant ...
Jetpack
 It’s secure
   1. modularized “capabilities”
   2. fast review
   3. automatic updates
Jetpack
 It’s secure
   1. modularized “capabilities”
   2. fast review
   3. automatic updates
Jetpack
 It’s secure
   1. modularized “capabilities”
   2. fast review
   3. automatic updates
Jetpack

 It’s built for the future
   1. stable API
   2. compatible with future versions
Jetpack

 It’s built for the future
   1. stable API
   2. compatible with future versions
Jetpack

      DEMO 1:
      Helvetica
Jetpack

       DEMO 2:
     You Are Here
IP Query API (XML):
ipinfodb.com/ip_query2.php?ip=meetup.com
Jetpack

       DEMO 2:
     You Are Here
© 2005 en.wikipedia.org/wiki/File:Rocket_man02_-_melbourne_show_2005.jpg




Welcome to the future.
Jetpack
prototype 0.8
jetpack.mozillalabs.com
Now, an important dispatch from the mothership...




       CC BY-NC-SA www.flickr.com/photos/joshmichtom/3846011713/
Now, an important dispatch from the mothership...
This is a prototype.




          CC BY-NC-SA flickr.com/photos/the_pdu...
the Jetpack “reboot”




                       CC BY-NC-SA flickr.com/photos/
                        urban_outlaw/222934...
the Jetpack “reboot”

  1. produce full XPI’s and submit to AMO
  2. adoption of Common JS
   •            module system
 ...
the Jetpack “reboot”

  1. produce full XPI’s and submit to AMO
  2. adoption of Common JS
   •            module system
 ...
the Jetpack “reboot”

  1. produce full XPI’s and submit to AMO
  2. adoption of Common JS
   •            module system
 ...
the Jetpack “reboot”

  1. produce full XPI’s and submit to AMO
  2. adoption of Common JS
   •            module system
 ...
the Jetpack “reboot”

  1. produce full XPI’s and submit to AMO
  2. adoption of Common JS
   •            module system
 ...
the Jetpack “reboot”

  1. produce full XPI’s and submit to AMO
  2. adoption of Common JS
   •            module system
 ...
the Jetpack “reboot”




Coming March 2010
Learn more:
  wiki.mozilla.org/Labs/Jetpack/Reboot
Jetpack
                    the benefits
the power
of add-ons     +    of a modern,
                     webby api

    ea...
CC BY-NC-SA flickr.com/photos/terryhart/2979919447/
Thank you!
Questions?



mitcho
Michael Yoshitaka Erlewine

   by-nc-sa
mitcho.com
@mitchoyoshitaka
Extend the Browser with Jetpack
Extend the Browser with Jetpack
Extend the Browser with Jetpack
Extend the Browser with Jetpack
Upcoming SlideShare
Loading in...5
×

Extend the Browser with Jetpack

6,597

Published on

My talk on Mozilla Labs' Jetpack project at the Boston JavaScript meetup:

Project Jetpack is Mozilla's recent initiative to explore new ways to make extending the browser easier. Jetpack lets web developers and browser hackers alike use the open web stack of HTML/CSS/JS to modify the Firefox browser itself. Come see Jetpack in action and learn about recent developments in the project from mitcho, a Mozilla Jetpack Ambassador right here in the Boston area.

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

No Downloads
Views
Total Views
6,597
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
15
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Extend the Browser with Jetpack

  1. 1. Extend the Browser with Jetpack mitcho Michael Yoshitaka Erlewine Boston JavaScript Meetup February 25, 2010
  2. 2. mitcho linguist, coder, teacher Mozilla Labs: Ubiquity core developer, Jetpack Ambassador MIT: Linguistics PhD student mitcho.com @mitchoyoshitaka © 2010 Douglas Hanna
  3. 3. Today • extending Firefox with Jetpack add-ons • simple code demo • Jetpack present and future
  4. 4. The big question: hackability
  5. 5. the web should be generative
  6. 6. the browser should be generative
  7. 7. Firefox Add-ons 1. addons.mozilla.org (AMO) 2. over 6000 in the wild 3. HTML, JavaScript, XUL 4. Extend Firefox contest
  8. 8. Firefox Add-ons 1. addons.mozilla.org (AMO) 2. over 6000 in the wild 3. HTML, JavaScript, XUL 4. Extend Firefox contest
  9. 9. Firefox Add-ons 1. addons.mozilla.org (AMO) 2. over 6000 in the wild my favorites: Tree Style Tabs, del.icio.us, Firebug, After the Deadline
  10. 10. Firefox Add-ons 1. addons.mozilla.org (AMO) 2. over 6000 in the wild 3. HTML, JavaScript, XUL 4. Extend Firefox contest
  11. 11. Firefox Add-ons 1. addons.mozilla.org (AMO) 2. over 6000 in the wild 3. HTML, JavaScript, XUL 4. Extend Firefox contest
  12. 12. DEMO
  13. 13. + Firefox Addons largest extension platform ever
  14. 14. + Firefox Addons 1.5 million downloads
  15. 15. but...
  16. 16. Current Add-ons 1. installs need restarts 2. not trivial to develop 3. requires manual upgrades 4. not designed for quick security review
  17. 17. Current Add-ons 1. installs need restarts 2. not trivial to develop 3. requires manual upgrades 4. not designed for quick security review
  18. 18. Current Add-ons 1. installs need restarts 2. not trivial to develop 3. requires manual upgrades 4. not designed for quick security review
  19. 19. Current Add-ons 1. installs need restarts 2. not trivial to develop 3. requires manual upgrades 4. not designed for quick security review
  20. 20. © John Slabyk
  21. 21. jetpack.mozillalabs.com
  22. 22. Jetpack a new way to extend Firefox doesn’t replace XUL add-ons
  23. 23. Jetpack It’s easy 1. JavaScript, HTML, CSS • use tools like • simple, modular API 2. instant install 3. easy debugging
  24. 24. Jetpack It’s easy 1. JavaScript, HTML, CSS • use tools like • simple, modular API 2. instant install 3. easy debugging
  25. 25. Jetpack It’s easy 1. JavaScript, HTML, CSS • use tools like • simple, modular API 2. instant install 3. easy debugging
  26. 26. Jetpack It’s easy 1. JavaScript, HTML, CSS • use tools like • simple, modular API 2. instant install 3. easy debugging
  27. 27. Jetpack It’s easy 1. JavaScript, HTML, CSS • use tools like • simple, modular API 2. instant install 3. easy debugging
  28. 28. Jetpack It’s secure 1. modularized “capabilities” 2. fast review 3. automatic updates
  29. 29. Jetpack It’s secure 1. modularized “capabilities” 2. fast review 3. automatic updates
  30. 30. Jetpack It’s secure 1. modularized “capabilities” 2. fast review 3. automatic updates
  31. 31. Jetpack It’s built for the future 1. stable API 2. compatible with future versions
  32. 32. Jetpack It’s built for the future 1. stable API 2. compatible with future versions
  33. 33. Jetpack DEMO 1: Helvetica
  34. 34. Jetpack DEMO 2: You Are Here
  35. 35. IP Query API (XML): ipinfodb.com/ip_query2.php?ip=meetup.com
  36. 36. Jetpack DEMO 2: You Are Here
  37. 37. © 2005 en.wikipedia.org/wiki/File:Rocket_man02_-_melbourne_show_2005.jpg Welcome to the future.
  38. 38. Jetpack prototype 0.8 jetpack.mozillalabs.com
  39. 39. Now, an important dispatch from the mothership... CC BY-NC-SA www.flickr.com/photos/joshmichtom/3846011713/
  40. 40. Now, an important dispatch from the mothership... This is a prototype. CC BY-NC-SA flickr.com/photos/the_pdub/4269928124/ CC BY-NC-SA www.flickr.com/photos/joshmichtom/3846011713/
  41. 41. the Jetpack “reboot” CC BY-NC-SA flickr.com/photos/ urban_outlaw/2229348208/
  42. 42. the Jetpack “reboot” 1. produce full XPI’s and submit to AMO 2. adoption of Common JS • module system • add and share capabilities 3. better tools • built-in memory tracker, unit tests
  43. 43. the Jetpack “reboot” 1. produce full XPI’s and submit to AMO 2. adoption of Common JS • module system • add and share capabilities 3. better tools • built-in memory tracker, unit tests
  44. 44. the Jetpack “reboot” 1. produce full XPI’s and submit to AMO 2. adoption of Common JS • module system • add and share capabilities 3. better tools • built-in memory tracker, unit tests
  45. 45. the Jetpack “reboot” 1. produce full XPI’s and submit to AMO 2. adoption of Common JS • module system • add and share capabilities 3. better tools • built-in memory tracker, unit tests
  46. 46. the Jetpack “reboot” 1. produce full XPI’s and submit to AMO 2. adoption of Common JS • module system • add and share capabilities 3. better tools • built-in memory tracker, unit tests
  47. 47. the Jetpack “reboot” 1. produce full XPI’s and submit to AMO 2. adoption of Common JS • module system • add and share capabilities 3. better tools • built-in memory tracker, unit tests
  48. 48. the Jetpack “reboot” Coming March 2010 Learn more: wiki.mozilla.org/Labs/Jetpack/Reboot
  49. 49. Jetpack the benefits the power of add-ons + of a modern, webby api easy, secure, future-proof
  50. 50. CC BY-NC-SA flickr.com/photos/terryhart/2979919447/
  51. 51. Thank you! Questions? mitcho Michael Yoshitaka Erlewine by-nc-sa mitcho.com @mitchoyoshitaka
  1. A particular slide catching your eye?

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

×