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. FIReFOX HARISHANKARAN Co-FOUNDER, INTERVIEWSTREET.COM

2. QUICK POLL 2

3. OPERATING SYSTEM? 3

4. HISTORY FORKED FROM THE MOZILLA SUITE SOFTWARE 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” EXTENSIONS PLUGINS THEMES EXTENSIONS EXTEND YOUR BROWSER SINGLE FEATURE (HIDE MENUBAR) FEATURE ENHANCEMENT (NOSCRIPT) WEB APP INTEGRATION (TWITTERFOX) NEW FEATURES (FIREBUG) 5

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

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

8. 8

9. 9

10. TECHNOLOGY 10

11. XUL XML USER INTERFACE LANGUAGE CROSS PLATFORM INTERFACE ELEMENTS https://developer.mozilla.org/en/xul http://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. CSS IT’S TRUE! CSS IS USED TO MODIFY USER INTERFACE #hello-menuitem { color: red !important; } 13

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

15. XPCOM Cross Platform Component Object Model The core or the “black box” of Firefox Similar to Microsoft’s COM or GNOME’s Corba or D-Bus A Cross-platform API 15

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

17. 17

18. EXTENSION 18

19. FOLDER STRUCTURE 19

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

21. LET’S CREATE THE EXTENSION https://addons.mozilla.org/en-US/developers/tools/builder Add-on Name : Hello World Description : This is my first Firefox extension. Add-on Version : 1.0.0 Unique ID : http://extensions.roachfiend.com/cgi-bin/guid.pl Package Name : hello Authors-name : <Your-name> Other contributors: <Friend’s name> 21

23. Main Menu CommandCreate My Add-on 22

24. EDIT THE FILES Now we add features to this extension. Windows: C:ocuments and Settingsaripplication Dataozillairefoxrofiles GNU/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.js onMenuItemCommand: function(e) { document.getElementById('hello-panel').label = "Yippee"; alert("Hello World"); } 26

28. YOUR FIRST EXTENSION IS READY! 27

29. A BETTER EXTENSION GET UPDATES FROM TWITTER SHOW THE LAST UPDATE 28

30. HOW TO LEARN ALL THIS? 29

31. Before 1995 30

32. After 1995 31

33. THE END  hari@interviewstreet.com http://twitter.com/sp2hari 32