IMPORTANT: Per accedir als fitxer de subversion: http://acacha.org/svn (sense password). Poc a poc s'aniran migrant els enllaços. Encara però funciona el subversion de la farga però no se sap fins quan... (usuari: prova i la paraula de pas 123456)

Desenvolupament d'extensions Firefox

De SergiTurWiki
Share/Save/Bookmark
(S'ha redirigit des de: Install.rdf)
Dreceres ràpides: navegació, cerca

Ontenir el codi font

Es pot obtenir dels repositoris FTP, per exemple la versió 4:

ftp://ftp.mozilla.org/pub/mozilla.org/firefox/releases/4.0/source/firefox-4.0.source.tar.bz2

O també tenen un CVS:

https://developer.mozilla.org/En/Developer_Guide/Source_Code/CVS

Es pot obtenir les diferents versións fent checkouts als tags CVS que corresponguin:

https://developer.mozilla.org/en/CVS_Tags

Eines per a desenvolupadors

Firefox AMO. Addons Mozilla Org

AMO són les inicials de Addons Mozilla Org, la web que podeu trobar a:

https://addons.mozilla.org/ca/firefox/

Pujar un addon a AMO

Desenvolupament d'extensions

Addonbuilder

Al omplir el formulari :

https://addons.mozilla.org/ca/developers/tools/builder/3beca77958d6eae5303572ad23a916e4

Us generarà un esquelet per al vostre plugin. Exemple d'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>asddas@dasdasdas</em:id>
   <em:type>2</em:type>
   <em:name>dsaasdas</em:name>
   <em:version>0.1</em:version>
   <em:creator>ad</em:creator>
   <em:contributor>asd</em:contributor>
   <em:description>dasdasdas</em:description>
   <em:targetApplication>
     <Description>
       <em:id>{ec8030f7-c20a-464f-9b0e-13a3a9e97384}</em:id> 
       <em:minVersion>6.0a1</em:minVersion>
       <em:maxVersion>6.0a1</em:maxVersion>
     </Description>
   </em:targetApplication>
 </Description>
</RDF>


IMPORTANT: També genera un application ID, és un UUID, generat a partir ID <em:id>asddas@dasdasdas</em:id>


Validador de complements

Hello world extension


Packages (paquets) xpi

Les extensions són empaquetades i distribuïdes en fitxers ZIP, aka Bundles amb la extensió XPI.

Un exemple del contingut habitual d'una extensió:

exampleExt.xpi:
             /icon.png
             /install.rdf                   
             /components/*  
             /components/cmdline.js                   
             /defaults/
             /defaults/preferences/*.js     
             /plugins/*                        
             /chrome.manifest                
             /chrome/icons/default/*       
             /chrome/
             /chrome/content/
            

On:

TODO

In the chrome/content directory, create a new empty text file called sample.xul.


Pàgina personal de desenvolupament

Fitxers

install.rdf

Recursos:

Executar un script durant la instal·lació o desinstal·Lació d'un plugin

TODO: No he acabat d'aconseguir-ho.

AddonListener:

XML-based User-interface Language (XUL)

XML-based User-interface Language o XUL és un llenguatge XML que permet definir interfícies gràfiques. Firefox utilitza XUL conjuntament amb Javascript.

NOTA: L'origen del nom sembla ser que ve de la pel·licula "Cazafantasmas": http://en.wikipedia.org/wiki/Chrome_Mozilla#The_name

Per tal de fer extensions de Firefox el que fem és modificar parts les a interfície gràfica afegint widgets. Per afegir un widget cal crear nous XML DOM elements i associar-les controladors d'esdeveniments (event handler).

El navegador és implementat a un fitxer anomenat browser.url que trobareu a:

$FIREFOX_INSTALL_DIR/chrome/browser.jar      a dins trobem content/browser/browser.xul

Per exemple al fitxer browser.xul podem trobar la barra d'estat (la que apareix a la part inferior de Firefox):

<statusbar id="status-bar">
 ... <statusbarpanel>s ...
</statusbar> 

<statusbar id="status-bar"> is a "merge point" for a XUL Overlay.

XUL Overlays

Permeten afegir widgets a un fitxer XUL en temps d'execució (run time). Tenen l'extensió .xul i especifiquen fragments a inserir en punt concrets d'un document XUL master. Els fragments poden ser inserits, eliminats, modificats...

Exemple:

<?xml version="1.0"?>
<overlay id="sample" 
         xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
 <statusbar id="status-bar">
  <statusbarpanel id="my-panel" label="Hello, World"  />
 </statusbar>
</overlay>

On:

  • <statusbar>: especifica el punt de modificació (merge point)
  • <statusbarpanel>: El nou widget que volem inserir

Per exemple en un plugin per a Firefox això es podria posar a:

chrome/content/sample.xul

Chrome URIs

Els fitxers XUL són part del que es coneix com Paquets Chrome ( Chrome Packages) que són agrupacions (bundles) de interfícies d'usuari XUL que són carregades utilitzant URIs de l'estil:

chrome:// 

En comptes de carregar aquests fitxers a:

file:// 

Com que cada Firefox està instal·lat en llocs diferents del sistema depenent de les versions, del sistema operatius o de altres fets, els desenvolupadors de Mozilla (Mozilla developers) es van inventar aquest sistema. Poseu:

chrome://browser/content/browser.xul

A la barra de les URL de Firefox!

Les URI de Chrome tenen els següents components:

TODO

  • Firstly, the URI scheme (chrome) which tells Firefox's networking library that this is a Chrome URI. It indicates that the content of the URI should be handled as a (chrome). Compare (chrome) to (http) which tells Firefox to treat the URI as a web page.
  • Secondly, a package name (in the example above, browser) which identifies the bundle of user interface components. This should be as unique to your application as possible to avoid collisions between extensions.
  • Thirdly, the type of data being requested. There are three types: content (XUL, JavaScript, XBL bindings, etc. that form the structure and behavior of an application UI), locale (DTD, .properties files etc that contain strings for the UI's localization), and skin (CSS and images that form the theme of the UI)
  • Finally, the path of a file to load.

So, chrome://foo/skin/bar.png loads the file bar.png from the foo theme's skin section.

When you load content using a Chrome URI, Firefox uses the Chrome Registry to translate these URIs into the actual source files on disk (or in JAR packages). Create a Chrome Manifest

For more information on Chrome Manifests and the properties they support, see the Chrome Manifest Reference.

Open the file called chrome.manifest that you created alongside the chrome directory at the root of your extension's source folder hierarchy.

Add in this code:

content sample chrome/content/

(Don't forget the trailing slash, "/"! Without it, the package won't be registered.)

This specifies the:

  1. type of material within a chrome package
  2. name of the chrome package (make sure you use all lowercase characters for the package name ("sample") as Firefox/Thunderbird doesn't support mixed/camel case in version 2 and earlier - bug 132183 )
  3. location of the chrome packages' files

So, this line says that for a chrome package sample, we can find its content files at the location chrome/content which is a path relative to the location of chrome.manifest.

Note that content, locale and skin files must be kept inside folders called content, locale and skin within your chrome subdirectory.

Save the file. When you launch Firefox with your extension, (later in this tutorial), this will register the chrome package. Register an Overlay

You need Firefox to merge your overlay with the browser window whenever it displays one. So add this line to your chrome.manifest file:

overlay chrome://browser/content/browser.xul chrome://sample/content/sample.xul

This tells Firefox to merge sample.xul into browser.xul when browser.xul loads.

Depurar

Extensió Console2

Millora la consola d'erros. Un cop instal·lat el addon el trobareu a:

Eines > Consola d'errors

Es recomanable tenir la següent configuració de Firefox a la pàgina about:config:

javascript.options.showInConsole = true
nglayout.debug.disable_xul_cache = true
browser.dom.window.dump.enabled = true

Per depurar plugins cal executar Firefox amb:

$ firefox -console

Al codi per mostrar missatges per la consola podeu utilitzar la funció següent (la heu de definir):

 function log(msg)
 {
   consoleService.logStringMessage(msg);
 }

Crear un instal·lador de Firefox a mida

Consulteu Crear_un_instal·lador_de_Firefox_a_mida

TODO

TODO

/*
 * Edit this file and copy it as userChrome.css into your
 * profile-directory/chrome/
 */

/*
 * This file can be used to customize the look of Mozilla's user interface
 * You should consider using !important on rules which you want to
 * override default settings.
 */

/*
 * Do not remove the @namespace line -- it's required for correct functioning
 */
@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); /* set default namespace to XUL */


/*
 * Some possible accessibility enhancements:
 */
/*
 * Make all the default font sizes 20 pt:
 *
 * * {
 *   font-size: 20pt !important
 * }
 */
/*
 * Make menu items in particular 15 pt instead of the default size:
 *
 * menupopup > * {
 *   font-size: 15pt !important
 * }
 */
/*
 * Give the Location (URL) Bar a fixed-width font
 *
 * #urlbar {
 *    font-family: monospace !important;
 * }
 */

/*
 * For more examples see http://www.mozilla.org/unix/customizing.html
 */



Vegeu també

Enllaços externs