Prasanna K. Agenda Setting Up the Environment Introduction Extension Essentials Building a Extension...

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>hello@prasanna.kanagasabai</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