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

Aujourd'hui, nous apportons un guide Firefox que tout le monde peut suivre pour créer un bouton personnalisé dans la barre d'outils de navigation. Avec les boutons visibles dans la barre d'outils de navigation, il existe une liste d'autres boutons ayant différents fonctionnalités fournies dans Firefox qui peuvent être ajoutées n'importe où sur la barre d'outils et peuvent être personnalisées selon 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 construire facilement une nouvelle extension qui se comporte comme indiqué, se trouve dans une position définie, tout en étant très 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 extensions dossier (celui qui réside dans le dossier Profils Firefox). Les utilisateurs de Windows 7 et Windows Vista trouveront ce dossier ici;

C: \ Users \ <> \ AppData \ Roaming \ Mozilla \ Firefox \ Profiles \ <> \ extensions

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

Maintenant, ouvrez le dossier Firefox, puis Profils -> -> dossier d'extensions

Une fois la 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 fourni 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.

contenu custombutton chrome / style chrome: //global/content/customizeToolbar.xul chrome: //custombutton/content/button.css # Superposition Firefox chrome: //browser/content/browser.xul chrome: //custombutton/content/button.xul # Superposition de courrier Thunderbird chrome: //messenger/content/messenger.xul chrome: //custombutton/content/button.xul # Thunderbird compose une superposition chrome: //messenger/content/messengercompose/messengercompose.xul chrome: //custombutton/content/button.xul # Superposition du carnet d'adresses Thunderbird chrome: //messenger/content/addressbook/addressbook.xul chrome: //custombutton/content/button.xul # Superposition Sunbird 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 y insérer les lignes de code suivantes. 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 doubles), vous pouvez saisir le nom du bouton, le texte descriptif et le créateur Nom.

1.0 Firefox  Thunderbird  Sunbird 

Une fois la description modifiée, 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, il n'y a rien 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 cinch, cependant, si vous entendez son nom pour la toute première fois, insérez simplement les lignes de style suivantes de code 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");} / * style commun pour toutes les personnalisées boutons * / .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 de code suivantes. 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.

1.0UTF-8texte / csschrome: //custombutton/content/button.css Firefox Courrier Thunderbird Thunderbird compose Carnet d'adresses Thunderbird Sunbird détails des boutons 

Vous devez maintenant insérer deux fichiers image ayant des noms button-1.jpg et Icon.jpg avec les dimensions 40 × 48 et 48 × 48 respectivement pour obtenir 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 des 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 le code que vous avez inséré dans les fichiers mentionnés et de vérifier à 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 s'affiche, 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 est définie par l'utilisateur, c'est donc à vous de déterminer dans quelle mesure vous pouvez calibrer ses fonctions. Les utilisateurs novices peuvent créer des raccourcis, lier des applications, concevoir des signets pendant que les utilisateurs dans les limbes entre le niveau moyen et expert peut certainement en faire davantage usage et ajouter les fonctionnalités requises dans JavaScript principal fichier.