FIReFOX<br />HARISHANKARAN<br />Co-FOUNDER, INTERVIEWSTREET.COM<br />
QUICK POLL<br />2<br />
OPERATING SYSTEM?<br />3<br />
HISTORY<br />FORKED FROM THE MOZILLA SUITE<br />SOFTWARE BLOAT OF MOZILLA SUITE (IRC, MAIL, NEWS, HTML EDITOR AND WHAT NOT...
WHAT IS AN EXTENSION?<br />A TYPE OF “ADD-ONS”<br />EXTENSIONS<br />PLUGINS<br />THEMES<br />EXTENSIONS EXTEND YOUR BROWSE...
EXTENSIONS<br />6,000 EXTENSIONS AND STILL COUNTING<br />EXCELLENT  API  TO CREATE ANYTHING.<br />EXTENSIONS  ARE MADE BY ...
HELLO WORLD<br />OUR FIRST EXTENSION.<br />A MENU ITEM IN TOOL BAR<br />ON CLICK, SHOWS A POPUP “HELLO WORLD”<br />UPDATES...
8<br />
9<br />
TECHNOLOGY<br />10<br />
XUL<br />XML USER INTERFACE LANGUAGE<br />CROSS PLATFORM INTERFACE ELEMENTS<br />https://developer.mozilla.org/en/xul<br /...
XUL<br /><menulist> <br /><menupopup> <br /><menuitem label="option 1" value="1"/> <br /><menuitem label="option 2" value=...
CSS<br />IT’S TRUE!<br />CSS IS USED TO MODIFY USER INTERFACE<br />#hello-menuitem<br />{<br />  color: red !important;<br...
JAVASCRIPT<br />IT’S TRUE… AGAIN!<br />HANDLES COMMANDS IN THE INTERFACE<br />XMLHTTPREQUEST, DOM.<br />ALSO HAS ACCESS TO...
XPCOM<br />Cross Platform Component Object Model<br />The core or the “black box” of Firefox<br />Similar to Microsoft’s C...
SO…<br />XPCOM IS THE “BRAIN”<br />XUL  IS THE “SKELETON”<br />JAVASCRIPT IS THE “MUSCLE”<br />CSS IS THE “SKIN”<br />16<b...
17<br />
EXTENSION<br />18<br />
FOLDER STRUCTURE<br />19<br />
CONFUSING?<br />TRUST ME<br />IT’S NOT THAT HARD ;-)<br />20<br />
LET’S CREATE THE EXTENSION<br />https://addons.mozilla.org/en-US/developers/tools/builder<br />Add-on Name : Hello World<b...
LET’S CREATE THE EXTENSION<br />Applications to support : FF<br />Pre-built features : <br /><ul><li>About Dialog
Main Menu Command</li></ul>Create My Add-on<br />22<br />
EDIT THE FILES<br />Now we add features to this extension.<br />Windows: C:Documents and SettingshariApplication DataMozil...
ff-overlay.xul<br /> <menupopup id="menu_ToolsPopup"><br /><menuitem id="hello-hello" label="Hello World" oncommand="hello...
ff-overlay.xul<br /> <statusbar id="status-bar"><br />	<statusbarpanel id="hello-panel" label="" tooltiptext="" /><br />  ...
overlay.js<br />onMenuItemCommand: function(e) {<br />document.getElementById('hello-panel').label = "Yippee";<br />		aler...
YOUR FIRST EXTENSION IS READY!<br />27<br />
A BETTER EXTENSION<br />GET UPDATES FROM TWITTER<br />SHOW THE LAST UPDATE<br />28<br />
HOW TO LEARN ALL THIS?<br />29<br />
Before 1995<br />30<br />
After 1995 <br />31<br />
Upcoming SlideShare
Loading in …5
×

HungryFox - Firefox Extension Workshop

1,548 views
1,467 views

Published on

My presentation at Aaruush, SRM Univ. Organized by the Firefox User Group.

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,548
On SlideShare
0
From Embeds
0
Number of Embeds
126
Actions
Shares
0
Downloads
16
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

HungryFox - Firefox Extension Workshop

  1. 1. FIReFOX<br />HARISHANKARAN<br />Co-FOUNDER, INTERVIEWSTREET.COM<br />
  2. 2. QUICK POLL<br />2<br />
  3. 3. OPERATING SYSTEM?<br />3<br />
  4. 4. HISTORY<br />FORKED FROM THE MOZILLA SUITE<br />SOFTWARE BLOAT OF MOZILLA SUITE (IRC, MAIL, NEWS, HTML EDITOR AND WHAT NOT)<br />FF3, THE MOST DOWNLOADED SOFTWARE IN 24 HOURS (28,340,281 DOWNLOADS ON JUNE 17.<br />BROWSER SHARE OF FIREFOX – 46%<br />4<br />
  5. 5. WHAT IS AN EXTENSION?<br />A TYPE OF “ADD-ONS”<br />EXTENSIONS<br />PLUGINS<br />THEMES<br />EXTENSIONS EXTEND YOUR BROWSER<br />SINGLE FEATURE (HIDE MENUBAR)<br />FEATURE ENHANCEMENT (NOSCRIPT)<br />WEB APP INTEGRATION (TWITTERFOX)<br />NEW FEATURES (FIREBUG)<br />5<br />
  6. 6. EXTENSIONS<br />6,000 EXTENSIONS AND STILL COUNTING<br />EXCELLENT API TO CREATE ANYTHING.<br />EXTENSIONS ARE MADE BY GOOGLE, FACEBOOK, MICROSOFT, YAHOO AND NOW EVEN YOU.<br />6<br />
  7. 7. HELLO WORLD<br />OUR FIRST EXTENSION.<br />A MENU ITEM IN TOOL BAR<br />ON CLICK, SHOWS A POPUP “HELLO WORLD”<br />UPDATES STATUS BAR BY “YIPEE”<br />7<br />
  8. 8. 8<br />
  9. 9. 9<br />
  10. 10. TECHNOLOGY<br />10<br />
  11. 11. XUL<br />XML USER INTERFACE LANGUAGE<br />CROSS PLATFORM INTERFACE ELEMENTS<br />https://developer.mozilla.org/en/xul<br />http://www.hevanet.com/acorbin/xul/top.xul<br /><button label="Press Me" oncommand = "alert(Hola!');"/><br />11<br />
  12. 12. XUL<br /><menulist> <br /><menupopup> <br /><menuitem label="option 1" value="1"/> <br /><menuitem label="option 2" value="2"/> <br /><menuitem label="option 3" value="3"/> <br /><menuitem label="option 4" value="4"/> </menupopup> <br /></menulist><br />12<br />
  13. 13. CSS<br />IT’S TRUE!<br />CSS IS USED TO MODIFY USER INTERFACE<br />#hello-menuitem<br />{<br /> color: red !important;<br />}<br />13<br />
  14. 14. JAVASCRIPT<br />IT’S TRUE… AGAIN!<br />HANDLES COMMANDS IN THE INTERFACE<br />XMLHTTPREQUEST, DOM.<br />ALSO HAS ACCESS TO CORE API<br />onMenuItemCommand: function(e) {<br />document.getElementById('hello-panel').label = "Yippee";<br /> alert("Hello World");<br /> },<br />14<br />
  15. 15. XPCOM<br />Cross Platform Component Object Model<br />The core or the “black box” of Firefox<br />Similar to Microsoft’s COM or GNOME’s Corba or D-Bus<br />A Cross-platform API<br />15<br />
  16. 16. SO…<br />XPCOM IS THE “BRAIN”<br />XUL IS THE “SKELETON”<br />JAVASCRIPT IS THE “MUSCLE”<br />CSS IS THE “SKIN”<br />16<br />
  17. 17. 17<br />
  18. 18. EXTENSION<br />18<br />
  19. 19. FOLDER STRUCTURE<br />19<br />
  20. 20. CONFUSING?<br />TRUST ME<br />IT’S NOT THAT HARD ;-)<br />20<br />
  21. 21. LET’S CREATE THE EXTENSION<br />https://addons.mozilla.org/en-US/developers/tools/builder<br />Add-on Name : Hello World<br />Description : This is my first Firefox extension.<br />Add-on Version : 1.0.0<br />Unique ID : http://extensions.roachfiend.com/cgi-bin/guid.pl<br />Package Name : hello<br />Authors-name : <Your-name><br />Other contributors: <Friend’s name><br />21<br />
  22. 22. LET’S CREATE THE EXTENSION<br />Applications to support : FF<br />Pre-built features : <br /><ul><li>About Dialog
  23. 23. Main Menu Command</li></ul>Create My Add-on<br />22<br />
  24. 24. EDIT THE FILES<br />Now we add features to this extension.<br />Windows: C:Documents and SettingshariApplication DataMozillaFirefoxProfiles<br />GNU/Linux: .mozilla/firefox/<br />23<br />
  25. 25. ff-overlay.xul<br /> <menupopup id="menu_ToolsPopup"><br /><menuitem id="hello-hello" label="Hello World" oncommand="hello.onMenuItemCommand(event);"/><br /> </menupopup><br />24<br />
  26. 26. ff-overlay.xul<br /> <statusbar id="status-bar"><br /> <statusbarpanel id="hello-panel" label="" tooltiptext="" /><br /> </statusbar><br />25<br />
  27. 27. overlay.js<br />onMenuItemCommand: function(e) {<br />document.getElementById('hello-panel').label = "Yippee";<br /> alert("Hello World");<br /> }<br />26<br />
  28. 28. YOUR FIRST EXTENSION IS READY!<br />27<br />
  29. 29. A BETTER EXTENSION<br />GET UPDATES FROM TWITTER<br />SHOW THE LAST UPDATE<br />28<br />
  30. 30. HOW TO LEARN ALL THIS?<br />29<br />
  31. 31. Before 1995<br />30<br />
  32. 32. After 1995 <br />31<br />
  33. 33. THE END <br />hari@interviewstreet.com<br />http://twitter.com/sp2hari<br />32<br />

×