Post on 15-Jan-2015
description
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
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/