55
mitcho Michael Yoshitaka Erlewine Boston JavaScript Meetup February 25, 2010 Extend the Browser with Jetpack

Extend the Browser with Jetpack

Embed Size (px)

DESCRIPTION

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.

Citation preview

Page 1: Extend the Browser with Jetpack

mitchoMichael Yoshitaka Erlewine

Boston JavaScript Meetup

February 25, 2010

Extend the Browser with Jetpack

Page 2: Extend the Browser with Jetpack

mitcholinguist, coder, teacher

© 2010 Douglas Hanna

mitcho.com @mitchoyoshitaka

Mozilla Labs: Ubiquity core developer, Jetpack Ambassador

MIT: Linguistics PhD student

Page 3: Extend the Browser with Jetpack

Today

• extending Firefox with Jetpack add-ons

• simple code demo

• Jetpack present and future

Page 4: Extend the Browser with Jetpack

The big question:

hackability

Page 5: Extend the Browser with Jetpack
Page 6: Extend the Browser with Jetpack

the web should be generative

Page 7: Extend the Browser with Jetpack

the browser should be generative

Page 8: Extend the Browser with Jetpack
Page 9: Extend the Browser with Jetpack

Firefox Add-ons

1. addons.mozilla.org (AMO)

2. over 6000 in the wild

3. HTML, JavaScript, XUL

4. Extend Firefox contest

Page 10: Extend the Browser with Jetpack

Firefox Add-ons

1. addons.mozilla.org (AMO)

2. over 6000 in the wild

3. HTML, JavaScript, XUL

4. Extend Firefox contest

Page 11: Extend the Browser with Jetpack

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

Page 12: Extend the Browser with Jetpack

Firefox Add-ons

1. addons.mozilla.org (AMO)

2. over 6000 in the wild

3. HTML, JavaScript, XUL

4. Extend Firefox contest

Page 13: Extend the Browser with Jetpack

Firefox Add-ons

1. addons.mozilla.org (AMO)

2. over 6000 in the wild

3. HTML, JavaScript, XUL

4. Extend Firefox contest

Page 14: Extend the Browser with Jetpack
Page 15: Extend the Browser with Jetpack
Page 16: Extend the Browser with Jetpack

DEMO

Page 17: Extend the Browser with Jetpack

Firefox Addons

+

largest extension platform ever

Page 18: Extend the Browser with Jetpack

Firefox Addons

+

1.5 million downloads

Page 19: Extend the Browser with Jetpack

but...

Page 20: Extend the Browser with Jetpack

Current Add-ons

1. installs need restarts

2. not trivial to develop

3. requires manual upgrades

4. not designed for quick security review

Page 21: Extend the Browser with Jetpack

Current Add-ons

1. installs need restarts

2. not trivial to develop

3. requires manual upgrades

4. not designed for quick security review

Page 22: Extend the Browser with Jetpack

Current Add-ons

1. installs need restarts

2. not trivial to develop

3. requires manual upgrades

4. not designed for quick security review

Page 23: Extend the Browser with Jetpack

Current Add-ons

1. installs need restarts

2. not trivial to develop

3. requires manual upgrades

4. not designed for quick security review

Page 24: Extend the Browser with Jetpack

© John Slabyk

Page 25: Extend the Browser with Jetpack

jetpack.mozillalabs.com

Page 26: Extend the Browser with Jetpack

Jetpack

a new way to extend Firefox

doesn’t replace XUL add-ons

Page 27: Extend the Browser with Jetpack

It’s easy

1. JavaScript, HTML, CSS

• use tools like

• simple, modular API

2. instant install

3. easy debugging

Jetpack

Page 28: Extend the Browser with Jetpack

It’s easy

1. JavaScript, HTML, CSS

• use tools like

• simple, modular API

2. instant install

3. easy debugging

Jetpack

Page 29: Extend the Browser with Jetpack

It’s easy

1. JavaScript, HTML, CSS

• use tools like

• simple, modular API

2. instant install

3. easy debugging

Jetpack

Page 30: Extend the Browser with Jetpack

It’s easy

1. JavaScript, HTML, CSS

• use tools like

• simple, modular API

2. instant install

3. easy debugging

Jetpack

Page 31: Extend the Browser with Jetpack

It’s easy

1. JavaScript, HTML, CSS

• use tools like

• simple, modular API

2. instant install

3. easy debugging

Jetpack

Page 32: Extend the Browser with Jetpack

It’s secure

1. modularized “capabilities”

2. fast review

3. automatic updates

Jetpack

Page 33: Extend the Browser with Jetpack

It’s secure

1. modularized “capabilities”

2. fast review

3. automatic updates

Jetpack

Page 34: Extend the Browser with Jetpack

It’s secure

1. modularized “capabilities”

2. fast review

3. automatic updates

Jetpack

Page 35: Extend the Browser with Jetpack

It’s built for the future

1. stable API

2. compatible with future versions

Jetpack

Page 36: Extend the Browser with Jetpack

It’s built for the future

1. stable API

2. compatible with future versions

Jetpack

Page 37: Extend the Browser with Jetpack

Jetpack

DEMO 1:Helvetica

Page 38: Extend the Browser with Jetpack

Jetpack

DEMO 2:You Are Here

Page 39: Extend the Browser with Jetpack

IP Query API (XML):ipinfodb.com/ip_query2.php?ip=meetup.com

Page 40: Extend the Browser with Jetpack

Jetpack

DEMO 2:You Are Here

Page 41: Extend the Browser with Jetpack

© 2005 en.wikipedia.org/wiki/File:Rocket_man02_-_melbourne_show_2005.jpg

Welcome to the future.

Page 42: Extend the Browser with Jetpack

Jetpackprototype 0.8jetpack.mozillalabs.com

Page 43: Extend the Browser with Jetpack

Now, an important dispatch from the mothership...

CC BY-NC-SA www.flickr.com/photos/joshmichtom/3846011713/

Page 44: Extend the Browser with Jetpack

Now, an important dispatch from the mothership...

CC BY-NC-SA www.flickr.com/photos/joshmichtom/3846011713/

This is a prototype.

CC BY-NC-SA flickr.com/photos/the_pdub/4269928124/

Page 46: Extend the Browser with Jetpack

1. produce full XPI’s and submit to AMO

2. adoption of Common JS

• require module system

• add and share capabilities

3. better tools

• built-in memory tracker, unit tests

the Jetpack “reboot”

Page 47: Extend the Browser with Jetpack

1. produce full XPI’s and submit to AMO

2. adoption of Common JS

• require module system

• add and share capabilities

3. better tools

• built-in memory tracker, unit tests

the Jetpack “reboot”

Page 48: Extend the Browser with Jetpack

1. produce full XPI’s and submit to AMO

2. adoption of Common JS

• require module system

• add and share capabilities

3. better tools

• built-in memory tracker, unit tests

the Jetpack “reboot”

Page 49: Extend the Browser with Jetpack

1. produce full XPI’s and submit to AMO

2. adoption of Common JS

• require module system

• add and share capabilities

3. better tools

• built-in memory tracker, unit tests

the Jetpack “reboot”

Page 50: Extend the Browser with Jetpack

1. produce full XPI’s and submit to AMO

2. adoption of Common JS

• require module system

• add and share capabilities

3. better tools

• built-in memory tracker, unit tests

the Jetpack “reboot”

Page 51: Extend the Browser with Jetpack

1. produce full XPI’s and submit to AMO

2. adoption of Common JS

• require module system

• add and share capabilities

3. better tools

• built-in memory tracker, unit tests

the Jetpack “reboot”

Page 52: Extend the Browser with Jetpack

Coming March 2010

Learn more:

wiki.mozilla.org/Labs/Jetpack/Reboot

the Jetpack “reboot”

Page 53: Extend the Browser with Jetpack

the power of add-ons

the benefits of a modern,

webby api

Jetpack

+

easy, secure, future-proof

Page 55: Extend the Browser with Jetpack

mitchoMichael Yoshitaka Erlewine

by-nc-samitcho.com@mitchoyoshitaka

Thank you!Questions?