Firefox extensions (Notes)

Here are Firefox extensions (Notes) : overview and an empty add-on to use as starting-point (download).

#0 Keywords / overview

-) chrome (isn’t the google  browser but it is referred to Mozilla) : is the set of UI elements of Firefox or of an extension (making up the user interface … buttons,texts box,…)

-) XUL (XML User Interface Language) : it is multi-platform description language for UI. The same Firefox UI is described using XUL.

Example :
  <button id="yes1" label="Yes"/>

Add-on can extend (with XUL overlay) the UI of firefox.

-) xpi (pronounced “zippy”) : file extension for an add-on (and really it is a zippy file)

-) XPCOM (Cross Platform Component Object Model) : it is like CORBA or Microsoft COM. XPCOM is used in order to acess to object written in different language like c++. Interface of object is described in XPIDL (like IDL)

-) chrome.manifest : provides mappings from package names (== name of the add-on) to the physical location of packages on the disk.
For example if manifest contains:
content packagename folder1/folder2/foder3/file
you can access to file with url (typing it in firefox url bar):
chrome://packagename/content/file

-) install.rdf : is a file which contains meta-information related to add-on
https://developer.mozilla.org/it/docs/Install.rdf

-) Development extensions : there are a lot of add-on for developer…
https://developer.mozilla.org/en/docs/Setting_up_extension_development_environment#Development_extensions

-) chrome:// … (url schema) :
Might be useful have a look to other URL with schema chrome://…
here : http://kb.mozillazine.org/Dev_:_Firefox_Chrome_URLs

#1 Setting up develop environment

Details here :
https://developer.mozilla.org/en/docs/Setting_up_extension_development_environment

It is better to separate your usual Firefox “user profile” from developer profile. In fact, probably, you’ll install several add-on for developing that you won’t to see in your “user profile”.

You can run two instances of Firefox at the same time by using separate profiles and starting the FireFox with the -no-remote parameter :
On Mac OSx :

/Applications/Firefox.app/Contents/MacOS/firefox-bin -no-remote -P DEVELOPER &

Where DEVELOPER is the name of profile that we are going to use… if it doesn’t exist then the following pop-up will be showed.

Firefox extensions
Firefox extensions (list of profiles)

With “Create Profile” you can create a Developer profile.

Firefox extensions
Firefox extensions (create profile DEVELOPER)

On your new “Developer” profile you have to do some “tuning” of Firefox settings (about:config) :
>) you can follow here
.. or
>) simply use this add-on (install it in your developer profile and not in your “user profile”)
https://addons.mozilla.org/en-US/firefox/addon/developer-profile/
(This extension has no interface and it works on Firefox settings)

Note : in this step is showed directory profile (/Users/busycrack/… as showed in above picture). You’ll need it later.

#2 Create stuff which represent your extension

add-on extension is a .xpi file and it is a normal zip file.
xpi package contains several files that are described here (https://developer.mozilla.org/en-US/docs/Bundles)
Structure of .xpi file :

 <where-your-want>/busylog/
 /install.rdf
 /chrome.manifest
 /chrome/
 /chrome/content/

(you can downlod  a zip with this structure)

Firefox extensions
Firefox extensions: folders (Fig.1)

So the steps in order to build folders set-up are:
2.0) cd <where-your-want>
2.1) mkdir busylog
2.2) cd busylog/
2.3) here you can create manually folders showed in Fig.1 or download and unzip this empty add-on

So path for you add-on is now: <where-your-want>/busylog/

#3 edit : install.rdf

install.rdf Is a file which contains meta-information related to extension.
It contains metadata identifying the add-on, providing information about who has created it, compatibility information , if run bootstrap…
(more info : https://developer.mozilla.org/en-US/docs/Install_Manifests)

<?xml version="1.0" encoding="utf-8"?>
  <!-- This Source Code Form is subject to the terms of the Mozilla Public
  - License, v. 2.0. If a copy of the MPL was not distributed with this
  - file, You can obtain one at http://mozilla.org/MPL/2.0/. --><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>giovanni760079a0@0800200c9a66busylog.net</em:id>
  <em:version>initial</em:version>
  <em:type>2</em:type>
  <em:bootstrap>false</em:bootstrap>
  <em:unpack>false</em:unpack>

<!-- Firefox -->
 <em:targetApplication>
 <Description>
 <em:id>{ec8030f7-c20a-464f-9b0e-13a3a9e97384}</em:id>
 <em:minVersion>19.0</em:minVersion>
 <em:maxVersion>99</em:maxVersion>
 </Description>
 </em:targetApplication>

<!-- Front End MetaData -->
  <em:name>BusyLog</em:name>
  <em:description>Just a simple example</em:description>
  <em:creator>busycrack</em:creator>
  <em:homepageURL>https://busylog.net/</em:homepageURL>
  </Description>
  </RDF>

With color RED parts that you can change.

<em:id>giovanni760079a0@0800200c9a66busylog.net</em:id> : is like an email address but not real. It has to be unique (I used part of UID just to avoid to attract spammer)
In order to generate ID you can use on-line resource :
http://www.famkruithof.net/uuid/uuidgen
Note :
<em:id>{ec8030f7-c20a-464f-9b0e-13a3a9e97384}</em:id> -> is ID of Firefox add-on application don’t change it

#4 Manifest : chrome.manifest

Mozilla locates and reads the root chrome.manifest file for extensions and themes. In the manifest are registered the resources files (physically on disk) such as overlay, style… all resources will be used in your code.
(more info : https://developer.mozilla.org/en-US/docs/Install_Manifests)

chrome.manifest :

content busylog chrome/content/
overlay chrome://browser/content/browser.xul chrome://busylog/content/busylog.xul
style chrome://global/content/customizeToolbar.xul chrome://busylog/content/busylog.css

#5 Extend Mozilla UI with XUL

(https://developer.mozilla.org/en-US/docs/XUL)
(https://developer.mozilla.org/en-US/docs/XUL_Overlays)

XUL (XML User Interface Language) is multi-platform description language for UI.
Firefox UI is described  with XUL using file browser.xul.
In order to find where is located the file browser.xul you can :
1. type “chrome://browser/content/browser.xul” in url bar
2. select with mouse (right click) “View Page Source” … and look the location in viewer

Screen Shot 2016-03-14 at 21.35.05
Firefox extensions (browser.xui)

On MAC browser.xul file is located :
/Applications/Firefox.app/Contents/MacOS/browser/omni.ja
(to see the file content : unzip -l omni.ja)

Overlay XUL
If you want to extend browser UI you need to extend browser.xul file using your xul file named “Overlay XUL”.
“Overlay XUL” is a XUL file that is attached at run time to main browser.xul in order to extend Firefox UI.
(think to “Overlay XUL” like a run-time patch to apply on browser.xul)

How attach your “Overlay XUL” to “Other XUL” is specified in Chrome Manifest.

<?xml version="1.0"?>
<?xml-stylesheet href="chrome://busylog/content/busylog.css" type="text/css"?>
<overlay id="busylog"
 xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">

<toolbarpalette id="BrowserToolbarPalette">
  <toolbarbutton id="busylog-button" />
</toolbarpalette>

<toolbar id="nav-bar">
  <toolbarbutton id="busylog-button" />
</toolbar>

<toolbarbutton id="busylog-button" class="toolbarbutton-1 chromeclass-toolbar-additional"
 label="Cookies" tooltiptext="Cookies Manager"
 oncommand="window.open('chrome://browser/content/preferences/cookies.xul', 'Cookies Manager (busylog.net)', 'height=600,width=450,menubar=no,location=no,titlebar=yes,resizable=yes,scrollbars=yes,status=no');"/>
</overlay>

#6 Test

Download the zip with *empty add-on* here : download
Unzip : <where-your-want>/busylog/

#6.1 Open foder profile

cd /Users/giovanni/Library/Application Support/Firefox/Profiles/e4cztlb4.Developer/extensions/
(if folder “extensions” isn’t present you have to create it)

You should see profile path when you created profile Developer before (DEVELOPER in #1 above).
A simple way to find&open this path is to install :
https://addons.mozilla.org/en-US/firefox/addon/open-profile-folder/
(more info : http://kb.mozillazine.org/Profile_folder )

#6.2 vi “giovanni760079a0@0800200c9a66busylog.net”

Create so a new file … do you remember :
<em:id>giovanni760079a0@0800200c9a66busylog.net</em:id>
in install.rdf in #3 above?

#6.3 Insert il this file the path to your extension :
<where-your-want>/busylog/
#6.4 restart

Could be useful starting to use cmd line :

 /Applications/Firefox.app/Contents/MacOS/firefox-bin -no-remote -P Developer &

So you can see log messages (useful for debug and understand why PL is not loaded) …example:

extensions giovanni$ *** LOG addons.xpi: startup
 *** LOG addons.xpi: Skipping unavailable install location app-system-share
 *** LOG addons.xpi: checkForChanges
 *** LOG addons.xpi-utils: Opening database
 *** LOG addons.xpi: New add-on giovanni760079a0@0800200c9a66busylog.net installed in app-profile
 *** WARN addons.xpi: Add-on is invalid: Error: Incorrect id in install manifest
 *** LOG addons.xpi: No changes found
#6.5 some check

Resource of your add-on can be addressed using :
chrome://<add-on-name>/path
   Example :
   chrome://busylog/content/busylog.xul

This are “remapped” on real path:
<where-your-want>/busylog/

#7 Package

cd <where-your-want>/busylog/
(note that you have to change dir into busylog and don’t compress at cd <where-your-want>)
zip -r busylog.xpi *

Posts