Firefox Add-Ons

4 Types of Add-Ons

Themes

StylesheetsImages

LocalesTranslated strings

Plug-insNative code

ExtensionsNew or modified UI ElementsNew or modified behaviors

4 Types of Add-Ons

ThemesStylesheets

ImagesLocales

Translated stringsPlug-ins

Native codeExtensions

New or modified UI ElementsNew or modified behaviors

4 Types of Add-Ons

ThemesStylesheetsImages


Plug-insNative code


4 Types of Add-Ons


Locales

Translated stringsPlug-ins



4 Types of Add-Ons



Plug-insNative code


4 Types of Add-Ons



Plug-ins



4 Types of Add-Ons



Plug-insNative code


4 Types of Add-Ons



Plug-insNative code

Extensions


4 Types of Add-Ons



Plug-insNative code

ExtensionsNew or modified UI Elements

New or modified behaviors

4 Types of Add-Ons



Plug-insNative code


Add-ons Consist Of...

ZIP file

with .xpi extension

Add-ons Consist Of...

ZIP filewith .xpi extension

install.rdf

Identifier

<em:id>e4a8a97b-f2ed-450b-b12d-ee082ba24781</em:id><em:id>[email protected]</em:id>

Products can be installed in<em:targetApplication><Description><em:id>...

Min and Max Versions<em:minVersion>2.0</em:minVersion><em:maxVersion>2.0.*</em:maxVersion>

TypeOther metadata

install.rdf

Identifier<em:id>e4a8a97b-f2ed-450b-b12d-ee082ba24781</em:id>

<em:id>[email protected]</em:id>Products can be installed in

<em:targetApplication><Description><em:id>...Min and Max Versions

<em:minVersion>2.0</em:minVersion><em:maxVersion>2.0.*</em:maxVersion>

TypeOther metadata

install.rdf

Identifier<em:id>e4a8a97b-f2ed-450b-b12d-ee082ba24781</em:id><em:id>[email protected]</em:id>



TypeOther metadata

install.rdf


Products can be installed in

<em:targetApplication><Description><em:id>...Min and Max Versions


TypeOther metadata

install.rdf




TypeOther metadata

install.rdf



Min and Max Versions


TypeOther metadata

install.rdf




TypeOther metadata

install.rdf




Type

Other metadata

install.rdf




TypeOther metadata

chrome.manifest

Paths

chrome/contentTo chrome URLs

chrome:///superduper/content

chrome.manifest

Pathschrome/content

To chrome URLschrome:///superduper/content

chrome.manifest

Pathschrome/content

To chrome URLs

chrome:///superduper/content

chrome.manifest

Pathschrome/content

To chrome URLschrome:///superduper/content

Three Types of Chrome

Content

.xul

.jsSkin

.css

.pngLocale

.properties

.dtd


Content.xul

.jsSkin

.css

.pngLocale

.properties

.dtd


Content.xul.js

Skin.css.png

Locale.properties.dtd


Content.xul.js

Skin

.css

.pngLocale

.properties

.dtd


Content.xul.js

Skin.css

.pngLocale

.properties

.dtd


Content.xul.js

Skin.css.png



Content.xul.js

Skin.css.png

Locale

.properties

.dtd


Content.xul.js

Skin.css.png

Locale.properties

.dtd


Content.xul.js

Skin.css.png


For Skin...

chrome.manifest can have multiple entries

skin superduper default chrome/skin/default/skin superduper somepretty chrome/skin/somepretty/

maps one to...chrome://superduper/theme

For Skin...

chrome.manifest can have multiple entriesskin superduper default chrome/skin/default/

skin superduper somepretty chrome/skin/somepretty/maps one to...

chrome://superduper/theme

For Skin...

chrome.manifest can have multiple entriesskin superduper default chrome/skin/default/skin superduper somepretty chrome/skin/somepretty/


For Skin...


maps one to...

chrome://superduper/theme

For Skin...



For Locale...

chrome.manifest can have multiple entries

locale superduper en-US chrome/locale/en-US/locale superduper en-UK chrome/locale/en-UK/

maps one to...chrome://superduper/locale

For Locale...

chrome.manifest can have multiple entrieslocale superduper en-US chrome/locale/en-US/

locale superduper en-UK chrome/locale/en-UK/maps one to...

chrome://superduper/locale

For Locale...

chrome.manifest can have multiple entrieslocale superduper en-US chrome/locale/en-US/locale superduper en-UK chrome/locale/en-UK/


For Locale...


maps one to...

chrome://superduper/locale

For Locale...



.properties and .dtd

Both are key-value

.propertiesgreetz.0=Huzzah!used by JSbundle.getString("greetz")

.dtd<!ENTITY manage.label.grpIncluded "Included Pages">used by XML-things (HTML, XUL, etc.)&manage.label.grpIncluded;


Both are key-value.properties

greetz.0=Huzzah!used by JSbundle.getString("greetz")




greetz.0=Huzzah!

used by JSbundle.getString("greetz")




greetz.0=Huzzah!used by JS

bundle.getString("greetz").dtd

<!ENTITY manage.label.grpIncluded "Included Pages">used by XML-things (HTML, XUL, etc.)&manage.label.grpIncluded;








.dtd

<!ENTITY manage.label.grpIncluded "Included Pages">used by XML-things (HTML, XUL, etc.)&manage.label.grpIncluded;




.dtd<!ENTITY manage.label.grpIncluded "Included Pages">

used by XML-things (HTML, XUL, etc.)&manage.label.grpIncluded;




.dtd<!ENTITY manage.label.grpIncluded "Included Pages">used by XML-things (HTML, XUL, etc.)

&manage.label.grpIncluded;





XUL

XML for UIs

<hbox><button label="push me" /></hbox>

XUL

XML for UIs<hbox><button label="push me" /></hbox>

3 Types of XUL Documents

Window

DialogOverlay


WindowDialog

Overlay


WindowDialogOverlay

Overlays

Use id Attribute

<window>...<menu id="foo"><menuitem label="Hey" /><overlay>...<menu id="foo"><menuitem label="whoa" /><window>...<menu id="foo"><menuitem label="Hey"/><menuitem label="whoa" />

Overlays

Use id Attribute<window>...<menu id="foo"><menuitem label="Hey" />

<overlay>...<menu id="foo"><menuitem label="whoa" /><window>...<menu id="foo"><menuitem label="Hey"/><menuitem label="whoa" />

Overlays

Use id Attribute<window>...<menu id="foo"><menuitem label="Hey" /><overlay>...<menu id="foo"><menuitem label="whoa" />

<window>...<menu id="foo"><menuitem label="Hey"/><menuitem label="whoa" />

Overlays

Use id Attribute<window>...<menu id="foo"><menuitem label="Hey" /><overlay>...<menu id="foo"><menuitem label="whoa" /><window>...<menu id="foo"><menuitem label="Hey"/><menuitem label="whoa" />

What to Overlay?

chrome.manifest maps

overlay chrome://browser/content/browser.xulchrome://superduper/content/browser.xul

What to Overlay?

chrome.manifest mapsoverlay chrome://browser/content/browser.xulchrome://superduper/content/browser.xul

XPCOM

Inter-language

C++JSPython

Cross-PlatformWindows 9x to 7OS 10.0 to 10.6Linux, etc.

Object and Exception System

XPCOM

Inter-languageC++

JSPython



XPCOM

Inter-languageC++JS

PythonCross-Platform

Windows 9x to 7OS 10.0 to 10.6Linux, etc.


XPCOM

Inter-languageC++JSPython



XPCOM


Cross-Platform

Windows 9x to 7OS 10.0 to 10.6Linux, etc.


XPCOM


Cross-PlatformWindows 9x to 7

OS 10.0 to 10.6Linux, etc.


XPCOM


Cross-PlatformWindows 9x to 7OS 10.0 to 10.6

Linux, etc.


XPCOM




XPCOM




Components.classes

Classes

@mozilla.org/process/util;1.createInstance(interf)

[email protected]/network/io-service;1.getService()

Components.classes

[email protected]/process/util;1

.createInstance(interf)Services

@mozilla.org/network/io-service;1.getService()

Components.classes

[email protected]/process/util;1.createInstance(interf)


Components.classes


Services

@mozilla.org/network/io-service;1.getService()

Components.classes


[email protected]/network/io-service;1

.getService()

Components.classes



Components.interfaces

Interface definitions

attributesmethods

nsIFileleafNameisDirectory()


Interface definitionsattributes

methodsnsIFile

leafNameisDirectory()


Interface definitionsattributesmethods




nsIFile

leafNameisDirectory()



nsIFileleafName

isDirectory()




Where to Start?

Inspect

DOM InspectorChromebugChrome ListXPCOM Viewer

Read CodeMXR

Where to Start?

InspectDOM Inspector

ChromebugChrome ListXPCOM Viewer

Read CodeMXR

Where to Start?

InspectDOM InspectorChromebug

Chrome ListXPCOM Viewer

Read CodeMXR

Where to Start?

InspectDOM InspectorChromebugChrome List

XPCOM ViewerRead Code

MXR

Where to Start?

InspectDOM InspectorChromebugChrome ListXPCOM Viewer

Read CodeMXR

Where to Start?


Read Code

MXR

Where to Start?


Read CodeMXR

Technology

Firefox Add-Ons