This document discusses the Firefox web browser and how to create Firefox extensions. It provides an overview of Firefox's history and how it forked from the Mozilla suite. It then discusses what extensions are and how they can enhance the browser. The document demonstrates how to create a simple "Hello World" extension using XML, CSS, JavaScript, and the XPCOM API. It outlines the folder structure and files needed for an extension and walks through editing the files to add a menu item and update the status bar. The document encourages learning more about building better extensions that integrate features like retrieving Twitter updates.

1. FIReFOXHARISHANKARANCo-FOUNDER, INTERVIEWSTREET.COM

2. QUICK POLL2

3. OPERATING SYSTEM?3

4. HISTORYFORKED FROM THE MOZILLA SUITESOFTWARE BLOAT OF MOZILLA SUITE (IRC, MAIL, NEWS, HTML EDITOR AND WHAT NOT)FF3, THE MOST DOWNLOADED SOFTWARE IN 24 HOURS (28,340,281 DOWNLOADS ON JUNE 17.BROWSER SHARE OF FIREFOX – 46%4

5. WHAT IS AN EXTENSION?A TYPE OF “ADD-ONS”EXTENSIONSPLUGINSTHEMESEXTENSIONS EXTEND YOUR BROWSERSINGLE FEATURE (HIDE MENUBAR)FEATURE ENHANCEMENT (NOSCRIPT)WEB APP INTEGRATION (TWITTERFOX)NEW FEATURES (FIREBUG)5

6. EXTENSIONS6,000 EXTENSIONS AND STILL COUNTINGEXCELLENT API TO CREATE ANYTHING.EXTENSIONS ARE MADE BY GOOGLE, FACEBOOK, MICROSOFT, YAHOO AND NOW EVEN YOU.6

7. HELLO WORLDOUR FIRST EXTENSION.A MENU ITEM IN TOOL BARON CLICK, SHOWS A POPUP “HELLO WORLD”UPDATES STATUS BAR BY “YIPEE”7

8. 8

9. 9

10. TECHNOLOGY10

11. XULXML USER INTERFACE LANGUAGECROSS PLATFORM INTERFACE ELEMENTShttps://developer.mozilla.org/en/xulhttp://www.hevanet.com/acorbin/xul/top.xul<button label="Press Me" oncommand = "alert(Hola!');"/>11

12. XUL<menulist> <menupopup> <menuitem label="option 1" value="1"/> <menuitem label="option 2" value="2"/> <menuitem label="option 3" value="3"/> <menuitem label="option 4" value="4"/> </menupopup> </menulist>12

13. CSSIT’S TRUE!CSS IS USED TO MODIFY USER INTERFACE#hello-menuitem{ color: red !important;}13

14. JAVASCRIPTIT’S TRUE… AGAIN!HANDLES COMMANDS IN THE INTERFACEXMLHTTPREQUEST, DOM.ALSO HAS ACCESS TO CORE APIonMenuItemCommand: function(e) {document.getElementById('hello-panel').label = "Yippee"; alert("Hello World"); },14

15. XPCOMCross Platform Component Object ModelThe core or the “black box” of FirefoxSimilar to Microsoft’s COM or GNOME’s Corba or D-BusA Cross-platform API15

16. SO…XPCOM IS THE “BRAIN”XUL IS THE “SKELETON”JAVASCRIPT IS THE “MUSCLE”CSS IS THE “SKIN”16

17. 17

18. EXTENSION18

19. FOLDER STRUCTURE19

20. CONFUSING?TRUST MEIT’S NOT THAT HARD ;-)20

21. LET’S CREATE THE EXTENSIONhttps://addons.mozilla.org/en-US/developers/tools/builderAdd-on Name : Hello WorldDescription : This is my first Firefox extension.Add-on Version : 1.0.0Unique ID : http://extensions.roachfiend.com/cgi-bin/guid.plPackage Name : helloAuthors-name : <Your-name>Other contributors: <Friend’s name>21

22. LET’S CREATE THE EXTENSIONApplications to support : FFPre-built features : About Dialog

23. Main Menu CommandCreate My Add-on22

24. EDIT THE FILESNow we add features to this extension.Windows: C:\Documents and Settings\hari\Application Data\Mozilla\Firefox\ProfilesGNU/Linux: .mozilla/firefox/23

25. ff-overlay.xul <menupopup id="menu_ToolsPopup"><menuitem id="hello-hello" label="Hello World" oncommand="hello.onMenuItemCommand(event);"/> </menupopup>24

26. ff-overlay.xul <statusbar id="status-bar"> <statusbarpanel id="hello-panel" label="" tooltiptext="" /> </statusbar>25

27. overlay.jsonMenuItemCommand: function(e) {document.getElementById('hello-panel').label = "Yippee"; alert("Hello World"); }26

28. YOUR FIRST EXTENSION IS READY!27

29. A BETTER EXTENSIONGET UPDATES FROM TWITTERSHOW THE LAST UPDATE28

30. HOW TO LEARN ALL THIS?29

31. Before 199530

32. After 1995 31

33. THE END hari@interviewstreet.comhttp://twitter.com/sp2hari32