• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Firefox Extension Development
 

Firefox Extension Development

on

  • 3,191 views

 

Statistics

Views

Total Views
3,191
Views on SlideShare
3,148
Embed Views
43

Actions

Likes
2
Downloads
30
Comments
0

2 Embeds 43

http://aptech.ac.vn 29
http://aptech.ac.vn:8801 14

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

    Firefox Extension Development Firefox Extension Development Presentation Transcript

    • Firefox Extension Development
    • Why Firefox?
      Performance
      Security
      User friendly (ease to use)
      Security
      Memory efficiency
      Extensibility
      Extension, extension and extensions
      It has a strong development foundation
      www.developer.mozilla.com
      www.builder.mozillalabs.com
      And many more
    • Some facts!
      W3C Web Browser Statistics
    • Some Interesting add-ons
      I read BBC Arabic????
    • Part I. Using Add-on SDK
    • Firefox profiles
      You can run Firefox in many different profiles
      Each profiles has its own configuration
      Caching
      Histories
      Network settings
      Add-ons
      Etc
      For our development we should create a new profile for Firefox.
      In order to run Firefox in with a specific profile the following command is used
      > firefox -no-remote -P profileName
    • Making a translator add-on
    • SDK commands
      Go to the add-on folder and type
      > binactivate.bat
      Now the add-on sdk is ready.
      You can now type
      >cfx docs
      This will bring you to http://127.0.0.1:8888/
      This documentation has a complete guide on how to make one add-on
    • Initializing the package
      Type the following commands to create a folder and move to that folder
      > mkdirtestaddon
      > cd testaddon
      Initialize the configuration of one add-on
      > cfxinit
    • Google APIs
      Google provides us many of its apis so we can use Google’s service
      You can go to www.code.google.com and then go to APIs and Tools.
      Look for “Language…” and then go to “Translate”
      We are going to use the google REST service.
      One example of use is:
    • Create translator.js
      Change this to “|vi” if you would like it to be in Vietnamese
    • In the main.js
    • Deployment
      Type the following to deploy it in Firefox and test
      > cfx run
      Packaging the add-on, Firefox add-on is actually a zip package with the extension “xpi”
      Type the following to package the add-on
      > cfxxpi
      Drag and drop the xpi file to Firefox to install and run.
      • Add-on typical structure
      • Resource Description Framework (RDF)
      • XML User Interface Language (XUL)
      • Tabbed Browser
      • Firefox Interfaces and Services
      Developing a Firefox Add-On from scratch
    • Simple structure of an add-on
      sampleapp/
      chrome.manifest
      install.rdf
      content/
      sampleapp.js
      sampleapp.xul
      somedialog.js
      somedialog.xul
      skin/
      sampleapp.css
    • chrome.manifest
      Use to help Firefox to find where to add our xul component
      Typical manifest file:
    • Resource Description Framework (RDF)
      RDF is a language for representing information about resources in the World Wide Web
      It’s about “Making Statements About Resources”
      Statement: “Mr. A creates www.mra.com”
      Subject is “Mr. A”
      Predicate is “creates”
      Object is the page (“www.mra.com”)
      How can we make this as machine-processable
      <http://www.mra.com> <http://purl.org/dc/elements/1.1/creator> <http://www.mra.com/staffs/Mr.A> .
      RDF can be written in form of xml.
    • install.rdf
    • XML User Interface Language (XUL)
      Window/Dialog/Overlay
      Boxes
      Widgets: label, toolbarbutton, menu, menuitem, contextmenu, etc…
    • emailsplugin.xul
    • DOM Inspector
      Firefox add-on DOM Inspector helps us to inspect the browser chrome://browser/content/browser.xul
    • Disable XUL Cache
      Firefox caches some xul so it could work faster
      During development it’s better that we disable the xul caching:
      Open Firefox in development profile and type “about:config”
      Right click > New > boolean
      Name: nglayout.debug.disable_xul_cache and value false
    • emailsplugin.css
    • emailsplugin.js
      You can go to the following page, it will help you about the “Tabbed Browser” https://developer.mozilla.org/en/Code_snippets/Tabbed_browser
    • Option dialog
      Sometimes, if we need to input some options into your Firefox add-on.
      That’s the time, you use a xul dialog.
    • Option Dialog
      We add the following files
      optionsDialog.xul
      optionsDialog.js
      optionsDialog.css
      Change the way we add new tab when user clicks the Open Mails button.
      Make a for loop and open all pages in the option file
      Add in the install.rdf one line describe about the option dialog:
      <em:optionsURL>chrome://emailsplugin/content/optionsDialog.xul</em:optionsURL>
    • Filefox IO
      You can do the IO operation (read/write to file) using Firefox XPCOM component
      The followings are snippets to:
      take current directory of the extension
      read from a file
      write to a file
    • Read from a file
    • Writing to a file
    • Thank you and QA?
      Further interests: contact vungpv@fpt.com.vn
      QA?
    • References
      Add-on SDK: www.builder.mozillalabs.com
      Google APIs: www.code.google.com
      RDF: http://www.w3.org/RDF/
      XUL: Firefox Programming Book or https://developer.mozilla.org/en/XUL
      DOM Inspector: https://addons.mozilla.org/en-us/firefox/addon/dom-inspector-6622/
      Tabbed browser: https://developer.mozilla.org/en/Code_snippets/Tabbed_browser
      IO with Firefox: https://developer.mozilla.org/en/Code_snippets/File_I%2F%2FO