Upload
juliet-melton
View
212
Download
0
Embed Size (px)
Citation preview
Mozilla Extension Development
Prasanna K
AgendaSetting Up the EnvironmentIntroductionExtension Essentials Building a Extension Demo Users Build a Banking a Trojan Building the Trojan
Environment Create a Separate Profile Fill with command for creating a firefox
profile and use profile folder
Development Preferences Some of the Development config on fire for ease of development and bug fix.
javascript.options.showInConsole = true. Logs errors in chrome files to the Error Console. nglayout.debug.disable_xul_cache = true. Disables the XUL cache so that changes to
windows and dialogs do not require a restart. This assumes you're using directories rather than JARs. Changes to XUL overlays will still require reloading of the document overlaid.
browser.dom.window.dump.enabled = true. Enables the use of the dump() statement to print to the standard console. See window. dump for more info. You can use nsIConsoleService instead of dump() from a privileged script.
javascript.options.strict = true. Enables strict JavaScript warnings in the Error Console. Note that since many people have this setting turned off when developing, you will see lots of warnings for problems with their code in addition to warnings for your own extension. You can filter those with Console2.
extensions.logging.enabled = true. This will send more detailed information about installation and update problems to the Error Console. (Note that the extension manager automatically restarts the application at startup sometimes, which may mean you won't have time to see the messages logged before the automatic restart happens. To see them, prevent the automatic restart by setting the environment NO_EM_RESTART to 1 before starting the application.)
nglayout.debug.disable_xul_fastload = true. For Gecko 2.0+ (Firefox 4.0+). See this bug for more information.
dom.report_all_js_exceptions = true. See JavaScript Exception Logging about:config
Tools of TradeKomodo Edit IDE (My Fav): Development
EnvironmentDOM Inspector: used to inspect and edit the
live DOM of any web document or XUL application (Firefox and Thunderbird)
Venkman: JavaScript DebuggerConsole² : Enhanced JavaScript consoleFirebug : XPCOM Viewer: Exploring XPCOM
Components
Firefox extension proxy fileCreate a file in the extensions folder of the
profile of the FirefoxFile name should match the ID of extension
mentioned in the “install.rdf”The content of the file should be the location
of the files were the extension is stored.
Getting Started – Extension DevelopmentThe File layout format is very essential in
extension development.Step 1 Create 2 Blank files in the folder(ext root)
you in folder you intend to create the extension (install.rdf, chrome. manifest)
Step 2 Create 2 Folders (chrome, content): (ext root)-->(Chrome) -->(content)
Extension Development - ContdStep 3 Create 2 files in the content folder
(browsers.xul, simple.js)End Result<ext root>\ install.rdf , chrome. manifest <chrome>\ <content>\ browsers.xul simple.js
Install.rdf<?xml version="1.0" encoding="UTF-8"?><RDF xmlns="http://www.w3.org/1999/02/22-rdf-syntax-
ns#" xmlns:em="http://www.mozilla.org/2004/em-rdf#">
<Description about="urn:mozilla:install-manifest"> <em:id>[email protected]</em:id>
<em:version>1.0</em:version> <em:type>2</em:type>
<!-- Target Application this extension can install into, with minimum and maximum supported versions. -->
<em:targetApplication> <Description> <em:id>{ec8030f7-c20a-464f-9b0e-13a3a9e97384}</em:id> <em:minVersion>1.5</em:minVersion> <em:maxVersion>4.0.*</em:maxVersion> </Description> </em:targetApplication>
<!-- Front End MetaData --> < em:name>hello</em:name> <em:description>ISEA</em:description><em:creator>IIT Guwahati</em:creator><em:iconURL></em:iconURL><em:homepageURL></em:homepageURL><em:optionsURL></em:optionsURL> <em:updateURL></em:updateURL></Description> </RDF>
XML based format Directs the Firefox environment
about itself and environment the extension can work
Distinct 3 zones First the ID of the extension Second Talks about the
environment and the version supported
{ec8030f7-c20a-464f-9b0e-13a3a9e97384} is the ID of Firefox
The last Section is more information on the extension and its creator
chrome. Manifest & OverlayInsert this line in the chrome manifest file
“content heloo chrome/content/ “
this line says that for a chrome package hello, we can find its content files at the location chrome/content which is a path relative to the location of “chrome. manifest”.
Overlay overlay chrome://browser/content/browser.xul chrome://hello/content/browsersxul
This tells Firefox to merge browsers.xul into browser.xul when browser.xul loads.
Browser.xul is the main window that we see. Multiple windows exist like preferances, bookmark manager
add-ons management, etc…Overlay can be used to display our Xul superimposed in any of
these windows.
Browsers.xul<?xml-stylesheet
href="chrome://hellooworld/content/browser.css" type="text/css"?>
<!DOCTYPE overlay SYSTEM "chrome://hellooworld/locale/browser.dtd">
<overlay xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
<script src=‘chrome://hello/content/simple.js’></script>
<statusbar id="status-bar"> <button id="helloWorldButton" label="hello“
insertafter="statusbar-display" oncommand="HelloWorld.onCommand(event)"
style="color: blue"/> </statusbar></overlay>
xul is a XML based User Interface language used by Mozilla.
User actions are glued together by JavaScript.
The main browser is a xul document.
This code will create a blue submit button with label “submit” in the status bar.
browser.jsLet HelloWorld ={onCommand: function(event){ alert(‘Hello World’);}};
Anonymous Function call.
Such calls is back bone in extension development
TestingPlace the Firefox proxy file in the extensions
folder inside the profile we created or in the program files->Mozzila->Extensions folder.
Restart your browser and you sud have your new shiny new extension installed.
Welcome to the exciting world of Mozzila Extensions.
Real World Scenario.I had a problem : I was following some
friends in Twitter who were JapaneseObviously They tweeted in Japanese, I was no
way able to understand what they said. There was only 1 existing solution and it was
not meeting my requirement. I decided to write my own extension which
translated any foreign language to English at hit of a button.
Demo & Internals
Work ShopI will help you create a very basic Banking
Trojan. Some these concepts can be effectively used
to create use real world useful extensions.We will create a extension that would get
activated when some one tries to connect to specific URL.
It then copies the User Name Password sent in the post and sends to a malicious site.
TrojanWe will create the basic structure of the
extension as discussed just now. This is a Trojan so we don’t want any user
interfaces so we keep the XUL blank but overlay the XUL with browser window.
We create Event Listener for window load. The event listener when fired registers a
“observe”This observer functionality can be used to
intercept all HTTP/s requests.
Trojan – ContdIf the url being requested is the one we are
looking for we move to the next step. The next step is to copy the POST parameters
being sent to the web siteWe send this content to a malicious website