HungryFox - Firefox Extension Workshop
Upcoming SlideShare
Loading in...5
×
 

HungryFox - Firefox Extension Workshop

on

  • 1,360 views

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

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

Statistics

Views

Total Views
1,360
Views on SlideShare
1,320
Embed Views
40

Actions

Likes
0
Downloads
14
Comments
0

5 Embeds 40

http://www.linkedin.com 25
https://www.linkedin.com 12
http://coderwall.com 1
https://twimg0-a.akamaihd.net 1
https://si0.twimg.com 1

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

HungryFox - Firefox Extension Workshop HungryFox - Firefox Extension Workshop Presentation Transcript

  • FIReFOX
    HARISHANKARAN
    Co-FOUNDER, INTERVIEWSTREET.COM
  • QUICK POLL
    2
  • OPERATING SYSTEM?
    3
  • 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
  • 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
  • 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
  • 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
  • 9
  • TECHNOLOGY
    10
  • 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
  • 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
  • CSS
    IT’S TRUE!
    CSS IS USED TO MODIFY USER INTERFACE
    #hello-menuitem
    {
    color: red !important;
    }
    13
  • 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
  • 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
  • SO…
    XPCOM IS THE “BRAIN”
    XUL IS THE “SKELETON”
    JAVASCRIPT IS THE “MUSCLE”
    CSS IS THE “SKIN”
    16
  • 17
  • EXTENSION
    18
  • FOLDER STRUCTURE
    19
  • CONFUSING?
    TRUST ME
    IT’S NOT THAT HARD ;-)
    20
  • 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
  • LET’S CREATE THE EXTENSION
    Applications to support : FF
    Pre-built features :
    • About Dialog
    • Main Menu Command
    Create My Add-on
    22
  • EDIT THE FILES
    Now we add features to this extension.
    Windows: C:Documents and SettingshariApplication DataMozillaFirefoxProfiles
    GNU/Linux: .mozilla/firefox/
    23
  • ff-overlay.xul
    <menupopup id="menu_ToolsPopup">
    <menuitem id="hello-hello" label="Hello World" oncommand="hello.onMenuItemCommand(event);"/>
    </menupopup>
    24
  • ff-overlay.xul
    <statusbar id="status-bar">
    <statusbarpanel id="hello-panel" label="" tooltiptext="" />
    </statusbar>
    25
  • overlay.js
    onMenuItemCommand: function(e) {
    document.getElementById('hello-panel').label = "Yippee";
    alert("Hello World");
    }
    26
  • YOUR FIRST EXTENSION IS READY!
    27
  • A BETTER EXTENSION
    GET UPDATES FROM TWITTER
    SHOW THE LAST UPDATE
    28
  • HOW TO LEARN ALL THIS?
    29
  • Before 1995
    30
  • After 1995
    31
  • THE END 
    hari@interviewstreet.com
    http://twitter.com/sp2hari
    32