The Secret in the

Extension Developmentfor Mozilla Firefox

by Littlebtc (Hsiao-Ting Yu)

YZU Open Source Software Community Lecture

The text of the slide is under CC-BY-SA-3.0.Most photos are under CC-BY-SA compatible license,while screenshots / logos are under Fair Use.

OSSF / MozTW / YZU CSE

Me

• Undergraduate major in EE in NTU

• A Programmer (PHP)

• A Web Developer

– HTML/CSS

– Mozilla Technique (NicoFox)

http://littlebtc.blogspot.com

FREE SOFTWARE?OPEN SOURCE?

FREE SOFTWARE?→You can use, distribute and modify the software without restriction.

OPEN SOURCE?→The source code of software should be available and modification should not be restricted.

OSSF

• A project in the Institute of Information Science of Academia Sinica

• Spread the Free / Open source software spirit

• Support Free/Open Source Software community in Taiwan

MozTW http://moztw.org/

• A Community in Taiwan spreading the Firefox and Mozilla-related software

• Translate Firefox/Thunderbird/… to Traditional Chinese

• It is not so technical! It is a community devoting to improve your web experience.

http://www.flickr.com/photos/othree/3147927774/ http://www.flickr.com/photos/bobchao/3049469807/

WEB HISTORYIn my personal view:

Browser Wars

Browser War I

• I started to surf the Internet since 1997, using 36.6K Modem

• At that time, the most popular browser is Netscape, while I am an IE fans :p

• No AJAX, no CSS (<table> layouts)

• No rich media: Speed of Internet is still very slow

Yahoo! In 1998

( From archive.org )

IE4

(From Wikipedia)

Browser War I

• Why Internet Explorer wins: (I think that)

– FREE of charge & bundled with Windows

– Development of IE was active

– Killer Applications: FrontPage

– DHTML, CSS, VBScript support

– Netscape got in troubles: rewrite, lost AOL support, etc.

In 2001-2004

IE6 is the de-facto standard!

“A-Kuei” (2000-)

2001: Wikipedia

My Web work in 2002

…continued

The change of the web

• 2004: Gmail

• AJAX becomes a popular technique

And the browser wars II

• 2004: The grow of Firefox

(From Wikipedia)

2005: YouTube

2005: Writely (Google Docs today)

http://www.flickr.com/photos/googlisti/217887352/

2007: Nico Nico Douga

The generation of RIA

• 2007:

–HTML5 adopted by W3C

–Microsoft Silverlight

• 2008:

–Adobe AIR & Flex 3

2009: MozTW <audio> Demo

http://moztw.org/demo/audioplayer/

Mozilla and Mozilla Firefox

To make Internet Better!

Photo: http://www.flickr.com/photos/ews/2603070503/ CC-BY-2.0 by JP Puerta

“Mozilla”

• Originally, it is Netscape’s codename

• 1998: Mozilla Organization: “Co-ordinate” the development of Netscape

• Netscape 6 & 7 : Not so success

• 2003: Browser(Firefox)/Mail(Thunderbird) Netscape closed downIndependent Mozilla Foundation

The Mozilla Manifesto

“Make the Internet an ever better place for everyone.”

Firefox

Why Firefox?

• Free and Open Source Software

• A browser that is easy to use

• Highly web standard compatible

• And also easy to extend!

• Every Firefox can be different!

Firefox Extensions…

addons.mozilla.org

NicoFox• ~5000 Users

Extensions

• One of the “Add-ons”:

– Extensions, Themes, Plugin

• “Extend” your browser

– Provide more features

– Fix some problem

– Integrate with sites or applications

Extensions with Single Feature…

• Locationbar2

• Hide Menubar (Made in Taiwan!)

After Press Alt

Extensions with Feature Enhancements

• NoScript

Web Application Integration

• TwitterFox

• GmailManager

• Forestfox

• S3Fox(For Amazon S3)

Extension with New Feature(s)• AdBlock Plus

Extensions with New Feature(s)

• New Tong Wen Tang

– Conversion between Chinese characters

Extensions with New Feature(s)

• IE Tab: Use IE engine in a Firefox tab• Made in Taiwan!

Extensions with New Feature(s)

• Stylish (Custom CSS for every site & user interface)

• FireGuestures

• And more!

Application Level

• Sage

• Scrapbook

• Firebug

One trick

• Together with Foxkeh

• Glasser

– Apply Vista / 7 Aero Glass in toolbar

GO TO THE TECHNIQUE PART

Hacking the Firefox!

This is the Firefox…

… and this is part of the the“Main Browser Window”.

Wait? Wait!

Is this HTML / JavaScript?

=> No, but something similar to this

XUL

• “Write” Interface in an XML text format

– Just Like write web pages in HTML

• Cross-platform interface elements

XML User Interface Language

THERE IS NO DATA.THERE IS ONLY XUL.

<button />

JavaScript

• Used in both web and program!

• A major part of the source code in Mozilla Firefox is in JavaScript!

• JavaScript in Firefox core is able to access some core API

Easy but powerful

<script type=“x-application/javascript”>alert(‘Hello World!’);

</script>

<script type=“text/javascript”>alert(‘Hello World!’);</script>

Firefox Core

Web

CSS

• In Web: A powerful and modern styling language

• In Firefox Core: Still powerful to design interface in detail

– Styling toolbar, button, and more…

Make Your Style

label{width: 500px;

}

h1 {font-size: 160%;color: #999999;}

Firefox Core

Web

Ways to custom your Firefox?

Method Website Application (Firefox, …)

User Style Sheets (CSS) UserContent.css, Stylish UserChrome.css

User Script (JavaScript) Bookmarklet, Greasemonkey UserChrome.js

Extensions Easy but powerful

Themes (Not supported) Very flexible

Go for it!How developer actually develop their extension

developer.mozilla.org

Set up the environment

Read lots of code

Look for other’s source

Try and Error

This is what I write…

This is what it appears

Sometimes it is not your fault…

• It is Firefox’s Bug!

• It is something’s restrictions!

• It needs a complex way to bypass the problem! Orz

Sometimes it is not you fault

• The document is incomplete or even completely wrong

• You need to try it!

• Or… Find if some people had tried it!

The Hard Work

The player tooks me almost 50 hours!

The Hard Work

October 22 October 29

November 29

Dec 10

Feb 14

Still Complex

September 2008 (After two months of hard work!)

December 2008

Feedback

Take the Shortcut

About the Courses

• Speaker: Me

• 5/9, 5/23 09:00-17:00

• Near Taipei Main Station

• XUL, JavaScript, and more!

We have a “Chapter 0”!

THANK YOU!See you!

http://www.flickr.com/photos/bobchao/3325341079/