Embed Size (px)
Citation preview
Mozilla Corporation 3/15/2011
What we should learn
•Learn what extension are, what they can do, the staff they are made of
•Configure your development environment
•Make an extension
•Package and test it
Mozilla Corporation 3/15/2011
Required Gears
•A Linux Mac or Windows machine
•A terminal application(Gnome Terminal, Terminal, Command Prompt)
•A text editor(Notpad++, TextEdit, Komodo Edit, Vim or Emacs)
•A zip archiver (zip or 7-zip)
•Basic knowledge of HTML CSS and JavaScript
Mozilla Corporation 3/15/2011
What is an extension?
•A package of files that modify Firefox's appearance and/or behavior
•In the zip file archive format (but in .xpi file extension)
•Two manifesto file describe content
•Distribute, browse and search via AMO
•Install, manage uninstall via Add-ons window
Mozilla Corporation 3/15/2011
What can they do?
• Add and remove interface elements
(menu, button, etc.)
• Modify appearance of elements
(color, border, icon, etc.)
• Listen and response to events
(page loads, mouse clicks, etc.)
• Access modules and components
(file manipulation,networking,data storage,etc.)
• Add their own modules and components and override the build-in ones
Mozilla Corporation 3/15/2011
Content vs. Chrome
•Content is a webpage that Firefox load in browser tabs.
•Chrome is Firefox user interface (i.e. everything around the browser tabs, including other windows like preferences and add-ons)
Mozilla Corporation 3/15/2011
Why use chrome?
•Chrome privilege are the ability to do anything that Firefox can do.
•Extensions are part of chrome and have chrome privilege!
Mozilla Corporation 3/15/2011
Extension building blocks
•XUL and XHTML for structure, widgets
•CSS for appearance and style
•JavaScript for behavior
•DTDs and properties for localization
•JavaScript and C++ for modules/components
Mozilla Corporation 3/15/2011
XUL
•XML Interface Language
•XML vocabulary for building interfaces
•Like HTML, but for application
•Tags like <menu> <button> <tab>
•Different layout(box) model
•Much of Firefox’s interface is built with XUL
•You can mix XUL and XHTML
Mozilla Corporation 3/15/2011
Develop environment
•Firefox profile (firefox -P)
•Developer preferences
•Developer extensions
•Extension dictionary
Mozilla Corporation 3/15/2011
Profiles
•A hidden feature of Firefox
•Directory that store user’s data(preferences, bookmarks, saved passwords, etc.)
•Extensions are profile-specific
•Use develop profile to develop your add-on and default profile for normal use
Mozilla Corporation 3/15/2011
How to use profile
•Use “–P” argument, on Windows platform, add this argument to shortcut, on Linux and Mac, use command line.
•Use two profiles at the same time, use “–no-remote” argument or add “MOZ-NO-REMOTE=1” to environment variable.
•Use “-console” to display console window.
Mozilla Corporation 3/15/2011
Developer preferences
•Make it easier for developer
•Type “about:config” at url bar
•extensions.logging.enable(true): show logging error in Error Console
•javascript.opitions.showInConsole(true):show JavaScript error in Error Console
•browser.dom.window.dump.enable(true):use “dump” function at dom context, and show information at console window
Mozilla Corporation 3/15/2011
Developer Extension
•DOM Inspector
•Console²
•Firebug
•Chrome Bug
•Rainbow
•XPCOM Viewer
•SQLite Manager
Mozilla Corporation 3/15/2011
The install manifest
•Tell Firefox about the extension(its name, versions, compatible Firefox versions, etc.)
•Written in RDF, an XML vocabulary.
•Must be at the top level of extension directory
•Must be called install.rdf
Mozilla Corporation 3/15/2011
The chrome regestration
•Tell Firefox about the location of source code files and resource files. Also tell Firefox how they add themselves to Firefox
•Must be at the top level of extension directory
•Must be called chrome.manifest
Mozilla Corporation 3/15/2011
Install your Extension
•Link file method for developer
•Create a text file inside the extensions/ sub directory of your develop profiles
•The name of the file must be the ID of your extension, no suffix!
•The content of the file must a single line specify the path of your extensions directory
D:\xxie\helloworld
/home/xxie/helloworld
Mozilla Corporation 3/15/2011
Show How to write an addon
•Write a XUL
•Write a JavaScript
•Include css file
•Include DTD file
•Include property file
Mozilla Corporation 3/15/2011
References• https
://developer.mozilla.org/en/Setting_up_extension_development_environment
• https://developer.mozilla.org
• https://wiki.mozilla.org
• http://mxr.mozilla.org
•https://addons.mozilla.org/en-US/developers
•http://www.google.com/
•https://developer.mozilla.org/en/JavaScript/Guide
