meta

This talk is a website:
http://talks.canuckistani.ca/sorry-osb-2012

& open source:
https://github.com/canuckistani/dzslides

about:me

about:mozilla

Sorry for browser hacking...

So Firefox has a bad reputation - that add-ons make it slow or unusable. At the same time, add-ons have always been a key part of Firefox, and the idea of the browser being extensible is a core part of Mozilla's beliefs.

It's a big compromise, and we're trying to strike the right balance between users taking delight in some add-on, and Firefox taking 10 minutes to load a page because that add-on leaks memory like burst dam.

The Top 5 Browser Hacks!

Obviously, I think browser hacking is really improtant. I think browsers should be hackable, and the easier we as browser vendors can make it to get people hacking their own web experience, the better.

Even more, IMO the web itself has been transformed by a series of seriously bad-ass hacks. Here's my list...

5. Firebug

Firebug was amazing! It revolutionized web development. We were all slobbering idiots guessing at things before Firebug. Firebug is so good, everyone else ripped it off. Firebug also became like emacs, it has its own extensions, it does everything, and SO SLOW!

It became not only the solution to but also the cause of all of your problems. No wonder devs just use chrome now.

4. Browser Extensions

Browser extensions first came to ie5 - before Mozilla, way before Firefox. They were massive gaping horrible security holes, but you could pretty much say that about anything related to ie5, or ie6.

Ironically this is a css rendering of the ie logo - it won't render at all in ie itself.

3. Phoenix

Let's face it, in September 2002 Mozilla Suite kinda sucked, Netscape was owned by AOL, and IE6 owned 90+% of the market. You couldn't say that the open web revolution started until some hackers at Mozilla released a skunkworks project they called Phoenix. It was faster, lighter, hipper, and it crashed 5x a day.

Phoenix became firebird, then Firefox, then got released, then got better and started to eat up big bleeding chucnks of IE's userbase. The rest, as they say, is history.

2. Webkit

Webkit is Apple's fork of KHTML, and it is easily the most widely distributed and used html rendering engine. It's kind of a big deal. If you think about it, Apple probably could have written their own for Safari, but they took some open source code, forked it, and kept at it, pushing the boundaries of what's possible.

Google picked it up too, and these days there are any number of slightly different versions of Webkit on all the phones we use, with slightly different css and jss capabilities, all capable of supporting slightly different sets of html5 apis. It's awesome.

1. Mozilla

This is Jamie Zawinski uploading the Mozilla source code.

Webkit is cool an all, but Mozilla was the first open source implementation of the web, and a hugely audacious move by Netscape as they struggled to survive the first round of the browser wars.

Achievement UNLOCKED

Today, most people browsing the internet do so using a high-quality, standards-compliant web browser based on either Webkit or Gecko. This is awesome! And an amazing achievment considering where we were 10 years ago. The web is the most ubiquitous software platform ever, and represents a level of freedom of communication, self-expression and creativity that is unprecedented.

How hackable is your browser?

It's not just about your browser being open source. How hackable is it? Can you write code, using web technologies puts you back in charge of your browsing experience?

Is your browser built with web technology? Can you contribute whole new APIs written in JS?

It's not hacking,
it's 'Personalization'

...although hacking sounds cooler.

To be fair, it's not exactly "hacking", it's more about "personalization".

It's ah-boot empowering users to
be in control of their web experience!

At Mozilla, putting the user first is really important.

...this is why we created the Add-on SDK

Simple, powerful

'personalization'
is a key feature

of the Add-on SDK

Personalizing web sites has a long and glorious history: Bookmarklets, Greasemonkey... Personalize the web experience was important, and it is important, that's why Add-on SDK was designed from the start with that in mind.

By the way, is there anyone that already used Add-on SDK?

A new way to develop Add-ons

The Add-on SDK is the new way to create add-ons for Firefox. It has command line tool for testing, running and packaging; a test framework; a modular development via CommonJS, and growing collection of community-contributed modules.

And...

you can

Reuse your skills

No need to learn new things!

You can reuse HTML5, CSS and JavaScript to build your add-on.

So, how we can use the Add-on SDK to personalize the web?

Page-Mod

...or 'Styling the web'

Page-Mod. This module is designed to easily modify a web page.

Page-Mods are applied to all pages that match a url pattern: you can match a specific URL, domain, protocol, and even use a Regular Expression.

If a document matches the pattern, your add-on will be applied. It doesn't matter if the page is loaded in a tab, popup, or a frame.

Content Style

Page-mods can modify the appearance of pages using content style, and behavior using content script.

Content Style are quite simple: you can apply stylesheets that can overrides the CSS of the page.

ContentStyle example:

HN.css

This is a simple example of applying some css to a page via page-mod.

Content Scripts

They're atteched to the HTML document, but they're isolated. It means, they can interact with the Document's DOM, but they're protected from web page's JavaScript code.

ContentScript example:

Current tweet JSON

Here we've got a mostly simple example og a page-mod: when the page is loaded it signals back to the main add-on code to fetch json data for the current tweet. When the JSON arrives, the main add-on code sends the JSON into the page, which displays it in an unobtrusive way.

But wait, there's more!

Add-on SDK is not only Page-Mod

(...)

Future Firefox UI

Mobile Support?

If your using Add-on SDK to develop a Firefox Add-on it will runs on both Desktop and Mobile. The support is still experimental, so not all modules are compatible, but Page-Mods for example works perfectly.

Serious examples

here are some more serious examples of add-ons written in the SDK.

Collusion

We'll keep on browser hacking...

The Web is the platform.

BOOT to Gecko

Questions?

Get hacking!