HungryFox - Firefox Extension Workshop
-
Upload
harishankaran-k -
Category
Technology
-
view
1.470 -
download
0
description
Transcript of HungryFox - Firefox Extension Workshop
![Page 1: HungryFox - Firefox Extension Workshop](https://reader033.fdocuments.in/reader033/viewer/2022061206/5482a059b4af9f690d8b480d/html5/thumbnails/1.jpg)
FIREFOXHARISHANKARANCo-FOUNDER, INTERVIEWSTREET.COM
![Page 2: HungryFox - Firefox Extension Workshop](https://reader033.fdocuments.in/reader033/viewer/2022061206/5482a059b4af9f690d8b480d/html5/thumbnails/2.jpg)
2
QUICK POLL
![Page 3: HungryFox - Firefox Extension Workshop](https://reader033.fdocuments.in/reader033/viewer/2022061206/5482a059b4af9f690d8b480d/html5/thumbnails/3.jpg)
3
OPERATING SYSTEM?
![Page 4: HungryFox - Firefox Extension Workshop](https://reader033.fdocuments.in/reader033/viewer/2022061206/5482a059b4af9f690d8b480d/html5/thumbnails/4.jpg)
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%
![Page 5: HungryFox - Firefox Extension Workshop](https://reader033.fdocuments.in/reader033/viewer/2022061206/5482a059b4af9f690d8b480d/html5/thumbnails/5.jpg)
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)
![Page 6: HungryFox - Firefox Extension Workshop](https://reader033.fdocuments.in/reader033/viewer/2022061206/5482a059b4af9f690d8b480d/html5/thumbnails/6.jpg)
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.
![Page 7: HungryFox - Firefox Extension Workshop](https://reader033.fdocuments.in/reader033/viewer/2022061206/5482a059b4af9f690d8b480d/html5/thumbnails/7.jpg)
7
HELLO WORLD
OUR FIRST EXTENSION.
A MENU ITEM IN TOOL BAR ON CLICK, SHOWS A POPUP “HELLO
WORLD”
UPDATES STATUS BAR BY “YIPEE”
![Page 8: HungryFox - Firefox Extension Workshop](https://reader033.fdocuments.in/reader033/viewer/2022061206/5482a059b4af9f690d8b480d/html5/thumbnails/8.jpg)
8
![Page 9: HungryFox - Firefox Extension Workshop](https://reader033.fdocuments.in/reader033/viewer/2022061206/5482a059b4af9f690d8b480d/html5/thumbnails/9.jpg)
9
![Page 10: HungryFox - Firefox Extension Workshop](https://reader033.fdocuments.in/reader033/viewer/2022061206/5482a059b4af9f690d8b480d/html5/thumbnails/10.jpg)
10
TECHNOLOGY
JAVASCRIPT DOM CSS
XUL AJAX XML
XPCOM
![Page 11: HungryFox - Firefox Extension Workshop](https://reader033.fdocuments.in/reader033/viewer/2022061206/5482a059b4af9f690d8b480d/html5/thumbnails/11.jpg)
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!');"/>
![Page 12: HungryFox - Firefox Extension Workshop](https://reader033.fdocuments.in/reader033/viewer/2022061206/5482a059b4af9f690d8b480d/html5/thumbnails/12.jpg)
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>
![Page 13: HungryFox - Firefox Extension Workshop](https://reader033.fdocuments.in/reader033/viewer/2022061206/5482a059b4af9f690d8b480d/html5/thumbnails/13.jpg)
13
CSS
IT’S TRUE! CSS IS USED TO MODIFY USER
INTERFACE
#hello-menuitem{ color: red !important;}
![Page 14: HungryFox - Firefox Extension Workshop](https://reader033.fdocuments.in/reader033/viewer/2022061206/5482a059b4af9f690d8b480d/html5/thumbnails/14.jpg)
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"); },
![Page 15: HungryFox - Firefox Extension Workshop](https://reader033.fdocuments.in/reader033/viewer/2022061206/5482a059b4af9f690d8b480d/html5/thumbnails/15.jpg)
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
![Page 16: HungryFox - Firefox Extension Workshop](https://reader033.fdocuments.in/reader033/viewer/2022061206/5482a059b4af9f690d8b480d/html5/thumbnails/16.jpg)
16
SO…
XPCOM IS THE “BRAIN”
XUL IS THE “SKELETON”
JAVASCRIPT IS THE “MUSCLE”
CSS IS THE “SKIN”
![Page 17: HungryFox - Firefox Extension Workshop](https://reader033.fdocuments.in/reader033/viewer/2022061206/5482a059b4af9f690d8b480d/html5/thumbnails/17.jpg)
17
![Page 18: HungryFox - Firefox Extension Workshop](https://reader033.fdocuments.in/reader033/viewer/2022061206/5482a059b4af9f690d8b480d/html5/thumbnails/18.jpg)
18
EXTENSION
xpi
install.rdfchrome.manif
est
*.xul*.js
*.dtd*.propertie
s
*.css*.png
![Page 19: HungryFox - Firefox Extension Workshop](https://reader033.fdocuments.in/reader033/viewer/2022061206/5482a059b4af9f690d8b480d/html5/thumbnails/19.jpg)
19
FOLDER STRUCTURE
root
install.rdf
chrome.manifest
chrome
content
*.js
*.xul
locale
en-US
fr-FR
skin
*.css
*.png
defaults preferences prefs.js
![Page 20: HungryFox - Firefox Extension Workshop](https://reader033.fdocuments.in/reader033/viewer/2022061206/5482a059b4af9f690d8b480d/html5/thumbnails/20.jpg)
20
CONFUSING?
TRUST ME
IT’S NOT THAT HARD ;-)
![Page 21: HungryFox - Firefox Extension Workshop](https://reader033.fdocuments.in/reader033/viewer/2022061206/5482a059b4af9f690d8b480d/html5/thumbnails/21.jpg)
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>
![Page 22: HungryFox - Firefox Extension Workshop](https://reader033.fdocuments.in/reader033/viewer/2022061206/5482a059b4af9f690d8b480d/html5/thumbnails/22.jpg)
22
LET’S CREATE THE EXTENSION Applications to support : FF Pre-built features :
About Dialog Main Menu Command
Create My Add-on
![Page 23: HungryFox - Firefox Extension Workshop](https://reader033.fdocuments.in/reader033/viewer/2022061206/5482a059b4af9f690d8b480d/html5/thumbnails/23.jpg)
23
EDIT THE FILES
Now we add features to this extension.
Windows: C:\Documents and Settings\hari\Application Data\Mozilla\Firefox\Profiles
GNU/Linux: .mozilla/firefox/
![Page 24: HungryFox - Firefox Extension Workshop](https://reader033.fdocuments.in/reader033/viewer/2022061206/5482a059b4af9f690d8b480d/html5/thumbnails/24.jpg)
24
ff-overlay.xul
<menupopup id="menu_ToolsPopup"> <menuitem id="hello-hello" label="Hello World" oncommand="hello.onMenuItemCommand(event);"/> </menupopup>
![Page 25: HungryFox - Firefox Extension Workshop](https://reader033.fdocuments.in/reader033/viewer/2022061206/5482a059b4af9f690d8b480d/html5/thumbnails/25.jpg)
25
ff-overlay.xul
<statusbar id="status-bar"><statusbarpanel id="hello-panel"
label="" tooltiptext="" /> </statusbar>
![Page 26: HungryFox - Firefox Extension Workshop](https://reader033.fdocuments.in/reader033/viewer/2022061206/5482a059b4af9f690d8b480d/html5/thumbnails/26.jpg)
26
overlay.js
onMenuItemCommand: function(e) {
document.getElementById('hello-panel').label = "Yippee"; alert("Hello World"); }
![Page 27: HungryFox - Firefox Extension Workshop](https://reader033.fdocuments.in/reader033/viewer/2022061206/5482a059b4af9f690d8b480d/html5/thumbnails/27.jpg)
27
YOUR FIRST EXTENSION IS READY!
![Page 28: HungryFox - Firefox Extension Workshop](https://reader033.fdocuments.in/reader033/viewer/2022061206/5482a059b4af9f690d8b480d/html5/thumbnails/28.jpg)
28
A BETTER EXTENSION
GET UPDATES FROM TWITTER
SHOW THE LAST UPDATE
![Page 29: HungryFox - Firefox Extension Workshop](https://reader033.fdocuments.in/reader033/viewer/2022061206/5482a059b4af9f690d8b480d/html5/thumbnails/29.jpg)
29
HOW TO LEARN ALL THIS?
![Page 30: HungryFox - Firefox Extension Workshop](https://reader033.fdocuments.in/reader033/viewer/2022061206/5482a059b4af9f690d8b480d/html5/thumbnails/30.jpg)
30
Before 1995
![Page 31: HungryFox - Firefox Extension Workshop](https://reader033.fdocuments.in/reader033/viewer/2022061206/5482a059b4af9f690d8b480d/html5/thumbnails/31.jpg)
31
After 1995
![Page 32: HungryFox - Firefox Extension Workshop](https://reader033.fdocuments.in/reader033/viewer/2022061206/5482a059b4af9f690d8b480d/html5/thumbnails/32.jpg)
32
THE END
http://twitter.com/sp2hari