SlideShare a Scribd company logo
An Introduction to
XPConnect
Writing Extensions in Pure JavaScript

Anant Narayanan
Malaviya National Institute of Technology
FOSS.IN 2007
Why is Firefox
successful?
Apart from the fact that it is Open Source
EXTENSIONS
No other browser provides such a feature-rich extensible
development environment
Community
• There is a thriving community behind
extension development

• There are extensions to help you do every

imaginable task with web pages (Firefox) and
email (Thunderbird)

• Powered by the Mozilla platform
Contribution
• Writing extensions is one of the easiest and
most useful ways of contributing to Mozilla

• You just have to scratch your own itch, or

come up with an idea for your extension

• We’ll look into the technical aspect of
developing your extension in this
presentation
Overview
• XPCOM & why it is useful
• XPConnect & why it is useful
• How XPConnect packs punch into Javascript
• How you can develop your very own
extension in pure Javascript in a matter of
hours
(You need to know basic JavaScript)
XPCOM
• Cross Platform Component Object Model
• Provides a framework for writing crossplatform, modular software

• Provides the abstraction required to write
applications that will run on the Mozilla
platform across the variety of operating
systems that Mozilla supports
Components
• Core: Type System, Data Structures, Streams
• UI: Clipboard, Drag-and-Drop, XUL
• Application: Preferences, Profiles, WM
• Network: Channels, Protocol Handlers
• DOM, Mail and several others
• You can even create you own!
Interface Description
• Language neutral way to specify interfaces to
the XPCOM components

• The Interface Definition Language used by
Mozilla (IDL) is slightly different than the
conventional ones

• XPCOM initially meant to be used in C++
XPConnect
• Allows scriptability of XPCOM components
• Simple interoperation between XPCOM and
languages like Javascript, Perl and Python

• Allows transparent access and manipulation

of XPCOM objects via the XPIDL definitions
Javascript & XPConnect
• Javascript run in the Mozilla environment will
have access to all XPCOM components

• Caveat: Only those components that have

interfaces defined in XPIDL will be available

• Developing extensions is breeze, assuming
you already know Javascript

• JS is considerably easier than C++!
Development Tools
• Best way to work with Javascript is Firefox
• Plugins that you will find helpful:
• Console
• Extension Developer
• Firebug
• jsLib
• XPCOMViewer
2
Let’s Get Started
Skeleton of an
Extension
• Every extension is made up of a set of base
files and directory

• This hierarchy is zipped to create your .xpi
re-distributable extension
Visit the Wizard
• Don’t waste time in creating these base files
and directories

• Get your skeleton at
• http://ted.mielczarek.org/code/mozilla/
extensionwiz/

• Will generate a zip file containing the base
extension code
The Code
• All the JavaScript code goes into the
components/ directory

• Put all your other resources - HTML, Images
et. al. in content/

• This content will be available as
chrome://<name>/content/
Power Javascript
• Think of Javascript as a language
• All XPCOM components are available as
regular Javascript OBJECTS
The Lifecycle of an
XPConnect Object
• Every component is uniquely identified by a
Contract ID

• Usually something like:
•
•

@mozilla.org/network/simple-uri;1
@mozilla.org/consoleservice;1
Instantiating a
Component
• Usually, you will just call the getService

method on the component class passing an
interface along

• Components.classes[“@mozilla.org/
moz/jssubscript-loader;1].
getService(Components.interfaces.
mozIJSSubScriptLoader);
Code Snippets
Logging

function jsLog(msg, error) {
var consoleService = Components.classes
["@mozilla.org/consoleservice;1"].getService
(Components.interfaces.nsIConsoleService);
if (error) {
consoleService.logStringError(msg);
} else {
consoleService.logStringMessage(msg);
}
}
Loading other JS files
into a given Object
function jsImport(obj, fName) {
var loader = Components.classes
["@mozilla.org/moz/jssubscript-loader;
1"].getService
(Components.interfaces.mozIJSSubScriptLoader);
loader.loadSubScript
("file://"+__LOCATION__.parent.path+"/"+fName,
obj);
}
Some Theory
• Mozilla introduces the Components object
into the Global JS Namespace

• Components.classes
• Components.interfaces
• Components.results
• etc...
Preventing Clashes
• Since everything Javascript is in the global
namespace...

• ... you need to protect your code by
wrapping them suitably into objects

• Remember, multiple extensions may run on a
single Mozilla instance, and they all share the
namespace
Resources
• Use the XPCOMViewer for offline ready
documentation on the various scriptable
XPCOM components available to you

• eg: Ever felt the need for sockets in
Javascript?

@mozilla.org/network/sockettransport-service;1
Resources (Contd.)
• A lot of repetitive tasks and frequently used
components in Javascript are available as
friendly JS objects via jsLib

• Disadvantage: If your code uses jsLib, it

becomes a pre-requisite for your extension

• Mozilla normally doesn’t allow

dependencies between extensions, but it’s
Ok in this case
Resources (Contd.)
• Run XPConnect powered code in Firebug to
get instantaneous results (kind of like
working in the python interpreter)

• Firebug also will give you helpful error

messages when something goes wrong. Use
the Logger to segregate different types of
messages and view them in Console2
Resources (Contd.)
• Visit XULPlanet for comprehensive online
documentation on XPCOM scriptable
components:

• http://www.xulplanet.com/references/
xpcomref/

• Every serious JS programmer must visit:
• http://javascript.crockford.com/
Questions?
Thank You!
Feel free to contact me:
<anant@kix.in>
http://www.kix.in/
The Web9 Project implements a new protocol handler
entirely in Javascript:
http://code.kix.in/projects/web9

More Related Content

PPTX
Bccon use notes objects in memory and other useful
PPTX
Let's server your Data
PPTX
Introducing CrossWorlds for IBM Domino
PPTX
Cross platform dotnet development using dotnet core
PPTX
Docker introduction
PPTX
An XPager's Guide to Process Server-Side Jobs on Domino
PDF
Social Connections 2015 CrossWorlds and Domino
PDF
IBM ConnectED 2015 - BP106 From XPages Hero To OSGi Guru: Taking The Scary Ou...
Bccon use notes objects in memory and other useful
Let's server your Data
Introducing CrossWorlds for IBM Domino
Cross platform dotnet development using dotnet core
Docker introduction
An XPager's Guide to Process Server-Side Jobs on Domino
Social Connections 2015 CrossWorlds and Domino
IBM ConnectED 2015 - BP106 From XPages Hero To OSGi Guru: Taking The Scary Ou...

What's hot (20)

PPTX
Evolution of .NET Framework and Features of different versions
PDF
Dr. Strangelove, or how I learned to love plugin development
PPTX
docker : how to deploy Digital Experience in a container drinking a cup of co...
PDF
IBM Think Session 8598 Domino and JavaScript Development MasterClass
PPTX
Bootstrapping a simple enterprise application with Java EE successor, Jakarta...
PPTX
Docker for .NET Developers
PPTX
Let me introduce you: DOTS
PPTX
.Net platform .Net core fundamentals
PDF
.Net standard 2.0
PDF
Servlets made easy. 
Write once and run everywhere.
PPTX
BP207 - Meet the Java Application Server You Already Own – IBM Domino
KEY
MozTW Jetpack Workshop: Taipei
PDF
Jetpack SDK: The new possibility of the extensions on browser
PPTX
Docker Workshop
PDF
MozTW Jetpack Workshop: Taichung
PDF
Find your data - use GraphDB capabilities in XPages applications - and beyond
PPTX
Java Class 2
PPTX
Overview of the new .NET Core and .NET Platform Standard
PDF
What's New in NetBeans IDE 7.x
PDF
Extending NetBeans IDE
Evolution of .NET Framework and Features of different versions
Dr. Strangelove, or how I learned to love plugin development
docker : how to deploy Digital Experience in a container drinking a cup of co...
IBM Think Session 8598 Domino and JavaScript Development MasterClass
Bootstrapping a simple enterprise application with Java EE successor, Jakarta...
Docker for .NET Developers
Let me introduce you: DOTS
.Net platform .Net core fundamentals
.Net standard 2.0
Servlets made easy. 
Write once and run everywhere.
BP207 - Meet the Java Application Server You Already Own – IBM Domino
MozTW Jetpack Workshop: Taipei
Jetpack SDK: The new possibility of the extensions on browser
Docker Workshop
MozTW Jetpack Workshop: Taichung
Find your data - use GraphDB capabilities in XPages applications - and beyond
Java Class 2
Overview of the new .NET Core and .NET Platform Standard
What's New in NetBeans IDE 7.x
Extending NetBeans IDE
Ad

Viewers also liked (7)

PPT
From OCaml To Javascript At Skydeck
PPT
Mozilla Full Text Search
PDF
A Study of SVG-based Application Development @ OSDC 2010
PDF
Your First Xulrunner-based application
PDF
ずーるらんなー
PPTX
Pcom xpcom
PDF
Rich Desktop Applications
From OCaml To Javascript At Skydeck
Mozilla Full Text Search
A Study of SVG-based Application Development @ OSDC 2010
Your First Xulrunner-based application
ずーるらんなー
Pcom xpcom
Rich Desktop Applications
Ad

Similar to Introduction to XPConnect (20)

PDF
Firefox Architecture Overview
PPTX
Firefox (in)Security
PDF
Firefox extension Development
PPT
Plug-in Architectures
PPTX
Firefox security (prasanna)
PPTX
Extension Javascript
PPTX
HungryFox - Firefox Extension Workshop
PDF
backend
PDF
backend
PDF
Getting started with add ons
PPTX
jQuery - the world's most popular java script library comes to XPages
PDF
Exploiting Firefox Extensions
PDF
jQuery: The World's Most Popular JavaScript Library Comes to XPages
PDF
jQuery Comes to XPages
PDF
AbusingExploitingAndPWN-ingWithFirefoxAdd-Ons
PDF
Mozilla Firefox Extension Development, Course 1: Basic
ODP
Brief Introduction to the Mozilla Add-on SDK
PPTX
Firefox addons
PDF
Abusing, Exploiting and Pwning with Firefox Add-ons
PPT
ExtJs Basic Part-1
Firefox Architecture Overview
Firefox (in)Security
Firefox extension Development
Plug-in Architectures
Firefox security (prasanna)
Extension Javascript
HungryFox - Firefox Extension Workshop
backend
backend
Getting started with add ons
jQuery - the world's most popular java script library comes to XPages
Exploiting Firefox Extensions
jQuery: The World's Most Popular JavaScript Library Comes to XPages
jQuery Comes to XPages
AbusingExploitingAndPWN-ingWithFirefoxAdd-Ons
Mozilla Firefox Extension Development, Course 1: Basic
Brief Introduction to the Mozilla Add-on SDK
Firefox addons
Abusing, Exploiting and Pwning with Firefox Add-ons
ExtJs Basic Part-1

More from Anant Narayanan (20)

PDF
Enterprise Scale Knowledge Graphs
PDF
Building an Intelligent Assistant
PDF
WebRTC: A Practical Introduction
PDF
Message Passing vs. Data Synchronization
PDF
Firebase: Tales from the Trenches
PDF
WebRTC: An Overview
PDF
Error Handling in WebRTC
PDF
WebRTC Demystified
PDF
WebRTC: User Security & Privacy
PDF
Next Generation Browser Add-Ons
PDF
An Overview of Distributed Debugging
PDF
A Brief Incursion into Botnet Detection
PDF
Mozilla Weave: Integrating Services into the Browser
PDF
about:labs
PDF
Distributed File Systems: An Overview
PDF
Innovating with Mozilla Labs
PDF
Glendix: The Why and the How
PDF
Mozilla Prism
PDF
Making Gentoo Tick
Enterprise Scale Knowledge Graphs
Building an Intelligent Assistant
WebRTC: A Practical Introduction
Message Passing vs. Data Synchronization
Firebase: Tales from the Trenches
WebRTC: An Overview
Error Handling in WebRTC
WebRTC Demystified
WebRTC: User Security & Privacy
Next Generation Browser Add-Ons
An Overview of Distributed Debugging
A Brief Incursion into Botnet Detection
Mozilla Weave: Integrating Services into the Browser
about:labs
Distributed File Systems: An Overview
Innovating with Mozilla Labs
Glendix: The Why and the How
Mozilla Prism
Making Gentoo Tick

Recently uploaded (20)

PDF
Mobile App Security Testing_ A Comprehensive Guide.pdf
PDF
Agricultural_Statistics_at_a_Glance_2022_0.pdf
PDF
Machine learning based COVID-19 study performance prediction
PPTX
sap open course for s4hana steps from ECC to s4
PDF
Unlocking AI with Model Context Protocol (MCP)
PPTX
VMware vSphere Foundation How to Sell Presentation-Ver1.4-2-14-2024.pptx
PDF
Blue Purple Modern Animated Computer Science Presentation.pdf.pdf
PPTX
Cloud computing and distributed systems.
PDF
KodekX | Application Modernization Development
PDF
Review of recent advances in non-invasive hemoglobin estimation
PDF
Encapsulation theory and applications.pdf
PPTX
ACSFv1EN-58255 AWS Academy Cloud Security Foundations.pptx
PDF
MIND Revenue Release Quarter 2 2025 Press Release
PDF
Network Security Unit 5.pdf for BCA BBA.
PPTX
Understanding_Digital_Forensics_Presentation.pptx
PDF
Chapter 3 Spatial Domain Image Processing.pdf
PDF
Diabetes mellitus diagnosis method based random forest with bat algorithm
PDF
Peak of Data & AI Encore- AI for Metadata and Smarter Workflows
PPTX
Spectroscopy.pptx food analysis technology
PDF
Architecting across the Boundaries of two Complex Domains - Healthcare & Tech...
Mobile App Security Testing_ A Comprehensive Guide.pdf
Agricultural_Statistics_at_a_Glance_2022_0.pdf
Machine learning based COVID-19 study performance prediction
sap open course for s4hana steps from ECC to s4
Unlocking AI with Model Context Protocol (MCP)
VMware vSphere Foundation How to Sell Presentation-Ver1.4-2-14-2024.pptx
Blue Purple Modern Animated Computer Science Presentation.pdf.pdf
Cloud computing and distributed systems.
KodekX | Application Modernization Development
Review of recent advances in non-invasive hemoglobin estimation
Encapsulation theory and applications.pdf
ACSFv1EN-58255 AWS Academy Cloud Security Foundations.pptx
MIND Revenue Release Quarter 2 2025 Press Release
Network Security Unit 5.pdf for BCA BBA.
Understanding_Digital_Forensics_Presentation.pptx
Chapter 3 Spatial Domain Image Processing.pdf
Diabetes mellitus diagnosis method based random forest with bat algorithm
Peak of Data & AI Encore- AI for Metadata and Smarter Workflows
Spectroscopy.pptx food analysis technology
Architecting across the Boundaries of two Complex Domains - Healthcare & Tech...

Introduction to XPConnect

  • 1. An Introduction to XPConnect Writing Extensions in Pure JavaScript Anant Narayanan Malaviya National Institute of Technology FOSS.IN 2007
  • 2. Why is Firefox successful? Apart from the fact that it is Open Source EXTENSIONS No other browser provides such a feature-rich extensible development environment
  • 3. Community • There is a thriving community behind extension development • There are extensions to help you do every imaginable task with web pages (Firefox) and email (Thunderbird) • Powered by the Mozilla platform
  • 4. Contribution • Writing extensions is one of the easiest and most useful ways of contributing to Mozilla • You just have to scratch your own itch, or come up with an idea for your extension • We’ll look into the technical aspect of developing your extension in this presentation
  • 5. Overview • XPCOM & why it is useful • XPConnect & why it is useful • How XPConnect packs punch into Javascript • How you can develop your very own extension in pure Javascript in a matter of hours (You need to know basic JavaScript)
  • 6. XPCOM • Cross Platform Component Object Model • Provides a framework for writing crossplatform, modular software • Provides the abstraction required to write applications that will run on the Mozilla platform across the variety of operating systems that Mozilla supports
  • 7. Components • Core: Type System, Data Structures, Streams • UI: Clipboard, Drag-and-Drop, XUL • Application: Preferences, Profiles, WM • Network: Channels, Protocol Handlers • DOM, Mail and several others • You can even create you own!
  • 8. Interface Description • Language neutral way to specify interfaces to the XPCOM components • The Interface Definition Language used by Mozilla (IDL) is slightly different than the conventional ones • XPCOM initially meant to be used in C++
  • 9. XPConnect • Allows scriptability of XPCOM components • Simple interoperation between XPCOM and languages like Javascript, Perl and Python • Allows transparent access and manipulation of XPCOM objects via the XPIDL definitions
  • 10. Javascript & XPConnect • Javascript run in the Mozilla environment will have access to all XPCOM components • Caveat: Only those components that have interfaces defined in XPIDL will be available • Developing extensions is breeze, assuming you already know Javascript • JS is considerably easier than C++!
  • 11. Development Tools • Best way to work with Javascript is Firefox • Plugins that you will find helpful: • Console • Extension Developer • Firebug • jsLib • XPCOMViewer 2
  • 13. Skeleton of an Extension • Every extension is made up of a set of base files and directory • This hierarchy is zipped to create your .xpi re-distributable extension
  • 14. Visit the Wizard • Don’t waste time in creating these base files and directories • Get your skeleton at • http://ted.mielczarek.org/code/mozilla/ extensionwiz/ • Will generate a zip file containing the base extension code
  • 15. The Code • All the JavaScript code goes into the components/ directory • Put all your other resources - HTML, Images et. al. in content/ • This content will be available as chrome://<name>/content/
  • 16. Power Javascript • Think of Javascript as a language • All XPCOM components are available as regular Javascript OBJECTS
  • 17. The Lifecycle of an XPConnect Object • Every component is uniquely identified by a Contract ID • Usually something like: • • @mozilla.org/network/simple-uri;1 @mozilla.org/consoleservice;1
  • 18. Instantiating a Component • Usually, you will just call the getService method on the component class passing an interface along • Components.classes[“@mozilla.org/ moz/jssubscript-loader;1]. getService(Components.interfaces. mozIJSSubScriptLoader);
  • 20. Logging function jsLog(msg, error) { var consoleService = Components.classes ["@mozilla.org/consoleservice;1"].getService (Components.interfaces.nsIConsoleService); if (error) { consoleService.logStringError(msg); } else { consoleService.logStringMessage(msg); } }
  • 21. Loading other JS files into a given Object function jsImport(obj, fName) { var loader = Components.classes ["@mozilla.org/moz/jssubscript-loader; 1"].getService (Components.interfaces.mozIJSSubScriptLoader); loader.loadSubScript ("file://"+__LOCATION__.parent.path+"/"+fName, obj); }
  • 22. Some Theory • Mozilla introduces the Components object into the Global JS Namespace • Components.classes • Components.interfaces • Components.results • etc...
  • 23. Preventing Clashes • Since everything Javascript is in the global namespace... • ... you need to protect your code by wrapping them suitably into objects • Remember, multiple extensions may run on a single Mozilla instance, and they all share the namespace
  • 24. Resources • Use the XPCOMViewer for offline ready documentation on the various scriptable XPCOM components available to you • eg: Ever felt the need for sockets in Javascript? @mozilla.org/network/sockettransport-service;1
  • 25. Resources (Contd.) • A lot of repetitive tasks and frequently used components in Javascript are available as friendly JS objects via jsLib • Disadvantage: If your code uses jsLib, it becomes a pre-requisite for your extension • Mozilla normally doesn’t allow dependencies between extensions, but it’s Ok in this case
  • 26. Resources (Contd.) • Run XPConnect powered code in Firebug to get instantaneous results (kind of like working in the python interpreter) • Firebug also will give you helpful error messages when something goes wrong. Use the Logger to segregate different types of messages and view them in Console2
  • 27. Resources (Contd.) • Visit XULPlanet for comprehensive online documentation on XPCOM scriptable components: • http://www.xulplanet.com/references/ xpcomref/ • Every serious JS programmer must visit: • http://javascript.crockford.com/
  • 28. Questions? Thank You! Feel free to contact me: <anant@kix.in> http://www.kix.in/ The Web9 Project implements a new protocol handler entirely in Javascript: http://code.kix.in/projects/web9