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

hari@interviewstreet.com

http://twitter.com/sp2hari