Firefox Extension to Add Contacts, Events, and View Addresses
HungryFox - Firefox Extension Workshop
32
FIREFOX HARISHANKARAN Co-FOUNDER, INTERVIEWSTREET.COM
-
Upload
harishankaran-k -
Category
Technology
-
view
1.468 -
download
0
description
My presentation at Aaruush, SRM Univ. Organized by the Firefox User Group.
Transcript of HungryFox - Firefox Extension Workshop
FIREFOXHARISHANKARANCo-FOUNDER, INTERVIEWSTREET.COM
2
QUICK POLL
3
OPERATING SYSTEM?
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%
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)
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.
7
HELLO WORLD
OUR FIRST EXTENSION.
A MENU ITEM IN TOOL BAR ON CLICK, SHOWS A POPUP “HELLO
WORLD”
UPDATES STATUS BAR BY “YIPEE”
8
9
10
TECHNOLOGY
JAVASCRIPT DOM CSS
XUL AJAX XML
XPCOM
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!');"/>
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>
13
CSS
IT’S TRUE! CSS IS USED TO MODIFY USER
INTERFACE
#hello-menuitem{ color: red !important;}
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"); },
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
16
SO…
XPCOM IS THE “BRAIN”
XUL IS THE “SKELETON”
JAVASCRIPT IS THE “MUSCLE”
CSS IS THE “SKIN”
17
18
EXTENSION
xpi
install.rdfchrome.manif
est
*.xul*.js
*.dtd*.propertie
s
*.css*.png
19
FOLDER STRUCTURE
root
install.rdf
chrome.manifest
chrome
content
*.js
*.xul
locale
en-US
fr-FR
skin
*.css
*.png
defaults preferences prefs.js
20
CONFUSING?
TRUST ME
IT’S NOT THAT HARD ;-)
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>
22
LET’S CREATE THE EXTENSION Applications to support : FF Pre-built features :
About Dialog Main Menu Command
Create My Add-on
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/
24
ff-overlay.xul
<menupopup id="menu_ToolsPopup"> <menuitem id="hello-hello" label="Hello World" oncommand="hello.onMenuItemCommand(event);"/> </menupopup>
25
ff-overlay.xul
<statusbar id="status-bar"><statusbarpanel id="hello-panel"
label="" tooltiptext="" /> </statusbar>
26
overlay.js
onMenuItemCommand: function(e) {
document.getElementById('hello-panel').label = "Yippee"; alert("Hello World"); }
27
YOUR FIRST EXTENSION IS READY!
28
A BETTER EXTENSION
GET UPDATES FROM TWITTER
SHOW THE LAST UPDATE
29
HOW TO LEARN ALL THIS?
30
Before 1995
31
After 1995
32
THE END
http://twitter.com/sp2hari
