Toutes les informations dont on pourrait avoir besoin se trouvent au developer center de Mozilla. Voici un tutoriel simple pour commencer.

Arborescence

Un package xpi contient 3 choses :
un fichier chrome.manifest, un fichier install.rdf et un dossier chrome

Creer le manifeste d’installation

C’est le fichier install.rdf.
Voici son contenu :

<?xml version="1.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>absurdsystem@gmail.com</em:id>
  <em:name>Absurdsystem Blog Toolbar</em:name>
  <em:version>0.1</em:version>
  <em:iconURL>chrome://absurdsystemtoolbar/skin/logo.png</em:iconURL>
  <em:targetApplication>
  <Description>
  <em:id>{ec8030f7-c20a-464f-9b0e-13a3a9e97384}</em:id>
  <em:minVersion>1.5</em:minVersion>
  <em:maxVersion>3.*.*</em:maxVersion>
  </Description>
  </em:targetApplication>

 <em:creator>Absurdsystem</em:creator>
  <em:description>Toolbar</em:description>
  <em:homepageURL>http://www.absurdsystem.com/</em:homepageURL>
  </Description>

</RDF>

Rien de difficile. Reportez vous au tutoriel que j’ai cité avant pour savoir comment remplir ce fichier.
Juste un point sur lequel je vais revenir : l’id de l’application.
Jusqu’ici j’utilisais toujours le même numéro mais d’après mes tests cela peut créer des erreurs.
Le plus simple est de générer un nouveau code pour chaque extension que vous ferrez.
Il y a un générateur à cette adresse GuidGen.com

Creer un fichier chrome.manifest

Son contenu :

content absurdsystemtoolbar jar:chrome/absurdsystemtoolbar.jar!/content/
overlay chrome://browser/content/browser.xul chrome://absurdsystemtoolbar/content/absurdsystemtoolbar.xul
skin absurdsystemtoolbar classic/1.0 jar:chrome/absurdsystemtoolbar.jar!/skin/

Les explications sont là.
En simplifiant, ce fichier sert à definir les différents chemins de votre package xpi.
« content » par exemple est pour les fichiers xul ainsi que js.
« skin » sera pour les images et le css

Contenu du dossier chrome

Dans ma barre d’outils ce dossier contient un seul fichier .jar, qui lui même est une archive de 2 dossiers, à savoir content et skin.
Apparemment rien n’oblige à utiliser une archive .jar mais comme je n’ai pas testé sans, on fera avec.

Mon dossier « skin » contient les différentes icônes qui seront dans ma barre d’outils.
Le dossier « content » contient un fichier xul et un js.
Le js est un fichier javascript classique qui contient une simple fonction mais j’y reviendrais plus tard.

Les overlays XUL

Le fichier xul est celui qui va vous permettre de créer votre barre d’outils.
C’est dans celui ci que l’on défini les différents boutons que l’on veut etc.

Voici son contenu :

<?xml version="1.0"?>
<overlay id="absurdsystemtoolbar-overlay"
xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
<script type="application/x-javascript"
src="chrome://absurdsystemtoolbar/content/absurdsystemtoolbar.js" />
<toolbox id="navigator-toolbox">
<toolbar id="absurdsystemtoolbar-toolbar" context="toolbar-context-menu"
accesskey="a" class="chromeclass-toolbar"
toolbarname="Absurdsystem Blog Toolbar" hidden="false" persist="hidden">

<!-- Home -->
<toolbarbutton  label="Absurdsystem Blog"
 id="absurdsystemtoolbar-button-home"
image="chrome://absurdsystemtoolbar/skin/logo.png"
onclick="absurdsystem_loadurl('http://www.absurdsystem.com/index.php',event);"
tooltiptext="Absurdsystem.com " />
<!-- <toolbarseparator /> -->

<!-- Twitter -->
<toolbarbutton label="Twitter" id="absurdsystemtoolbar-button-twitter"
accesskey="t" image="chrome://absurdsystemtoolbar/skin/twitter.png"
onclick="absurdsystem_loadurl('http://twitter.com/absurdsystem',event);"
tooltiptext="Suivez moi sur Twitter!" />

</toolbar>
</toolbox>
</overlay>

Pour vous aider : Ici et là.

Ce que moi j’ai fait c’est une toolbar avec 2 boutons (index du site et Twitter).
Il n’y a pas que des boutons standards. On peut aussi faire des listes déroulantes, des champs de recherches…
Par contre il faut fouiller le site de Mozilla pour trouver l’information que l’on recherche.

J’y ai aussi intégrer un fichier js car lors du développement de ma barre, j’ai constaté que les boutons s’ouvraient dans la même fenêtre/onglet (en temps normal j’utilise ma molette pour ouvrir un nouvel onglet). J’ai donc « récupéré » une fonction permettant de gérer le clic molette. Voila pourquoi un fichier js est présent mais on peut s’en passer.

Une dernière chose. Attention lorsque vous créez Le fichier jar ou xpi.
Moi qui utilise winrar je me suis fait avoir plusieurs fois.
Vous devez créer une archive zip. Par défaut winrar fait des extensions rar (normal me direz vous ^^)

Voila j’espère avoir à peu près bien expliqué.
N’hésitez pas à me contacter si vous avez besoin d’aide.
Pour finir voici ma barre d’outils.
Vous pouvez analyser son code facilement, j’y ai laissé quelques commentaires.
Téléchargez d’autres barres d’outils pour comprendre leur fonctionnement et découvrir de nouveaux boutons, fonctions etc.

Tout d’abord un peu de documentation.
Pour CKEditor et FCKEditor.

Vous constaterez qu’il n’y a pas de différences dans le choix des différents outils.
Pour l’instant nous allons créer les outils, nous verrons ensuite la mise en place de la barre d’outils.

Creation des outils

Un peu d’explication.
Chaque outils s’écrit entre guillemets ‘ ‘.
Les outils peuvent être organisés par section, il suffit pour cela de les placer entre crochets  » [ ] « .

['Source']

Dans les sections vous pouvez séparer les outils par un tiret  » – « .

['Source','-','DocProps']

Vous pouvez aussi organiser les outils par ligne en utilisant le signe  » /  »

['Source','-','DocProps'], '/', ['Bold','Italic']

Voila vous avez tout pour faire votre propre barre d’outils.
Pour connaitre les différents outils disponibles, inspirez vous des barres d’outils « Full » pour CKEditor et « Default » pour FCKEditor.
Elles contiennent tous les outils disponibles.

Mise en place

Pour FCKEditor tout se passe dans le fichier fckconfig.js.
Recherchez les lignes concernant les barres d’outils ( FCKConfig.ToolbarSets…)
Vous trouverez les 2 barres existantes, à savoir la « Basic » et la « Default ».

Rajoutez par exemple à la suite :

FCKConfig.ToolbarSets["MyToolbar"] = [ ['Bold','Underline'],'/',
['Cut','Copy','Paste'],'/',['Image','Flash','Smiley'],'/',['About']];

Ici ma barre d’outils se nomme « MyToolbar ».

Votre barre est maintenant définie, il ne reste plus qu’à y faire appel en spécifiant bien le bon nom ( ici « MyToolbar »).
(Voir article de configuration )

Voir l’exemple

Pour CKEditor c’est la même chose. Le code de la barre est identique.
Il faut maintenant définir votre barre dans CKEditor.
Pour cela, ouvrez le fichier de configuration (config.js) qui se trouve dans le dossier de CKEditor.

Voici le code de la barre :

config.toolbar = 'MyToolbar';

    config.toolbar_MyToolbar =
    [
        ['Bold','Underline'],'/',
	['Cut','Copy','Paste'],'/',
	['Image','Flash','Smiley'],'/',
	['About']
    ];

Maintenant il faut l’appeller dans votre fichier avec le bon nom ( ici « MyToolbar »).
(Voir article de configuration )
Voir l’exemple

A venir

Utilitaire pour la création de la barre d’outils

Toujours en faisant le parallèle entre CKEditor 3.0 et FCKEditor 2.6.5 nous allons maintenant configurer tout ça.

Pour CKeditor le fichier de configuration se trouve dans le dossier source et se nomme config.js
Pour FCKEditor c’est le fichier fckconfig.js

Parametrage de la langue

Pour CKEditor il suffit de décommenter la ligne suivante : // config.language = ‘fr’;
Pour FCKEDitor cherchez la ligne FCKConfig.DefaultLanguage et mettez en paramètre ‘fr’

Barre d’outils de base

Pour CKEditor tout se passe dans le fichier dans lequel vous « créez » l’éditeur (Voir l’installation).
Plutôt que d’écrire CKEDITOR.replace( ‘editor1′ ); il suffit de faire ceci :

CKEDITOR.replace( 'editor1',
    {
        toolbar : 'Basic',
        uiColor : '#9AB8F3'
    });

Voir l’exemple

Basic étant le nom de la barre d’outils. Il existe aussi la barre ‘Full’ qui elle affichera tout les boutons possibles.

Pour FCKEditor les barres d’outils standards sont définies dans le fichier fckconfig.js.
Vers la ligne 100 vous verrez une ligne de ce type :

FCKConfig.ToolbarSets["Default"] = [ ...

« Default » est le nom d’une barre d’outils. Un peu plus bas il y a aussi la barre « Basic ».
Pour faire appel à l’une ou à l’autre il suffit d’écrire:

$oFCKeditor->ToolbarSet = 'Basic' ;

Voir l’exemple

Voila pour les barres d’outils existantes dans CK/FCKeditor.

A venir

Customisation de la barre d’outils

Avant de commencer jettez un œil à la documentation
Tout y est expliqué mais pour ceux qui ne sont pas fan de l’anglais cela peut être compliqué.
Un excellent moyen de comprendre la structure et le fonctionnement d’un plugin est d’analyser le code de l’un d’entre eux.
Cela vous apportera suffisamment de base pour créer des plugins assez évolués.

La base d’un plugin

Les premières lignes de code d’un plugin sont les informations. Ces informations sont nécessaires pour que votre plugin soit reconnu par wordpress.
Elles se présentent comme ceci :

/*
Plugin Name: absurd_firstplugin
Plugin URI: http://www.absurdsystem.com
Description: Mon premier plugin
Version: 1.0 Beta
Author: Absurdsystem
Author URI: http://www.absurdsystem.com
*/

Voici une capture pour mieux comprendre à quoi cela correspond :

Avec ces informations, votre plugin sera reconnu et vous pourrez l’activer. Bien sur il ne fera rien.

Nous allons maintenant écrire une fonction simple. Elle se contentera d’afficher une simple phrase.

Fonction

function absurd_init() {
echo "Mon premier plugin";
}

Voila votre fonction est prête. Il suffit maintenant d’activer votre plugin.
Lorsque vous ferez appel à votre fonction elle sera reconnu par wordpress.
Faite appel à votre fonction ou bon vous semble. Dans votre sidebar par exemple. Ce n’est qu’un simple test.
Écrivez simplement :

absurd_init();

Vous devez maintenant voir apparaitre « Mon premier plugin » quelque part dans votre sidebar.

C’est bien beau tout ca mais comment lui appliquer un style ?

C’est tres simple.
Modifier d’abord votre fonction qui affiche votre phrase en lui appliquant une classe css:

function absurd_init() {
echo '<div class="css">Mon premier plugin</div>';
}

Créez ensuite une autre fonction qui affiche du css.

function absurd_css() {
echo '<style type="text/css">
.css{ color:#da5931;}
</style>';
}

C’est fait et pourtant ça ne change rien…

C’est vrai cela ne change rien. Car il faut encore indiquer à wordpress d’interpréter cette fonction.
Cela se fait à l’aide de Hooks.
Il en existe des centaines. J’y reviendrai dans un prochain article.

Dans notre cas nous avons besoin que la fonction qui va afficher notre code css soit dans les balises head de notre site.
Il suffit d’écrire:

add_filter('wp_head', 'absurd_css');

Par cette ligne de code wordpress va exécuter notre fonction absurd_css à l’endroit ou se trouve wp_head.
Wp_head est aussi un hook, mais est utilisé dans les thèmes.

Voici une capture de mon fichier header.php de mon thème

C’est par cette « fonction » que wordpress va ajouter le code généré par la fonction « absurd_css ».

Actualiser votre page et vous verrez maintenant la phrase « Mon premier plugin » avec une couleur différente.
Afficher la source de la page et vous verrez que notre code css a été rajouté dans les balises head.

Pour récapituler voici l’ensemble du code vu jusqu’ici.

/*
  Plugin Name: absurd_firstplugin
  Plugin URI: http://www.absurdsystem.com
  Description: Mon premier plugin
  Version: 1.0 Beta
  Author: Absurdsystem
  Author URI: http://www.absurdsystem.com
*/

function absurd_init() {
  echo '<div class="css">Mon premier plugin</div>';
  }

function absurd_css() {
  echo '<style type="text/css">.css{ color:#da5931;}</style>';
  }

add_filter('wp_head', 'absurd_css');

Mise en place

CKEditor 3.0

Dans le head de votre page vous appelez le fichier ckeditor.js:

<form action="sample_posteddata.php" method="post">
<textarea cols="80" id="editor1" name="editor1" rows="10"></textarea>
<script type="text/javascript">
CKEDITOR.replace( 'editor1' );
</script>
<input type="submit" value="Submit"/>
</form>

include("../sources/fckeditor/fckeditor.php") ;

<form action="sample_posteddata.php" method="post" target="_blank">
<?php
$sBasePath = $_SERVER['PHP_SELF'] ;
$sBasePath = '../sources/fckeditor/' ;
$oFCKeditor = new FCKeditor('FCKeditor1') ;
$oFCKeditor->BasePath	= $sBasePath ;
$oFCKeditor->Width = '600';
$oFCKeditor->Value		= 'Votre texte ici' ;
$oFCKeditor->Create() ;
?>
<input type="submit" value="Submit">
</form>

echo $_POST['editor1'];

• Pour la démo c’est ici
• Le téléchargement c’est la
• Et la documentation

Beaucoup de changement par rapport à la dernière version de FCKeditor ( 2.6.5).
Je suis d’ailleurs moi même un peu perdu car maintenant tout se gère via Javascript.
Je ferais bientôt des aides en faisant le parallèle entre CKEditor 3.0 et FCKEditor 2.6.5.