Extension Firefox outils d'aide

Voici un petit Batch couplé avec 7Zip pour créer rapidement une extension.
(zip le repertoire et supprime l'extension ZIP)

Je l'ai nommé TOZIP.BAT
del projet
7z a -tzip tozip.zip .\tozip\*
rename tozip.zip projet

Le dossier de travail doit s'appeler TOZIP, et resort en PROJET.
il faut les fichiers suivant:
7Z.DLL,7Z.EXE,7ZCON.SFX,7-ZIP.DLL au meme niveau que le BAT

firefox extension [modifier clic droit AVEC ICONE]

Si vous vous êtes lancé dans la création d'extension firefox, voici une petite astuce pour les extension qui s'ajoutent au menu contextuel du clic droit: l'ajout d'une icone.




Ce qu'il vous faut, une icone (format PNG de taille 16x16 px)
et éditer votre fichier XUL ainsi:






<popup id="contentAreaContextMenu">
<menuitem id="monextension" label="monextension" class="menuitem-iconic" image="chrome://monextension/content/skin/icon.png" accesskey="L" insertafter="context-stop" oncommand="appel_fonction(event);"/>
</popup>



1°) l'ajout de class ="menuitem-iconic" pour définir qu'il faut ajouter une îcone
2°) le chemin de votre îcone

Rien de plus simple. Maintenant c'est à vous !!!!

Icone dans extension Firefox

Ajouter une icone dans les menus

dans le répertoire:
chrome
editer le fichier chrome.manifeste
ajouter cette ligne

skin  jakalascii   classic/1.0   chrome/skin/classic/
style   chrome://global/content/customizeToolbar.xul   chrome://<monextension>/skin/exemple.css

dans le repertoire:
chrome\content
Dans le fichier XUL (voir dans le clic droit: ici)
récupéré la valeur ID de la ligne concerné
(id="helloworld")
Coller en 2eme ligne le text suivant:

dans le repertoire:
chrome\skin\classic
-Collez votre îcone de 16x16 en PNG (de préférence)
-Créez un fichier exemple.css (exemple ou autre chose)

Remplissez le comme suit:

#helloworld {
 list-style-image: url("chrome://<nomdemonextension>/skin/<nomdemonicone>.png");
}

ou helloworld correspond à l'id trouvé précédement

JAKAL ASCII V0.2

Encore une victoire de Jakal !!!

Mise à jour de mon extension ! Correction des Bugs (Note à l'avenir, ne pas utiliser des fonctions avec le même nom qu'une autre extension)

Voila, je suis plutôt content du résultat, vu le temps que j'y ai passé pour trouver le bug !
Le graphisme et le cryptage en ascii n'est pas vraiment travaillé, mais je l'ajouterai dans ma version 0.3.

Je ne sortirai pas la version 0.2 du mode experimentale en dessous des 100 téléchargements, je suis à 5 ! J'ai le temps
https://addons.mozilla.org/fr/firefox/addon/13345

Update of my addons ! Bugs are correted (Note to futur: don't use function with same name as other addons)

Result make me happy, if I see time I past to find bug ! Design and encryption in Ascii are not worked but will be into version 0.3.

I don't extract version 0.2 from experimental mode under 100 downloads, Now I'm at 5 ! I have time.

Firefox [extension][Onload]

Etant donnée que l'appel d'évenement OnLoad n'existe pas pour les extensions Firefox, voici ce que j'ai trouvé pour le remplacer.

Dans un fichier *.JS qui sera appelé par un fichier XUL. Ajouter ceci :
window.addEventListener("load", hide, false);
ceci peux se traduir par : lors de l'évenement Load (chargement) executer la fonction HIDE() et retourne le code FALSE.

Je ne sais pas si False est necessaire, mais je le laisse pour l'instant.

Firefox Addon JAKAL Ascii 0.1

Voila mon travail, ma premiere extension firefox.
Pourquoi comment, à quoi ca sert ?

Jakal ~ Jackal = Chacal ~ Renard
Ascii, parce que on converti de l'ascii.
Je me suis librement inspiré de plusieurs addons existante. merci à pterodactl,helloworld, download rapidshare @ office, et tout les autres que j'aurai oublier.
J'utilise la fonction unescape() de javascript pour faire cela, donc rien de très méchant.
Elle m'aide juste quand j'ai des URL encodé en ascii pour avoir une URL utilisable.
Vu que j'entre dans l'univers du GNU, il faut que je fasse court pour traduire cette note en Anglais.

Je connais le problem pour afficher/cacher la barre lorsque "download rapidshare @ office" est installé, je vais travailler dessus pour le corriger dans une version 0.2

UK:
This is my work, my first firefox addon.
Why, how, why this ?
Jakal is like JACKAL like Fox.
Ascii to convert Ascii URL into right URL.
I am inspired by other addons.Thanks to pterodactl,helloworld, download rapidshare @ office, and the other I forget.
I use unescape() function from Javascript to do that, so it's not really difficult.
It help me when I have Encoded URL with Ascii character to have usefull URL.
Then I enter into GNU universe, I should write shortly to translate this message into English.

I know problem Hide/Show option don't work with with other addon "download rapidshare @ office". I will work on it to correct that into new version.

firefox extension [fonction heure]

Pour la fonction heure que je vous propose :
un fichier heure.JS :
function heure({ladate = new Date();document.getElementById("lheure").value = ladate.getDate()+"/"+(ladate.getMonth()+1)+"/"+ladate.getFullYear()+" "+(ladate.getHours()+1)+":"+ladate.getMinutes()+":"+ladate.getSeconds();setTimeout("heure()",1000);
Lors de l'appel de la fonction heure :
La date est introduite dans la variable "ladate"
Puis la balise avec l'ID "lheure" sera affecté de la valeur suivante:
getDate=jour du mois / getMonth=numero du mois (de 0 à 11, d'où le +1) / l'année sur 4 digit
getHours=l'heure en cours (de 0 à 23,d'où le +1): getMinutes=les minutes : GetSeconds=les secondes.
à la fin de la période de 1000 ms (soit chaque seconde) la fonction heure() est lancé.

Dans le fichier par exemple option.xul :
<dialog id="id_de_la_balise"
xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
onload="heure();">

Au chargement (On Load) de la balise, la fonction heure est appelé.

Puis on ajoute une balise avec l'ID heure pour que la fonction écrive son résultat :
<textbox id="lheure" />

firefox extention [titre pour page XUL]

Pour ajouter un titre à une page :
Dans le fichier XUL :

dans la balise
<dialog id="id_de_la_balise" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" title="Option of Jakal"></dialog>

l'argument title="" permet de mettre un titre à la page XUL, ici "Option of Jakal"

Firefox [lancer un logiciel]

Pour lancer un logiciel voilà ce que je propose :

Un fichier calculatrice.js contenant :
// Créer un nsILocalFile pour l'exécutable
var file = Components.classes["@mozilla.org/file/local;1"]
.createInstance(Components.interfaces.nsILocalFile);
file.initWithPath("C:\\WINNT\\system32\\calc.exe");

// Créer un nsIProcess
var process = Components.classes["@mozilla.org/process/util;1"]
.createInstance(Components.interfaces.nsIProcess);
process.init(file);

// Lancer le processus.
// Si le premier paramètre est true, l'appel du processus sera bloqué
// jusqu'à ce qu'il soit terminé.
// Les deuxième et troisième paramètres servent à passer des arguments
// en ligne de commande au processus.
var args = ["argument1", "argument2"];
process.run(false, args, args.length);



Pour lancer le script directement , ajouter dans votre fichier XUL
<script type="application/x-javascript" src="chrome://monextension/content/calculatrice.js">
juste après
<overlay id="monextension"
xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">

firefox extension [dans le menu outils]

Pour modifier le menu outils ,

éditer le fichier xul après le script :

<menupopup id="menu_ToolsPopup">
<menuitem insertafter="devToolsSeparator" label="Hello, world!"
accesskey="H" oncommand="hello();" />
</menupopup>

Dans le menu popup qui s'ouvre lorsqu'on clic sur Outils (tools)
On ajoute une option après DevToolsSeparator (ligne de separation après modules complémentaire) avec le nom "Hello, world"
la lettre H est souligné et la fonction "hello()" sera executer lorsqu'on clic dessus.

firefox extension [modifier clic droit]

Nous avons vu jusqu'a présent comment ajouter des informations à la barre de status (en bas), mais on peux aussi modifier le clic droit de la souris pour ajouter une option :

Dans le fichier xul, après script (cf javascript déporté)
<popup id="contentAreaContextMenu">
<menuitem id="helloworld" label="Hello, world!" accesskey="H"
insertafter="context-stop" oncommand="hello();"/>
</popup>


On va obtenir un joli "hello world" inséré juste après le "context-stop" (arreter)
qui aura l'action de lancer la fonction hello() du fichier monjavascript.js
avec la lettre "H" souligné.

Firefox Extension [javascript deporté]

On a déjà vu qu'on peut inclure du javascript (appel de base window.alert) dans le fichier xul.
Mais si on veux faire des choses plus complexe, on va vite saturer le code XUL avec du javascript délimité par des ";".

Premièrement on édite note fichier xul et on ajoute en dessous de cette ligne
<overlay id="sample"
xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
ca:
<script type="application/x-javascript" src="chrome://jakal/content/monjavascript.js"></script>

Pour lancer le javascript on le lance ainsi :
onclick="hello();"
ex:
<statusbarpanel id="my-panel" label="extension ok" onclick="hello();" />

On ajoute donc au niveau du fichier xul, un fichier "monjavascript.js" avec nos instructions (pour faire simple :
function hello(){
alert("Hello, world!");
}

On a plus qu'a recréer le fichier xpi, et tester !

Firefox Extension [image]

Pour ajouter une image dans un fichier XUL :
<image id="TTicon" style="list-style-image:url('chrome://jakal/content/jakalico.PNG');">

l'image s'appel jakalico.PNG

Firefox extension [language]

Pour changer la langue de l'extension en fonction de la version de firefox :

Où jakal est le nom de l'extension

-Dans le fichier chrome.manifest :(ajouter une ligne par nouvelle langue)
ex:
locale jakal fr-FR chrome/locale/fr-FR/
locale jakal en-UK chrome/locale/en-UK/
locale jakal en-US chrome/locale/en-US/


-dans le répertoire chrome, créer un répertoire locale
-dans le répertoire locale, créer un répertoire fr-FR
-dans le répertoire locale, créer un répertoire en-UK
-dans le répertoire locale, créer un répertoire en-US

- creer filename.dtd dans fr-FR :
- creer filename.dtd dans en-UK :
- creer filename.dtd dans en-US :
(En UTF-8 pour cela :fichier enregistrer encodage ANSI>UTF-8)
filename est un nom générique, on peut le changer, mais il doit avoir le même nom dans chaque répertoire.

coller ceci dans le fichier filename.dtd du repertoire fr-FR
<!ENTITY filename.languague "FR">

coller ceci dans le fichier filename.dtd du repertoire en-UK
<!ENTITY filename.languague "UK">

coller ceci dans fichier filename.dtd du le repertoire en-US
<!ENTITY filename.languague "US">


-dans le fichier xul utilisé:
juste après la ligne
<?xml version="1.0">,
ajouter
<!DOCTYPE window SYSTEM "chrome://jakal/locale/filename.dtd">

là où le texte sera different selon les langues utiliser comme suit:
<label id="testlangue" value="&filename.language;" />

où filename est le fichier filename.dtd

Firefox extension [bouton option]

Pour avoir un joli bouton OPTION et gerer son extension depuis cet endroit :
1°) Créer un fichier monextensionoption.xul dans /chrome/content/

<?xml version="1.0"?>
<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
<!DOCTYPE dialog SYSTEM "chrome://datepicker/locale/formats.dtd">

<dialog id="datepickerPrefs"
xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
buttons="accept"
ondialogaccept="window.close();"
title="&datepicker.formats.title;"
flex="1">

<vbox>
<text value="testions;"/>
<separator class="thin"/>
<grid flex="1">
<columns>
<column flex="1" style="margin-right:10px"/>
<column flex="4"/>
</columns>

</dialog>

2°) Editer son fichier Install.rdf et ajouter en dessous de la description par exemple:
<em:optionsurl>chrome://monextension/content/monextensionoption.xul<em:optionsurl>

3°) Refaire le package et hop un joli bouton option dans les details du module complémentaire !

Ajouter une icone à son extension Firefox

Pour ajouter une icone à son extension firefox voilà comment faire :
Ouvrir MSPAINT, Ctrl-E 32x32 pixel.
Dessiner son icone et sauvegarder sous l'extension PNG. (ex: jakal.png)

Editer son fichier install.rdf
ajouter la ligne
chrome://jakal/content/jakal.png
en dessous de la description par exemple.
Copier son fichier PNG dans /chrome/content/ repackager son extension !
Et puis voilà , c'est tout beau quand on va dans les modules complémentaires

Une petite info supplémentaire pour les extension. On peut par exemple ajouter du javascript avec la fonction onclick.

Dans le fichier xul (remplacer la ligne existante par) :
<statusbarpanel id="my-panel" label="1ere extension OK !" onclick="window.alert('test')"><br /></statusbarpanel>

En cliquant sur la note "1ere extension OK !" on a une fenetre qui s'affiche

Ma première extension Firefox

Afin de vous montrer que la création d'extension firefox n'est pas difficile, voici un exemple rapide.

Dans un repertoire vide :
-Creez 1 fichier : chrome.manifest et copiez ceci dedans :

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

-Creez 1 fichier: install.rdf et copiez ceci dedans :



<?xml version="1.0" encoding="iso-8859-15"?>
<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:name>jakal</em:name>
<em:version>0.1</em:version>
<em:id>{cafedeca-cafe-deca-cafe-decacafedeca}</em:id>
<em:type>2</em:type>
<em:description>ne sert a rien</em:description>

<em:targetApplication>
<!-- Firefox -->
<Description>
<em:id>{ec8030f7-c20a-464f-9b0e-13a3a9e97384}</em:id>
<em:minVersion>1.5</em:minVersion>
<em:maxVersion>3.0.*</em:maxVersion>
</Description>
</em:targetApplication>

<!-- Equipe de développement, contributeurs et traducteurs -->
<em:creator>tumador</em:creator>
<em:developer>tumador</em:developer>
<em:contributor>tumador</em:contributor>
<em:translator>nobody</em:translator>

<!-- Informations diverses -->
<em:homepageURL>http://www.google.com</em:homepageURL>
</Description>
</RDF>



!!! le ID cafedeca... peut désormais etre remplacé par quelqueschose@autrechose!!!

-Creez un repertoire chrome
-Dans le repertoire chrome, créez un repertoire content
-Dans le repertoire chrome\content créer un fichier monextension.xul
copiez ceci dans monextension.xul

<?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="1ere extension OK !"/>
</statusbar>
</overlay>




Selectionner le tout, envoyer vers , Fichier Compressé.
Renommer le fichier zip en XPI.

Vous pouvez désormais glisser ce fichier dans firefox pour l'installer, et redémarrer firefox.
Normalement, en bas à droite, vous devriez trouver le message suivant : 1ere extension OK !