Préparer l'environnement
Les extensions sont empaquetées et distribuées sous forme de fichiers zip ou de packages avec une extension XPI.Voici un exemple de structure interne typique d'un fichier XPI :
ExempleExt.xpi :
/install.rdf
/Composants/*
/components/cmdline.js
/par défaut/
/par défaut/préférences/*.js
/plugins/*
/chrome.manifest
/chrome/icônes/par défaut/*
/chrome/
/chrome/contenu/
Nous devons créer une structure de répertoires similaire à celle-ci. Pour commencer, créez un répertoire racine pour l'extension (par exemple, C:\extensions\my_extension\ ou ~/extensions/my_extension/). Dans ce répertoire, créez un répertoire Chrome, dans lequel créez un répertoire de contenu.
Si vous êtes toujours invité à redémarrer votre navigateur, certains peuvent trouver l'objet. Ces données sont collectées uniquement à des fins statistiques, pour diagnostiquer d'éventuels problèmes sur nos serveurs et améliorer le service. Voyons ce qui est le mieux. Ils portent des noms différents, mais ils désignent généralement des scripts ou des programmes susceptibles d'améliorer les fonctionnalités et les capacités. Des spots publicitaires dans tous les coins de la page ? C'est le plugin de vos rêves. Élimine toutes les bannières, rendant la navigation sur le Web plus agréable.
Si vous rentrez dans la catégorie des internautes qui ouvrent plusieurs dizaines de fenêtres, cette extension est faite pour vous. Idéal pour les extensions « malades ». Vous permet de regrouper et d’afficher tous les plugins installés sur une seule page. De cette façon, vous pourrez facilement les gérer en désactivant ou en supprimant ceux qui ne sont plus utiles.
DANS racine dans le répertoire d'extension, créez deux fichiers texte vides nommés chrome.manifest et install.rdf. La structure de répertoires résultante devrait ressembler à ceci :
installer.rdf
chrome.manifest
chrome\
contenu\
Plus d’informations sur la configuration de votre environnement peuvent être trouvées sur ce lien.
C'est très utile lors du nettoyage, mais cela ne prend pas beaucoup de temps. L'extension requise pour les utilisateurs disposant d'une connexion est parfois un peu lente. Il vous permet de suivre les courses et les résultats de votre équipe ou cœur préféré. Téléchargez toutes les images ou liens sur la page.
Puisque la main invisible opère sur le marché, ce plugin agit sur le e-commerce en vous indiquant si l'article que vous vous apprêtez à acheter est moins cher sur un autre site. commerce électronique. Cette extension vous permet d'afficher la taille réelle des images redimensionnées sur une page Web. Déplacez simplement votre souris sur la vignette et le jeu sera terminé.
Script d'installation
Ouvrez le fichier install.rdf et ajoutez-y le texte suivant :Enregistrez le fichier.
Extension de navigateur utilisant XUL
L'interface utilisateur de Firefox est écrite en XUL et JavaScript. XUL est un sous-ensemble de XML qui vous permet de créer des éléments interface utilisateur, tels que les boutons, les menus, les panneaux de contrôle, les arborescences, etc. Toutes les actions des utilisateurs sont traitées à l'aide de JavaScript.Pour « étendre » le navigateur, nous modifions des parties de l'interface utilisateur de Firefox en ajoutant ou en modifiant des widgets (contrôles). Nous ajoutons des widgets en ajoutant de nouveaux éléments XUL DOM à la fenêtre du navigateur et contrôlons leur comportement à l'aide de scripts et de gestion d'événements.
Vous permet de charger des vidéos directement depuis la fenêtre vidéo. Cette extension permet de l'utiliser pour des sites qui ne proposent normalement pas cette fonctionnalité. Il vous permet de visualiser instantanément toutes les parties d'une page Web qui sont utilisées pour collecter des informations sur vous et votre navigation. Si vous utilisez réellement un mot de passe différent pour chaque service auquel vous vous abonnez, vous avez absolument besoin de ce plugin. Enregistre tous vos mots de passe, en génère de nouveaux en cas de besoin et les protège des regards indiscrets.
Désactive l'exécution automatique de tout script sur une page Web, invitant l'utilisateur à décider de l'exécuter ou non. N'importe qui peut faire une erreur en tapant une adresse Web et en terminant mauvaise page. Avec cette expansion, ce ne sera plus le cas. S'il y a une erreur, il vous alertera et la corrigera.
L'interface du navigateur est définie dans le fichier browser.xul ($FIREFOX_INSTALL_DIR/chrome/browser.jar contient content/browser/browser.xul). Dans browser.xul, nous pouvons trouver une description de la barre d'état qui ressemble à ceci :
Ouvrir le fichier chrome.manifest, qui a été créé dans le répertoire racine de votre extension. Ajoutez le code suivant :
Exemple de contenu chrome/content/
(N'oubliez pas la barre oblique de fermeture "/" ! Sans cela, le colis ne sera pas enregistré.)
Grâce à une communauté active, vous serez informé de la réputation du lien avant de l'ouvrir. Par conséquent, pour éviter les erreurs. Abonnez-vous à notre newsletter. Vous recevrez les dernières nouvelles chaque semaine. intéressant dans le monde de la technologie ! Les extensions de navigateur sont des outils qui peuvent être utiles à tout internaute. Ils peuvent accélérer n'importe quel processus ou améliorer la productivité de l'utilisateur en aidant à effectuer diverses actions comme rechercher différentes choses, gérer des onglets ou tweeter et partage V dans les réseaux sociaux pour des actions plus spécifiques, telles que la correction d'erreurs ou l'édition d'images.
Regardons chaque élément :
- type de paquet chrome
- nom du package chrome (doit être en minuscules car Firefox/Thunderbird version 2 et antérieures ne prennent pas en charge les noms à casse mixte - bug 132183)
- hébergement des fichiers du package Chrome
Veuillez noter que les fichiers de contenu, de paramètres régionaux et de skin doivent être situés respectivement dans les répertoires de contenu, de paramètres régionaux et de skin du sous-répertoire Chrome.
Parmi ces multiples modules complémentaires, il existe ce qu'on appelle des « captures d'écran » qui rendent le travail d'un concepteur de sites Web plus impeccable et plus efficace. En voici 11 de premier ordre pour prendre rapidement des captures d’écran. Cet addon apparaît également dans menu contextuel et vous permet de prendre des captures d'écran de la page Web entière ou d'une partie spécifique de celle-ci. La meilleure chose est qu'il vous permet d'enregistrer des images dans un fichier ou un presse-papiers, ainsi que de les télécharger sur Internet.
Capture d'écran via téléchargement en ligne
Vous pouvez utiliser l'icône de la barre d'outils pour cela ou le menu contextuel, ainsi que les raccourcis clavier. La capture d'écran vous invite automatiquement à enregistrer les fichiers avec le titre et la date actuels, mais vous pouvez facilement renommer le fichier avant de l'enregistrer et sélectionner le dossier dans lequel vous souhaitez enregistrer cet instantané. Le menu contextuel propose un certain nombre d'options intéressantes pour rendre l'ensemble du processus plus facile et plus efficace. Les options incluent un modèle de nom de fichier et des options de mise à l'échelle de l'image pour sélectionner la taille de la capture d'écran à enregistrer.
Enregistrez le fichier. Désormais, lorsque vous lancerez Firefox avec votre extension (décrite ci-dessous), le package Chrome sera enregistré.
Enregistrer une couche
Vous devez maintenant lier votre couche à la fenêtre du navigateur. Pour ce faire, ajoutez les lignes suivantes au fichier chrome.manifest :Superposition chrome://browser/content/browser.xul chrome://sample/content/sample.xul
Ces deux lignes indiquent à Firefox d'associer sample.xul et browser.xul lors du chargement de browser.xul .
Vous pouvez capturer une zone sélectionnée de la page, ainsi que uniquement la partie visible ou la page entière. Il vous permet également de capturer l'intégralité de la fenêtre du navigateur, ce qui peut être utile aux développeurs et concepteurs Web. Ce qui est étonnant, c'est que vous pouvez modifier votre capture d'écran dans un onglet qui s'ouvre juste après l'avoir prise. Après la mise à jour, diverses fonctions de zoom et de redimensionnement sont disponibles, ainsi que d'autres options d'édition. Sélectionnez simplement "Enregistrer la page en tant qu'image" dans le menu contextuel et c'est parti.
Le seul inconvénient est qu'il prend une capture d'écran de la zone sélectionnée, vous ne pourrez donc pas capturer l'intégralité de l'instantané de la page. Les utilisateurs adorent leurs capacités de navigation par onglets, mais si vous laissez les onglets décochés, ils peuvent devenir complètement incontrôlables. Pour ceux d’entre vous qui se sentent perdus dans une mer d’onglets, il existe de nombreuses façons de les gérer ; Il y en a plus de 40 meilleures extensions.
Essai
Tout d’abord, nous devons informer Firefox de notre extension. En cours de développement pour Versions de Firefox 2 et versions ultérieures, vous pouvez spécifier où obtenir la nouvelle extension et le navigateur la téléchargera après chaque redémarrage.- Accédez à votre répertoire personnel, puis au répertoire contenant Profil Firefox, avec lequel vous allez travailler (par exemple, Firefox/Profiles/
Défaut/). - Allez dans le répertoire extensions/, s'il n'existe pas, créez-le.
- Créer fichier texte et placez-le dedans chemin complet dans le répertoire avec votre extension (par exemple, C:\extensions\my_extension\ ou ~/extensions/my_extension/). Utilisateurs Windows doit être attentif à la direction des barres obliques, assurez-vous d'ajouter une barre oblique de fin et de supprimer tous les espaces de fin.
- Enregistrez le fichier avec l'ID d'extension comme nom (par exemple, [email protégé]). Aucune extension de fichier.
Lancez Firefox. À l'aide du lien texte, Firefox trouvera automatiquement le répertoire contenant votre extension et l'installera. Après avoir lancé le navigateur, vous verrez l'inscription « Hello, World ! » sur le côté droit de la barre d'état.
Même si nous pensons que toutes les options que nous vous proposons sont excellentes, nous vous suggérons seulement d’en installer quelques-unes. L'installation aussi grande quantité les modules complémentaires ralentiront votre navigateur. 
En fonction du nombre de barres d'outils que vous exécutez, la zone des onglets peut devenir très encombrée, donc déplacer les onglets au-dessus de l'encombrement peut sembler préférable pour certaines personnes.
Vous pouvez apporter quelques modifications au fichier .xul, redémarrer Firefox et vous verrez le résultat immédiatement.
Création d'un paquet
Maintenant que l'extension fonctionne, vous pouvez créer un package pour une distribution et une installation ultérieures.Pack avec un archiveur contenu du zip répertoire avec votre extension (pas le répertoire d'extension lui-même) et modifiez l'extension de l'archive de .zip à .xpi.
Lorsque vous les ouvrez, les onglets s'affichent Couleurs différentes, ce qui les rend plus faciles à reconnaître. Ce module complémentaire modifie le texte des onglets non lus en italique rouge gras afin que vous puissiez facilement identifier les onglets que vous devez encore lire.
Onglet Style d'arbre. Sentez-vous plus à l'aise avec système hiérarchique un arbre pour vos onglets ? C'est exactement ce que fait l'onglet Arbre de style, en plaçant des onglets dans une barre latérale et en attachant de nouveaux onglets à chaque arbre lorsque vous suivez les liens de page en page. Il s'agit d'un excellent ajout pour les concepteurs qui ont besoin de voir comment un site qu'ils souhaitent dupliquer est structuré, ou pour ceux qui examinent un site qu'ils ont conçu pour voir comment il fonctionne.
Si vous êtes l'heureux propriétaire d'un "Extension Builder", alors il peut faire tout le sale boulot à votre place (Outils -> Extension Developer -> Extension Builder). Accédez simplement au répertoire contenant votre extension et cliquez sur le bouton Créer une extension. Cette extension dispose de nombreux outils pour faciliter le développement.
Téléchargez maintenant le fichier .xpi résultant sur votre serveur et assurez-vous que son type est défini sur application/x-xpinstall . Après cela, vous pouvez télécharger et installer l'extension.
Les paramètres vous permettent de définir la largeur, la position du bouton de fermeture, l'alignement du texte, etc. Ce très bon moyen désencombrer la partie supérieure l'écran de votre navigateur. 
Onglet en double. Les blogueurs adoreront probablement cette extension, qui permet de dupliquer un onglet, ce qui est idéal lorsque vous devez rechercher d'anciens articles afin de vous mettre en valeur. Vous pouvez également fusionner plusieurs fenêtres, afficher un onglet dans une nouvelle fenêtre et bien plus encore.
Balises : ajouter des balises
Ce de courte durée concerne la construction d'une extension simple pour Firefox, qui ajoutera l'inscription à la barre d'état "Bonjour le monde!".
Ce que vous devez savoir pour commencer
Le système de développement d'extensions est conçu de telle manière que vous n'avez pas besoin d'être un programmeur professionnel pour commencer à développer votre propre extension. Quoi qu'il en soit, il s'agit de programmation, il est donc conseillé d'avoir une certaine compréhension des principes de fonctionnement logiciels d'ordinateur en général et en particulier, être familier avec XML. De manière générale, des connaissances en JavaScript et CSS sont également souhaitables, mais vous n’en aurez pas besoin dans cet article.
Plusieurs gestionnaires d'onglets. Plusieurs gestionnaires d'onglets vous permettent de fermer plusieurs onglets à la fois, d'en recharger plusieurs à la fois, de les déplacer en masse, de fermer les onglets à gauche ou à droite, et bien plus encore. Il s'agit d'un excellent outil pour les concepteurs de sites Web qui doivent naviguer plusieurs fois vers les mêmes pages ou utiliser plusieurs instances d'un site à un moment donné.
Onglet suivant. Vous pouvez exécuter des onglets de premier plan, des onglets d’arrière-plan, des fenêtres d’arrière-plan, etc. Vous avez un onglet dont vous n'avez plus besoin ? Boutons d'onglets. Vous pouvez ajouter soit nouvel onglet, soit un onglet d'annulation fermé des deux côtés de vos onglets, soit activez simplement l'un d'entre eux si vous le souhaitez. Les personnes qui constatent qu’elles ferment les onglets au hasard peuvent y trouver une solution à leurs problèmes.
Création d'un projet d'extension
Les extensions sont constituées de plusieurs fichiers, et pour qu'elles fonctionnent correctement, vous devez respecter certaines règles concernant leur emplacement dans les répertoires. Voici la structure d'une extension typique :
/myExtension : /install.rdf /components/* /defaults/ /defaults/preferences/*.js /plugins/* /chrome.manifest /chrome/icons/default/* /chrome/ /chrome/content/
Cependant, votre extension ne doit pas nécessairement contenir tous ces dossiers. Nous allons maintenant créer un framework similaire pour notre extension. Commençons par créer un dossier pour le stocker (par exemple, C:\extensions\my_extension\ pour Windows ou ~/extensions/my_extension/ pour Unix/Linux). Ce dossier sera le dossier racine. Créez-y un sous-dossier Chrome et dans le dernier un dossier de contenu.
Vous pouvez l'utiliser pour fermer des onglets, ajouter des favoris, recharger, dupliquer, etc. c'est quelque chose qui pourrait très bien être utile à tout internaute. Vous pouvez également les regrouper, les déplacer vers la barre latérale, dupliquer des onglets et divers autres contrôles, ce qui en fait une excellente solution pour votre gestionnaire d'onglets tout-en-un. Menu d'onglets - Ce module complémentaire vous propose une nouvelle barre d'outils dans laquelle vous verrez les noms de tous vos onglets dans un menu déroulant vertical.
Idéal si vous avez beaucoup d’onglets, car les noms de chaque page deviennent plus petits. Par exemple, au fur et à mesure du chargement de chaque onglet, vous voyez une barre de progression contenue dans le titre de l'onglet afin que vous puissiez voir sa progression.
Créez maintenant dans le dossier racine 2 fichier vide: chrome.manifest et install.rdf.
Nous avons donc maintenant cette structure d'extension :
Pour faciliter le développement et les tests ultérieurs, nous vous recommandons de configurer Firefox pour développer l'extension.
Création d'un script d'installation ("manifeste")
Dans notre cas, nous ajouterons un nouvel élément à la barre d'état. Dans le fichier browser.xul, vous pouvez trouver un nœud avec id="status-bar" . C'est la ligne d'état. Ce nœud a plusieurs nœuds enfants. Ajoutons-y le nôtre, qui décrira nouveau panneau. Créez un fichier, nommez-le, dites-le, exemple.xul et placez-le dans le dossier chrome/content. Ajoutez-y le code suivant :
C'est le complément idéal pour une recherche intensive. Pour ceux qui ouvrent une tonne d'onglets, ce module complémentaire vous permet de stocker les onglets dont vous n'avez pas besoin lignes supplémentaires, où ils resteront inactifs et ne consommeront pas de ressources système.
Vous pouvez restaurer les onglets dans la zone active à tout moment, restaurer jusqu'à 20 récemment onglets fermés, marquer les onglets Couleurs différentes et beaucoup plus. 
Changement automatique d'onglet - ce module complémentaire ajoute nouveau choix dans le menu Outils, qui vous permet de définir un intervalle de temps que vos onglets modifieront automatiquement pour vous. Excellente idée pour un économiseur d'écran temporaire.
Ici
URI Chrome
Les fichiers XUL (comme celui que nous venons de créer) sont chargés via l'URI du protocole chrome://. Au lieu d'avoir à déterminer où Firefox est installé et à télécharger les fichiers via file:// à chaque fois, vous pouvez les télécharger via chrome:// sans vous soucier de leur emplacement réel sur le disque.
Ainsi, la fenêtre du navigateur que nous avons récemment consulté se trouve à l'adresse . Vous pouvez essayer de le saisir dans la barre d'adresse et voir le résultat.
L'URI chrome se compose de plusieurs parties :
- Le protocole Chrome indique qu'il est nécessaire de classer et de traiter le contenu du fichier comme Chrome.
- le nom du package (dans ce cas, il s'agit du navigateur), indiquant un « bundle » de composants d'interface. Ce nom est unique pour chaque application/extension.
- type de données demandées. Il en existe trois types : le contenu (XUL, JavaScript, XBL Bindings, etc., c'est-à-dire les composants qui forment l'apparence et le comportement de l'interface), les paramètres régionaux (DTD, fichiers de propriétés, etc., localisant l'interface) et le skin (CSS et images). pour former le thème de l'interface).
- fichier à télécharger.
Ouvrez le chrome.manifest que nous avons créé précédemment et ajoutez-y ce qui suit :
Exemple de contenu chrome/content/
N'oubliez pas la barre oblique finale.
Cette ligne déclare
- type de données dans le package Chrome,
- nom du package (utilisez uniquement minuscule),
- chemin d'accès aux fichiers du package.
Nous disons donc ici que les fichiers de type de contenu pour l'exemple de package peuvent être trouvés dans chrome/content (chemin relatif à l'emplacement de chrome.manifest).
Enregistrez le fichier. Plus tard, à lancer Firefox, le package Chrome de votre extension sera enregistré avec ce fichier.
Inscription en superposition
Pour que Firefox comprenne que nous avons une superposition et que nous souhaitons la superposer sur la fenêtre du navigateur, nous devons enregistrer la superposition via le même chrome.manifest. Ajoutez-y la ligne
Recouvrir chrome://browser/content/browser.xul chrome://sample/content/sample.xul
Cela indique à Firefox de fusionner sample.xul et browser.xul
Essai
Tout d’abord, nous devons informer Firefox de notre extension. Auparavant (à l'époque de Firefox 1.0), il était nécessaire de regrouper l'extension sous le nom en:XPI et de l'installer via l'interface du navigateur. Il ne vous reste plus qu'à indiquer à Firefox où se trouve le dossier contenant votre extension - et il le connectera à chaque chargement.
Alors, vos actions :
- Recherchez votre dossier de profil. Sauf si vous en avez spécifiquement créé un, le navigateur utilise le profil par défaut.
Comment trouver le dossier de profil. - Ouvrez le dossier des extensions. S'il n'existe pas, créez-le.
- Créez un nouveau fichier texte et insérez-y uniquement le chemin d'accès à votre extension (par exemple, C:\extensions\my_extension\ pour Windows ou ~/extensions/my_extension/ pour Unix/Linux). Enregistrez le fichier sous le même nom que votre identifiant d'extension.
Remarques:
- N'oubliez pas la barre oblique finale.
- Les signes peuvent causer des problèmes souligner Dans le titre ; si cela se produit, changez-le.
Vous êtes maintenant prêt à tester votre extension. Lancez Firefox. Il verra un lien vers votre extension et l'installera. Si tout s'est bien passé, vous verrez l'inscription « Hello, World ! » dans la barre d'état à droite. Pour apporter des modifications, modifiez simplement les fichiers xul et redémarrez Firefox.
Emballage d'extension
Vous pouvez désormais empaqueter l’extension pour une distribution et une installation ultérieures.
Créez une archive zip à partir du contenu du dossier racine de votre extension (mais ne compressez pas le dossier lui-même). Renommez le fichier pour avoir une extension ".xpi". C'est tout. Pour l'installer, faites simplement glisser le fichier sur la fenêtre du navigateur.
Installation à partir d'une page Web
Il y a plusieurs moyens de le faire. Vous pouvez placer un lien direct vers le fichier xpi. Cependant, la méthode InstallTrigger est préférée car elle est plus conviviale.
Site Web des extensions addons.mozilla.org
Localisation
Pour prendre en charge plusieurs langues, il est nécessaire de séparer les chaînes localisables du contenu principal à l'aide d'entités et de « groupes de chaînes ». Il est beaucoup plus facile de le faire pendant le développement de l'extension qu'après.
Les informations de localisation sont stockées dans le sous-dossier locale dossiers chromés(c'est-à-dire à côté du dossier de contenu). Dans ce dossier, vous devez placer autant de dossiers qu'il y a de localisations que vous comptez effectuer. Une pratique courante consiste à nommer les dossiers avec des noms de paramètres régionaux standard : par exemple, un dossier avec une localisation en anglais - en-US, russe - ru-RU, etc., ce qui, cependant, n'est pas obligatoire. Créez maintenant un fichier somename.ent (ou anothername.dtd) dans chaque dossier ( le nom est le même dans tous les dossiers de localisation) et remplissez-le en conséquence (illustré ci-dessous).
Localisons notre extension en russe et Langues anglaises. Après avoir créé 2 dossiers (appelons-les ru-RU et en-US), créez un fichier dans chacun d'eux (disons myStatusBar.ent) Placez la ligne suivante dans le fichier qui se trouve dans le dossier avec localisation anglaise :
Et dans celui qui sera localisé en russe, respectivement
Enregistrez les deux fichiers. Vous devez maintenant enregistrer les localisations. Pour ce faire, ajoutez les lignes suivantes à chrome.manifest :
Exemple de paramètres régionaux en-US chrome/locale/en-US/ exemple de paramètres régionaux ru-RU chrome/locale/ru-RU/
Maintenant, pour utiliser la localisation, ajoutez simplement la ligne au début (mais après la déclaration XML) du fichier xul
chrome://sample/locale/myStatusBar.ent ">
où window est le nom de l'élément racine du document xul (dans notre cas il s'agit d'une superposition).
Pour utiliser des entités, modifiez votre fichier xul afin que l'attribut label du nouveau statusbarpanel soit égal à "&statusbarpanel.label;" .
Cet article a-t-il été utile?
Oui Non