mitchoMichael Yoshitaka Erlewine

Boston JavaScript Meetup

February 25, 2010

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

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 contest

Firefox Add-ons

1. addons.mozilla.org (AMO)

2. over 6000 in the wild

3. HTML, JavaScript, XUL

4. Extend Firefox contest

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

Firefox Add-ons

1. addons.mozilla.org (AMO)

2. over 6000 in the wild

3. HTML, JavaScript, XUL

4. Extend Firefox contest

Firefox Add-ons

1. addons.mozilla.org (AMO)

2. over 6000 in the wild

3. HTML, JavaScript, XUL

4. Extend Firefox contest

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 quick security review

Current Add-ons

1. installs need restarts

2. not trivial to develop

3. requires manual upgrades

4. not designed for quick security review

Current Add-ons

1. installs need restarts

2. not trivial to develop

3. requires manual upgrades

4. not designed for quick security review

Current Add-ons

1. installs need restarts

2. not trivial to develop

3. requires manual upgrades

4. not designed for quick security review

© John Slabyk

jetpack.mozillalabs.com

Jetpack

a new way to extend Firefox

doesn’t replace XUL add-ons

It’s easy

1. JavaScript, HTML, CSS

• use tools like

• simple, modular API

2. instant install

3. easy debugging

Jetpack

It’s easy

1. JavaScript, HTML, CSS

• use tools like

• simple, modular API

2. instant install

3. easy debugging

Jetpack

It’s easy

1. JavaScript, HTML, CSS

• use tools like

• simple, modular API

2. instant install

3. easy debugging

Jetpack

It’s easy

1. JavaScript, HTML, CSS

• use tools like

• simple, modular API

2. instant install

3. easy debugging

Jetpack

It’s easy

1. JavaScript, HTML, CSS

• use tools like

• simple, modular API

2. instant install

3. easy debugging

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

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.

Jetpackprototype 0.8jetpack.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...

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

This is a prototype.

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

the Jetpack “reboot”

CC BY-NC-SA flickr.com/photos/urban_outlaw/2229348208/

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”

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”

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”

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”

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”

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”

Coming March 2010

Learn more:

wiki.mozilla.org/Labs/Jetpack/Reboot

the Jetpack “reboot”

the power of add-ons

the benefits of a modern,

webby api

Jetpack

+

easy, secure, future-proof

CC BY-NC-SA flickr.com/photos/terryhart/2979919447/

mitchoMichael Yoshitaka Erlewine

by-nc-samitcho.com@mitchoyoshitaka

Thank you!Questions?