1. YZU Open Source Software Community Lecture
OSSF / MozTW / YZU CSE
The Secret in the
Extension Development
for Mozilla Firefox
by Littlebtc (Hsiao-Ting Yu)
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.

2. Me
• Undergraduate major in EE in NTU
• A Programmer (PHP)
• A Web Developer
– HTML/CSS
– Mozilla Technique (NicoFox)

3. http://littlebtc.blogspot.com

4. FREE SOFTWARE?
OPEN SOURCE?

5. 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.

6. 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

7. 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/bobchao/3049469807/
http://www.flickr.com/photos/othree/3147927774/

8. In my personal view:
WEB HISTORY

9. Browser Wars

10. 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

11. Yahoo! In 1998
( From archive.org )

12. IE4
(From Wikipedia)

13. 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.

14. In 2001-2004
IE6 is the de-facto
standard!

15. “A-Kuei” (2000-)

16. 2001: Wikipedia

17. My Web work in 2002

18. …continued

19. The change of the web
• 2004: Gmail
• AJAX becomes a popular technique

20. And the browser wars II
• 2004: The grow of Firefox
(From Wikipedia)

21. 2005: YouTube

22. 2005: Writely (Google Docs today)
http://www.flickr.com/photos/googlisti/217887352/

23. 2007: Nico Nico Douga

24. The generation of RIA
• 2007:
–HTML5 adopted by W3C
–Microsoft Silverlight
• 2008:
–Adobe AIR & Flex 3

25. 2009: MozTW <audio> Demo
http://moztw.org/demo/audioplayer/

26. Photo: http://www.flickr.com/photos/ews/2603070503/

CC-BY-2.0 by JP Puerta

To make Internet Better!
Mozilla and Mozilla Firefox

27. “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 down
Independent Mozilla Foundation

28. The Mozilla Manifesto
“Make the Internet an ever
better place for everyone.”

29. Firefox

30. 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!

31. Firefox Extensions…

32. addons.mozilla.org

33. NicoFox
• ~5000 Users

34. Extensions
• One of the “Add-ons”:
– Extensions, Themes, Plugin
• “Extend” your browser
– Provide more features
– Fix some problem
– Integrate with sites or applications

35. Extensions with Single Feature…
• Locationbar2
• Hide Menubar (Made in Taiwan!)
After Press Alt

36. Extensions with Feature
Enhancements
• NoScript

37. Web Application Integration
• TwitterFox
• GmailManager
• Forestfox
• S3Fox
(For Amazon S3)

38. Extension with New Feature(s)
• AdBlock Plus

39. Extensions with New Feature(s)
• New Tong Wen Tang
– Conversion between Chinese characters

40. Extensions with New Feature(s)
• IE Tab: Use IE engine in a Firefox tab
• Made in Taiwan!

41. Extensions with New Feature(s)
• Stylish (Custom CSS for every site & user interface)
• FireGuestures
• And more!

42. Application Level
• Sage
• Scrapbook
• Firebug

43. One trick
• Together with Foxkeh
• Glasser
– Apply Vista / 7 Aero Glass in toolbar

44. Hacking the Firefox!
GO TO THE TECHNIQUE PART

45. This is the Firefox…

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

47. Wait? Wait!
Is this HTML / JavaScript?
=> No, but something similar to this

48. • “Write” Interface in an XML
XML User Interface text format
Language
– Just Like write web pages in
XUL HTML
• Cross-platform interface
elements
THERE IS NO DATA.
THERE IS ONLY XUL.
<button />

49. • Used in both web and
program!
Easy but
powerful • A major part of the
JavaScript source code in Mozilla
Firefox is in JavaScript!
• JavaScript in Firefox core
Web
is able to access some
<script type=“text/javascript”> core API
alert(‘Hello World!’);
</script>
Firefox Core
<script type=“x-application/javascript”>
alert(‘Hello World!’);
</script>

50. • In Web: A powerful and
modern styling language
Make Your Style
• In Firefox Core: Still
CSS powerful to design interface
in detail
– Styling toolbar, button, and
Web
more…
h1 {
font-size: 160%;
color: #999999;
}
Firefox Core
label{
width: 500px;
}

51. 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

52. How developer actually develop their extension
Go for it!

53. developer.mozilla.org

54. Set up the environment

55. Read lots of code

56. Look for other’s source

57. Try and Error

58. This is what I write…

59. This is what it appears

60. 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

61. 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!

62. The Hard Work
The player tooks me almost 50 hours!

63. The Hard Work
October 22 October 29

64. November 29

65. Dec 10

66. Feb 14

67. Still Complex
September 2008 (After two months of hard work!)
December 2008

68. Feedback

69. Take the Shortcut

70. About the Courses
• Speaker: Me
• 5/9, 5/23 09:00-17:00
• Near Taipei Main Station
• XUL, JavaScript, and more!

71. We have a “Chapter 0”!

72. http://www.flickr.com/photos/bobchao/3325341079/
See you!
THANK YOU!