Comment créer et ajouter un bouton dans la barre d'outils de navigation de Firefox [Guide]

Aujourd'hui, nous apportons un guide Firefox quin'importe qui peut suivre pour créer un bouton personnalisé dans la barre d'outils de navigation. En plus des boutons visibles dans la barre d'outils de navigation, il existe une liste d'autres boutons ayant différentes fonctionnalités fournis dans Firefox qui peuvent être ajoutés n'importe où sur la barre d'outils et peuvent être personnalisés en fonction de vos besoins. Étant donné que la position et le comportement du bouton peuvent être modifiés sans nécessiter de connaissances supplémentaires, on peut facilement créer une nouvelle extension qui se comporte comme indiqué, se trouve dans une position définie, tout en étant hautement personnalisable. Cet article explique comment créer une extension simple - un bouton de barre d'outils qui fournira une fonctionnalité simple.

Pour commencer, vous devez d'abord savoir des extensions dossier (celui qui réside dans le dossier Profils Firefox). Les utilisateurs de Windows 7 et Windows Vista trouveront ce dossier ici;

Cependant, si vous utilisez Windows XP, saisissez %Données d'application% dans la console Windows Run et appuyez sur Entrée.

Une fois la des extensions est ouvert, créez un nouveau dossier avec le nom de [email protected] init.

Ouvrez le dossier nouvellement créé et créez un nouveau répertoire, à savoir chrome, avec deux fichiers - chrome.manifest et install.rdf. Nous allons maintenant éditer ces fichiers dans l'éditeur de texte, nous comptons sur vous pour utiliser n'importe quel éditeur prenant en charge utf-8, comme - le bloc-notes intégré de Windows.

Tout d'abord, ouvrez chrome.manifest fichier et insérer les lignes de code init suivantes. Le code ci-dessous est également fonctionnel pour les fenêtres de messagerie, de composition et de carnet d'adresses de Thunderbird et pour Sunbird. Cependant, si vous devez utiliser le bouton uniquement dans Firefox, les lignes de code pour Thunderbird et Sunbird peuvent être exclues.

content custombutton chrome/
style chrome://global/content/customizeToolbar.xul chrome://custombutton/content/button.css
# Firefox
overlay    chrome://browser/content/browser.xul chrome://custombutton/content/button.xul
# Thunderbird mail
overlay    chrome://messenger/content/messenger.xul chrome://custombutton/content/button.xul
# Thunderbird compose
overlay    chrome://messenger/content/messengercompose/messengercompose.xul chrome://custombutton/content/button.xul
# Thunderbird address book
overlay    chrome://messenger/content/addressbook/addressbook.xul chrome://custombutton/content/button.xul
# Sunbird
overlay    chrome://calendar/content/calendar.xul chrome://custombutton/content/button.xul

Une fois le code inséré dans le fichier, fermez-le après avoir enregistré les modifications. Maintenant éditez install.rdf fichier, vous devez insérer les lignes de code suivantesen elle. Vous pouvez modifier la description générale du bouton, du texte peut être ajouté aux 6, 7 et 8èmes lignes du code (doit être placé entre guillemets), vous pouvez entrer le nom du bouton, le texte descriptif et le nom du créateur.

<?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:name="AT"
em:description="AddictiveTips"
em:creator="Usman"
em:id="[email protected]"
em:version="1.0"
em:homepageURL="http://developer.mozilla.org/en/docs/Custom_Toolbar_Button"
em:iconURL="chrome://custombutton/content/icon.jpg" >
<em:targetApplication><!-- Firefox -->
<Description
em:id="{ec8030f7-c20a-464f-9b0e-13a3a9e97384}"
em:minVersion="1.4"
em:maxVersion="99" />
</em:targetApplication>
<em:targetApplication><!-- Thunderbird -->
<Description
em:id="{3550f703-e582-4d05-9a08-453d09bdfdc6}"
em:minVersion="1.4"
em:maxVersion="99" />
</em:targetApplication>
<em:targetApplication><!-- Sunbird -->
<Description
em:id="{718e30fb-e89b-41dd-9da7-e25a45638b28}"
em:minVersion="0.2.9"
em:maxVersion="99" />
</em:targetApplication>
<em:file>
<Description
about="urn:mozilla:extension:custombutton"
em:package="content/custombutton/" />
</em:file>
</Description>
</RDF>

Une fois que vous avez modifié la description, enregistrez les modifications et fermez le fichier. N'oubliez pas le dossier nouvellement créé (chrome), où nous allons créer 3 fichiers et insérer 2 images. Créez d'abord 3 fichiers ayant les noms suivants;

• button.css
• button.xul
• button.js

Maintenant, nous allons appliquer un style au bouton, làn'est pas quelque chose de complexe ici, nous allons simplement appliquer un style de base sur la conception du bouton (définir les dimensions de l'image et l'effet de survol sur le bouton). Si vous êtes familier avec la conception d'un fichier CSS (feuille de style en cascade), la modification des valeurs et des effets sera un jeu d'enfant, cependant, si vous entendez son nom pour la toute première fois, insérez simplement les lignes de code de style suivantes dans button.css fichier, une fois terminé, enregistrez les modifications et fermez-le.

#custom-button-1,
#wrapper-custom-button-1
{list-style-image: url("chrome://custombutton/content/button-1.jpg");}
/* common style for all custom buttons */
.custombutton                    {-moz-image-region: rect( 0px 24px 24px  0px);}
.custombutton:hover       {-moz-image-region: rect(24px 24px 48px  0px);}
[iconsize="small"] .custombutton
{-moz-image-region: rect( 0px 40px 16px 24px);}
[iconsize="small"] .custombutton:hover
{-moz-image-region: rect(24px 40px 40px 24px);}

Maintenant, ouvrez le button.xul fichier dans un éditeur de texte et insérez les lignes suivantesde code. N'oubliez pas que nous fournissons également du code pour Thunderbird et Sunbird. Si vous suivez ce guide uniquement pour Firefox, vous pouvez exclure les lignes liées à Thunderbird et Sunbird.

<?xml version="1.0" encoding="utf-8"?>
<?xml-stylesheet type="text/css"
href="chrome://custombutton/content/button.css"?>
<!DOCTYPE overlay >
<overlay id="custombutton-overlay"
xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
<script type="application/javascript"
src="chrome://custombutton/content/button.js"/>
<!-- Firefox -->
<toolbarpalette id="BrowserToolbarPalette">
<toolbarbutton id="custom-button-1"/>
</toolbarpalette>
<!-- Thunderbird mail -->
<toolbarpalette id="MailToolbarPalette">
<toolbarbutton id="custom-button-1"/>
</toolbarpalette>
<!-- Thunderbird compose -->
<toolbarpalette id="MsgComposeToolbarPalette">
<toolbarbutton id="custom-button-1"/>
</toolbarpalette>
<!-- Thunderbird address book -->
<toolbarpalette id="AddressBookToolbarPalette">
<toolbarbutton id="custom-button-1"/>
</toolbarpalette>
<!-- Sunbird -->
<toolbarpalette id="calendarToolbarPalette">
<toolbarbutton id="custom-button-1"/>
</toolbarpalette>
<!-- button details -->
<toolbarbutton id="custom-button-1"
label="Custom"
tooltiptext="My custom toolbar button"
oncommand="CustomButton[1]()"
class="toolbarbutton-1 chromeclass-toolbar-additional custombutton"
/>
</overlay>

Vous devez maintenant insérer deux fichiers image ayant des noms button-1.jpg et Icon.jpg de dimensions 40 × 48 et 48 × 48 respectivement pourobtenir les meilleurs résultats. Cependant, vous pouvez créer des images de toute taille ne dépassant pas 48 pixels de largeur et de longueur. Ci-dessous, vous pouvez voir les images des boutons que nous utilisons - button-1.jpg l'image est pour le bouton de la barre d'outils avec des tailles respectives (grandes et petites) et l'effet de survol peut être vu sous les deux tailles d'images par défaut. Icon.jpg l'image fait référence à l'image de l'icône de l'extension principale (celle que vous verrez dans la galerie d'extensions de Firefox)

button-1.jpg

Icon.jpg

Une fois créé, passez au 5ème fichier - button.js. Ce fichier JavaScript est très important,car il définira la fonctionnalité principale du bouton. Vous pouvez ajouter un exemple de script qui invite un message à tester la fonctionnalité ou opter pour un script avancé pour faire ce que vous voulez. Il existe également de nombreux scripts spécialement conçus pour répondre aux exigences de chacun, vous pouvez également consulter quelques scripts simples mais utiles ici. Étant donné que ce guide est destiné aux utilisateurs de niveau élémentaire, nous allons créer un élément de signet simple qui ouvrira le site Web spécifié. Ouvrez le button.js fichier et insérez les lignes de code suivantes pour créer un bouton de signet (pour afficher sur la barre d'outils Firefox).

CustomButton = {
1: function () {
const url = "https://www.addictivetips.com/"
document
.getElementById("content")
.webNavigation
.loadURI(url, 0, null, null, null)
},
}

Maintenant vous êtes prêt à partir, nous vous demandons de vérifier lecode que vous avez inséré dans les fichiers mentionnés et vérifiez à nouveau les dimensions de l'image. Pour installer l'extension nouvellement créée, fermez toutes les instances en cours d'exécution de Firefox, puis lancez-la. Si tout s'est bien passé, vous verrez probablement une nouvelle invite d'installation du module complémentaire, indiquant que l'extension a été installée avec succès.

Pour faire apparaître le bouton nouvellement créé dans la barre d'outils de navigation, dans le menu Affichage, sous le sous-menu Barres d'outils, cliquez sur Personnaliser.

La boîte de dialogue Personnaliser la barre d'outils apparaîtra, d'oùvous devez faire glisser le bouton nouvellement créé sur la barre d'outils de navigation. Une fois inséré, vous pouvez également modifier sa position en le faisant glisser où vous le souhaitez.

Maintenant, cliquez simplement sur le bouton pour vérifier la fonctionnalité insérée dans le fichier JavaScript.

La fonctionnalité du bouton résultant estdéfini par l'utilisateur, il appartient donc à vos compétences de savoir combien vous pouvez calibrer ses fonctions. Les utilisateurs novices peuvent créer des raccourcis, lier des applications, concevoir des signets tandis que les utilisateurs limbes entre le niveau moyen et le niveau expert peuvent certainement en faire davantage usage et ajouter les fonctionnalités requises dans le fichier JavaScript principal.