Creating a firefox plugin that highlights phone numbers in a
webpage and users can click on the highlighted numbers to make calls.
up development environment:
Close firefox if it is running already.
Create a new profile for development named as “dev” using profile
Profile Manager on Windows
Open windows start menu and choose run
option. Write “firefox -P” and Click OK.
Figure 1 Firefox User Profile Dialog
Choose create profile in
the dialog and follow the steps. Write name of the new Profile as "Dev"
Figure 2 Profile Wizard to create a new Profile
Profile manager on Mac
Open the Terminal (located under
/Applications/Utilities) and type in /Applications/ Firefox.app/
Contents/ MacOS/ firefox -profilemanager. Choose Create Profile in
the dialog and follow the steps.
Profile manager on Linux
Open a terminal, use CD to navigate to
your Firefox directory and then enter ./firefox -profilemanager.
Choose Create Profile in the dialog and follow the steps.
Configuration settings for firefox:
After creating the “Dev” profile,
Click Start Firefox to open firefox.Then enter about:config in the
address bar. It will warn you about changing settings, but it’s ok
since what you will do is only minor changes for development. You can
filter the existing settings, and if any of the below settings don’t
exist, you can just create them.
Point your firefox extensions
directory to your extension:
Instead of constantly preparing and reinstalling your extension,
there is a simple way to add a pointer from your firefox extensions
directory to your code location. To do this, you must first find your
profile directory. The profile directory is where you will find all
the settings for your Firefox profiles, including extension
Find profile directory on Windows
In Windows XP, open Explorer and go to C:\Documents and Settings\
[your user name]\ Application Data\Mozilla\Firefox\Profiles. In
Windows 7, go to C:\Users\ [your user name]\ AppData\Roaming.
Find profile directory on Mac
Open the Terminal and type in CD ~/Library/Application\
Support/Firefox/profiles/. There you will find your Firefox profiles,
and they will be named with letters and numbers, followed by a dot
(.) and then your profile name, e.g. 56a7bc8d.dev.
Find profile directory on Linux
Open a terminal and type in CD ~/.mozilla/. There you will find
all your Firefox profiles, and they will be named with letters and
numbers, followed by a dot (.) and then your profile name, e.g.
Pointing to an extension
In your development profile folder, you
will find a folder named extensions. In it, you will have code for
all your installed extensions. This will be empty if no extensions
installed on this profile. Instead of placing your code there, you
can create a pointer file. Do that by creating a file with a unique
name (this name have to be same as you chose for your em:id value in
install.rdf file – more on that below).
In the case of our example, create an
empty file named firstname.lastname@example.org, without any extension, and
in it just point it to where you will have your code, e.g.
C:\extensions\ (On Windows)
folder structure and files:
Create this folder structure in extensions directory to have a
good base for extension development.
Figure 3 Folder structure inside extensions directory
manifest is the file an Add-on Manager-enabled XUL application uses
to determine information about an add-on as it is being installed. It
contains metadata identifying the add-on, information about who
created it, which version of what applications it is compatible with,
how should be updated and so on. This file must be located at the top
level of an add-on's xpi file.
In the Description
This is where you add your own unique
developer id, this has to be same as pointer file that you created
name of the extension
current version of the extension
type=2 declares this as an extension.
Describes the extension functionality.
Will be shown in Tools → Add-ons
The URL of the extension icon.
This is actual id of the firefox.
Change it if you want to develop thunderbird or some other.
The minimum version of firefox required
to run this extension.
The maximum version of firefox required
to run this extension.
The chrome of firefox is everything
around the content window ie. web browser toolbar, menus, statusbar
etc. This file is key to how your extension will be added to firefox
and how it will work.
The path to where your extension
content files will be found.
Same as above, but when
contentaccessible=yes is added, It allows firefox 3 and later to
access the extension's files and show them in web browser (like with
in a webpage).
The path to which file you will use to
override web browser elements, and add items to the toolbar, menu and
skin c2cplugin classic/1.0
The path to where your extension's
images files and style sheets will be found.
This folder contains content and skin folders. Within content
folder, create three files browser.xul, highlightPhoneNumbers.js,
XUL stands for xml user interface language, developed by
Mozilla to create interfaces in Firefox, Thunderbird etc.
We will use this file to override the default look of the web
browser. We want to highlight phone numbers each time a new
page is loaded in browser. For this we need to create an overlay and
attach a script to highlight phone numbers. Creating overlay was done
in chrome.manifest file.
To attach a script use a script element.
Listing 1 Attaching script
Then added a button to the toolbar in firefox that shows
sametime icon in the toolbar.
Listing 2 Adding a button to the toolbar in firefox
<image src = "chrome://c2cplugin/skin/sut.png"/>
Here we discuss about script to highlight phone numbers. Attaching highlightPhoneNumbers.js script to the overlay element
will add a load event to appcontent (browser).
Listing 3 Code to load scripts when load event and DOMContentLoaded are fired
var appcontent = window.document.getElementById("appcontent");
appcontent.addEventListener("DOMContentLoaded", highlightNumbers, false);
document.addEventListener("load", loadHiddenElements, true)
appcontent is browser content.
when the initial DOM for the page is completely loaded ( that
fires DOMContentLoaded event), highlightNumbers function will be
When the page including images has first finished loading (that
fires Load event), loadHiddenElements function will be executed. that
means it loads call.js script and sut.css style sheet.
To highlight phone numbers, First a regular expression was made to
navigate webpages. XPATH was used as part of the document.evaluate
function. This is called with in an Xpath expression which looks for
all the valid text nodes. Evaluate function returns a set of text
nodes. Then each text node value was compared to the regular expressions. If a
suitable node was found, It will be replaced with a new span element.
Listing 4 Code to create span element and highlight phone number
sutPhone = window.content.document.createElement('sutPhone');
sutPhoneNumber = window.content.document.createTextNode('\u00A0\u00A0\u00A0\u00A0\u00A0' + match + '\u00A0');
sutPhone.setAttribute('onClick', 'makeCall(\'' + match + '\');');
A new element called sutPhone will be created and sutPhoneNumber
text node will be created and will be added as child to sutPhone.
SutPhone will be added as child to span element. Overall, PhoneNumber
will become bold and highlighted in the webpage and a phone icon will
be added at front of phone number.
when the user clicks on the highlighted number, makeCall function
will be called and number will be passed as an argument to it.
Listing 5 makeCall function code
image = new Image();
var number1 = number.replace("(0)", "").replace(/\s+/g, "").replace("+", "00");
var number1 = number.replace(/\s+/g, "").replace("+", "00");
// To make a call using SUT REST API.
// image.src = "https://<TAS host name>:9443/sutapi/stwebapi/call?userId=" + number1;
// To make a call using local sametime client.
image.src = "http://localhost:59449/stwebapi/call?number=" + number1;
image = null;
To format the number, remove all the spaces between digits in numbers. If a number
starts with '+' replace with “00” to make it callable.
For numbers like +353 (0) X
XXXXXXX, To make it callable, (0) need to be removed.
URL to make call from the locally installed sametime client. http://localhost:59449/stwebapi/call?number=number1
URL to To make a call using SUT REST API. https://:9443/sutapi/stwebapi/call?userId=number1
Firefox extensions are delivered like XPI files. These are just
like zip files. When you are finished with your extension, don not
zip the containing folder, just zip the contents and change the
extension to XPI.
Packaging with Windows
Select all the contents of your
extension folder, right-click and choose Send To → Compressed
(Zipped) Folder. Rename it to .xpi instead of .zip
Packaging with Mac
Open the Terminal, navigate to your extension with the CD command and then type in zip -r c2cplugin.xpi *
Packaging with Linux
Open the Terminal,get to your extension folder and type in zip -r c2cplugin.xpi *
Installing the Plugin
Unzip the contents to your desktop. Open c2cplugin.xpi from your firefox browser : File -> Open. This will install the extension for your firefox browser.
To uninstall the extension go to Tools -> add-ons -> Extensions.