10 choses qu'ils ne vous disent jamais à l'école d'extension de Firefox

Ceci est un article de suivi de mon récent ebook, Build Your Own Firefox Extension - une sélection supplémentaire de conseils, astuces et hacks utiles que j'ai collectés dans mon expérience avec les extensions de construction pour Firefox, y compris CodeBurner, l'extension de référence du point de point. La connaissance de base de la façon de construire une extension Firefox est supposée, vous pouvez donc d'abord prendre votre copie gratuite de l'ebook, si vous ne l'avez pas encore fait.

La plupart de ce qui est ici n'est pas explicitement documenté au Mozilla Developer Center (MDC), soit parce qu'il est toujours sur leur liste de «faire», soit parce que je l'ai inventé moi-même. Une partie est bien documentée, mais il est tellement utile que je pensais que cela valait la peine de s'y rendre toute l'attention. Fonctions de niveau supérieur (en utilisant le mot clé de la fonction). En pratique cependant, vous devez les créer comme méthodes de votre objet d'extension principal.

Les plats clés

Utilisez le `list-style-image` pour ajouter des icônes à des éléments Xul comme` `,`

`, et`

`puisque beaucoup ne prennent pas en charge` background-image`.

• rendre `` Éléments dans Firefox pour le clavier Mac OS X accessible en ajoutant un `Tabindex =” 0 ″ `pour activer la navigation à l'aide de touches fléchées. Accédez au cible de souris d'origine d'un événement de menu contextuel dans Firefox à l'aide de la propriété `PopupNode», ce qui simplifie l'interaction dans les menus de contexte personnalisés.
• Empêcher l'héritage indésirable de l'attribut `` flex 'dans les dispositions Xul en utilisant un élément de wrapper intermédiaire sans attribut `` flex', garantissant un contrôle plus précis sur le dimensionnement des éléments enfants. Implémentez les feuilles de style spécifiques à la plate-forme dans les extensions de Firefox pour accueillir différentes conventions d'interface utilisateur à travers Windows, Linux et Mac OS X, améliorant l'expérience utilisateur en adhérant aux normes d'interface natives.
1. Ajoutez des icônes avec l'image de style liste
de nombreux éléments XUL sont sans support pour la propriété CSS Background-Image, mais beaucoup d'entre eux
• do
Support-Image-Image de la liste. Cela inclut , et . Vous pouvez les utiliser pour ajouter l'icône de votre application à son élément de menu principal, ou apposer une petite icône de vitrail à une zone de texte utilisée pour la recherche:

2. Make Éléments accessible au clavier dans Mac OS X

Une fois que cela a fait, vous pouvez utiliser les touches de flèche pour basculer entre les onglets, tout comme dans Windows et Linux.

textbox[type="search"] <br>{ <br>  list-style-image:url(chrome://myextension/content/images/magglass.png); <br>}

<tab> elements are natively inaccessible to the keyboard in Firefox for Mac OS X. To make them accessible you need to manually insert them into the tab order, by adding a tabindex attribute with the value 0. This value is effectively "auto", and places the element at its source-order position in the overall tab order:

Un onglet de clavier dans le clavier dans Mac OS X

<tab label="About" tabindex="0"/>

3. Référence Le cible de souris d'origine d'un événement de menu contextuel

Lorsque vous cliquez sur un élément dans un menu contextuel XUL, la référence cible de l'événement est à la sur laquelle vous avez cliqué. Mais que se passe-t-il si vous vouliez une référence à l'élément cible Original ; Autrement dit, l'élément sur lequel vous avez cliqué droit sur le menu en premier lieu?
C'est incroyablement simple, car Firefox fournit une propriété qui contient cette référence. Il s'appelle PopupNode et est une propriété du document. La façon la plus simple de l'utiliser est de le passer par l'événement de commande de l'élément de menu:

textbox[type="search"] <br>{ <br>  list-style-image:url(chrome://myextension/content/images/magglass.png); <br>}

4. Empêcher un élément de hériter de Flex

Si vous ajoutez l'attribut Flex à la plupart des éléments Xul, ils se développent pour remplir l'espace disponible. Mais Flex est hérité, donc ses enfants se dilatent également , ce qui, dans certains cas, est très indésirable. Par exemple, si l'élément enfant est une , vous voudriez qu'il ait des dimensions précises; Mais il n'y a aucun moyen de nier explicitement la flexion héréditaire.

Mais il n'héréte qu'à un niveau de profondeur, de sorte que vous pouvez le nier en ajoutant un élément de wrapper intermédiaire, sans attribut flexible déclaré:

<tab> elements are natively inaccessible to the keyboard in Firefox for Mac OS X. To make them accessible you need to manually insert them into the tab order, by adding a tabindex attribute with the value 0. This value is effectively "auto", and places the element at its source-order position in the overall tab order:

5. Proix d'une boîte de dialogue à partir de l'événement Chrome Load

Si vous utilisez Window.OpenDialog pour engendrer une boîte de dialogue avec les fonctionnalités modales et centres-écran de l'événement Chrome Load, la boîte de dialogue sera principalement invisible dans Mac OS X, caché dans le coin supérieur à gauche de l'écran. En effet, la boîte de dialogue est positionnée avant l'établissement de la taille de la fenêtre, de sorte que la propriété CentersCreen ne fonctionne pas comme prévu. Le même problème se produit avec la fonction d'alerte, ce qui peut être un problème si vous l'utilisez comme un outil de débogage rapide et sale.

Une solution consiste à envelopper la fonction OpenDialog ou Alert dans un jeu rapide. Cela garantit que la fenêtre principale est dimensionnée avant que la boîte de dialogue ne se déclenche, elle sera donc positionnée correctement:

<tab label="About" tabindex="0"/>

6. Ajoutez des icônes de dialogue personnalisées pour Windows et Linux

pour ajouter une icône personnalisée à une boîte de dialogue, créez d'abord un dossier nommé icônes dans le répertoire Chrome de votre extension. Ensuite, à l'intérieur du dossier Icônes, créez un autre dossier appelé par défaut. Dans le dossier par défaut, enregistrez une icône avec le même nom que l'identifiant de l'élément

, par exemple, si la boîte de dialogue avait l'ID MyExtension-Preferences, vous créeriez une icône appelée MyExtension-Preferences.ico (pour Windows, ou .png pour Linux). La documentation MDC indique d'utiliser des images XPM pour Linux, mais elles manquent de prise en charge de la transparence du canal alpha. Les fichiers PNG fournissent un support, et ils fonctionnent aussi bien.

Dans Windows, l'icône apparaîtra également dans la barre des tâches:

Une icône de dialogue personnalisée dans Windows XP

Cela diffère à Mac OS X, car ses boîtes de dialogue sont affichées sans icônes.

7. Obtenez une référence à la fenêtre ouverte la plus récemment ouverte

Vous pouvez utiliser l'interface du médiateur de fenêtre de Firefox pour obtenir une référence à la fenêtre du navigateur la dernière. Cela peut être utile si vous vouliez ouvrir un lien Web à partir d'une boîte de dialogue externe, et est plus fiable que Window.Opener.

Voici une petite méthode courte et douce qui renvoie la référence de la fenêtre, ou null si aucune fenêtre de navigateur n'est ouverte:

textbox[type="search"] <br>{ <br>  list-style-image:url(chrome://myextension/content/images/magglass.png); <br>}

8. Obtenez l'URL de chaque onglet ouvert

En suivant la pointe précédente, nous pouvons itérer dans toutes les fenêtres du navigateur ouvert, extraire leurs URL et les emballer dans un tableau hiérarchique (groupé d'abord par fenêtre, puis par onglet).

La méthode suivante fait précisément cela. Chaque membre de la matrice finale est lui-même un tableau, contenant l'URL de l'onglet et un drapeau booléen (sélectionné) pour indiquer s'il s'agit de l'onglet actuellement sélectionné dans cette fenêtre:

<tab> elements are natively inaccessible to the keyboard in Firefox for Mac OS X. To make them accessible you need to manually insert them into the tab order, by adding a tabindex attribute with the value 0. This value is effectively "auto", and places the element at its source-order position in the overall tab order:

9. Faites en sorte que votre interface réponde aux modifications de mise au point de la fenêtre

la plupart des fenêtres MAC modifient leur apparence lorsque la fenêtre perd la focalisation: arrière-plans plus légers, décorations de fenêtres ou boutons grisés, par exemple. Pour implémenter cet effet sur vos propres contrôles d'interface, vous devez savoir quand la fenêtre gagne et perd la concentration.

Votre premier instinct pourrait être d'utiliser la concentration de la fenêtre et des événements brouillants, mais il s'avère qu'ils ne sont pas fiables à cet effet, car ils se comportent parfois de manière non intuitive. Par exemple, si la mise au point de l'application se déplace vers un document dans un

<tab label="About" tabindex="0"/>

Faites attention à la façon dont vous l'utilisez. Par exemple, si vous l'avez utilisé pour déclencher une boîte de dialogue modale telle que Alert, l'action de reproduire la boîte de dialogue entraînerait la fin de la fenêtre; Le rejeter retrouverait l'objectif, ce qui rééduquerait la boîte de dialogue!

Alternativement, si l'effet que vous souhaitez réaliser peut être réalisé avec Pure CSS, vous pouvez utiliser un sélecteur d'attribut avec la pseudo-classe de négation. Par exemple, pour changer une icône entre ses états normaux et handicapés:

textbox[type="search"] <br>{ <br>  list-style-image:url(chrome://myextension/content/images/magglass.png); <br>}

10. Implémentez les feuilles de style spécifiques à la plate-forme

Firefox est disponible sur plusieurs plates-formes, et chacune d'elles a ses propres conventions en ce qui concerne l'apparence et même le placement des composants d'interface. Un bon exemple de ceci est les boutons OK et Annuler dans une boîte de dialogue d'alerte: sur Windows et Linux, le bouton OK est à gauche du bouton Annuler, tandis que sur Mac OS, c'est l'inverse. L'apparence des boutons de fenêtre fermés et minimiques est une autre instance, car ils diffèrent pour chaque plate-forme.

Ainsi, compte tenu de ces variations, il est souvent utile de pouvoir appliquer des feuilles de style spécifiques à la plate-forme à l'interface de votre propre extension. Cela vous permet d'implémenter des variations telles que des icônes alternatives pour les boutons, différentes polices pour les contrôles d'interface personnalisées, etc. Le dossier de plate-forme de niveau supérieur dans le diagramme suivant doit entrer dans le dossier racine de votre extension - au même niveau que le dossier Chrome. Tous les noms de dossiers et noms de fichiers doivent être exactement comme indiqué ici (ils sont également sensibles à la casse), à ​​l'exception du nom de la feuille de style elle-même; Cela peut être tout ce que vous aimez, mais bien sûr, il doit être le même pour la copie de chaque plate-forme.

La hiérarchie du dossier pour les feuilles de style spécifiques à la plate-forme

au cas où elle était moins qu'évidence, "Darwin" est Mac Os X, "Winnt" est Windows et "Linux" est… er… Linux. Chacun de ces fichiers Chrome.Manifest doit contenir cette ligne délimitée par l'onglet identique (en remplacement de «MyExtension» par le nom de votre extension):

Pour ajouter les feuilles de style à votre interface, ajoutez simplement une instruction de traitement de la feuille de style XML avec le modèle URL suivant:

<tab> elements are natively inaccessible to the keyboard in Firefox for Mac OS X. To make them accessible you need to manually insert them into the tab order, by adding a tabindex attribute with the value 0. This value is effectively "auto", and places the element at its source-order position in the overall tab order:

Voir comment tout ce que vous devez faire est de référer au répertoire peau, et Firefox déterminera la feuille de style spécifique à inclure, selon la plate-forme sur laquelle il fonctionne. Vous pouvez étendre le principe avec autant de feuilles de style différentes que vous le souhaitez: créez simplement une version dans chacun des dossiers de plate-forme, puis ajoutez-le à un document XUL en utilisant le même modèle d'URL.

11. Ajoutez une URL à l'histoire du navigateur

<tab label="About" tabindex="0"/>

Voici un conseil de bonus supplémentaire. La référence XUL à MDC vous explique comment créer une zone de texte avec l'historique automatique. Malheureusement, il ne vous explique pas comment ajouter de nouvelles URL à l'histoire, j'ai donc dû résoudre ce problème à la dure, en traçant le code source de Firefox. La méthode que je vais vous montrer ici ajoute des URL, récupère et sauve des favicons, et inclut l'historique de base automatique à la bonne affaire!

Une zone de texte avec un menu automatique d'historique, montrant les entrées que nous avons ajouté programmatiquement

Remarque : L'ajout de l'historique du navigateur fonctionnera dans Firefox 3 ou plus tard, mais la récupération de Favicon ne fonctionnera que dans la version 3.5 ou plus tard. attributs. Dans l'exemple de code suivant, le nom de fonction addurltohistory peut être tout ce que vous voulez, et l'attribut Flex est facultatif, mais tout le reste doit être exactement comme indiqué:

Le type et les attributs de recherche automatique sont ce qui déclenche le comportement automatique principal. L'attribut CompeteeSelectedIndex est de sorte que lorsque vous sélectionnez un élément dans le menu complet, sa valeur est automatiquement écrite dans la zone de texte; Cela vous permet d'appuyer immédiatement sur la touche Entrée pour tirer la fonction de commande. L'attribut NewLines est simplement afin d'éviter d'analyser manuellement la valeur de l'espace blanc indésirable (comme les espaces de leaders ou de fin).

textbox[type="search"] <br>{ <br>  list-style-image:url(chrome://myextension/content/images/magglass.png); <br>}

Notez comment la fonction de commande est déclenchée par Onkeydown, plutôt que sur oncommand. C'est parce que l'élément n'a pas un événement OnCommand. Les événements qui sont normalement utilisés pour celui-ci sont sur le point d'observation (tirés lorsque le texte affiché est entré) et onChange (tiré lorsque la valeur change). Étant donné que la valeur changera fréquemment en réponse aux suggestions d'achèvement automatique, dont la plupart seront des valeurs indésirables, nous reportons l'action de commande jusqu'à ce que la touche ENTER soit enfoncée.

Ce que nous avons ici est déjà suffisant pour une boîte d'historique fonctionnelle. Vous pouvez taper ou coller du texte dans la zone de texte et un menu déroulant apparaîtra avec votre historique, filtré en fonction de ce qui a été entré. Vous pouvez ensuite sélectionner dans ce menu, et votre sélection sera écrite dans la zone de texte.

Vous pouvez également ajouter un bouton Arrow pour faire apparaître le menu déroulant en ajoutant ActiverHistory = "true".

Alors, regardons maintenant la fonction de commande qui est licenciée lorsque vous appuyez sur Entrée. En pratique, vous effectuez une autre tâche après cela, (comme le chargement de l'URL spécifié dans un ), mais je vais juste me concentrer sur la façon de l'ajouter à l'histoire. Je vais d'abord vous montrer le code, puis le passer par-le pas à peu:

avant tout, nous faisons une petite validation, ajoutant un protocole si l'URL est sans un (afin que l'utilisateur puisse simplement taper «www».), Puis rédiger l'URL [modifiée] à la zone de texte. Ensuite, s'il contient des espaces ou plusieurs points autres que dans les paramètres CGI, nous jetons une alerte sur la syntaxe mal formée et quittons la fonction. C'est toute la validation dont nous avons vraiment besoin pour empêcher Firefox de s'étouffer. Vous pouvez préférer gérer l'erreur plus gracieusement, par exemple en lançant l'erreur à la console ou en implémentant une méthode personnalisée pour alerter l'utilisateur qu'une erreur s'est produite.

<tab> elements are natively inaccessible to the keyboard in Firefox for Mac OS X. To make them accessible you need to manually insert them into the tab order, by adding a tabindex attribute with the value 0. This value is effectively "auto", and places the element at its source-order position in the overall tab order:

Ensuite, nous faisons l'entreprise qui ajoute réellement l'URL à l'histoire. Le service d'histoire n'acceptera pas une chaîne URI ordinaire, nous devons donc créer ce qu'on appelle un iuri. Il s'agit d'un objet URI qui contient une variété de métadonnées, y compris son hôte, qui sera utile plus tard. Nous créons l'objet IURI à l'aide du service IO, puis passons cela au service d'histoire mondiale, pour l'ajouter à l'historique du navigateur.

Le reste du code est pour saisir le favicon, et cela est enveloppé dans un bloc d'essai ... Catch pour deux raisons. Premièrement, afin qu'une erreur ne soit pas lancée si, pour une raison quelconque, le Favicon ne soit pas à l'URL attendue, et deuxièmement, car il ne fonctionne que dans Firefox 3.5 ou plus tard. Ainsi, nous initialisons d'abord le service Favicon, puis créons un objet IURI pour l'adresse de Favicon (en utilisant le nom d'hôte de l'IURI d'origine). Nous passons ensuite l'objet Favicon Iuri au service Favicon, pour charger et enregistrer le favicon.

Et là nous l'avons! La prochaine fois que nous saisirons cette même adresse dans la zone de texte, elle apparaîtra dans le menu automatique, ainsi que son favicon.

Notez que le processus Favicon est asynchrone. Si vous souhaitez l'afficher immédiatement dans la zone de texte, vous devez exécuter une boucle SetInterval pour vérifier continuellement s'il existe encore. Vous pouvez le faire avec du code comme celui-ci:

textbox[type="search"] <br>{ <br>  list-style-image:url(chrome://myextension/content/images/magglass.png); <br>}

Ce code est un peu délicat: toutes les 500 millisecondes (le deuxième paramètre à définir INTERVAL), nous demandons le service FAVICON pour le FAVICON de la page. Il renverra un URI formaté soit avec le protocole Moz-Anno: Favicon: (si le favicon a été téléchargé) ou avec le protocole Chrome: (s'il renvoie l'image par défaut). Si nous avons essayé 20 fois (un total de 10 secondes), ou si nous avons téléchargé avec succès un favicon pour la page - comme indiqué par Moz-Anno: Favicon: dans l'URI - alors nous l'avons défini comme l'URL d'image de style liste pour la liste des TextBox.

Nous allons tout pour la liste des conseils rapides. Si vous ne l'avez pas déjà fait, téléchargez mon ebook Build votre propre extension Firefox qui est gratuite avec l'extension CodeBurner.

Gardez un œil vigilant pour un autre article sur la construction d'extensions de Firefox, ainsi que de nouveaux ajouts à la famille CodeBurner, à venir bientôt!

Questions fréquemment posées (FAQ) sur les extensions de Firefox

Comment puis-je installer des extensions Firefox?

L'installation d'extensions de Firefox est un processus simple. Tout d'abord, ouvrez votre navigateur Firefox et cliquez sur le bouton de menu, qui est représenté par trois lignes horizontales dans le coin supérieur droit. Dans le menu déroulant, sélectionnez les «modules complémentaires». Cela ouvrira l'onglet Manager des modules complémentaires. Dans la barre de recherche, saisissez le nom de l'extension que vous souhaitez installer et appuyez sur Entrée. Cliquez sur le bouton «Ajouter à Firefox» à côté de l'extension que vous souhaitez installer. Un pop-up semblera demander votre autorisation pour ajouter l'extension. Cliquez sur «Ajouter» et l'extension sera installée.

Pourquoi mes extensions de Firefox ne fonctionnent-elles pas?

Il pourrait y avoir plusieurs raisons pour lesquelles vos extensions de Firefox ne fonctionnent pas. Cela pourrait être dû à une version obsolète de Firefox, entre en conflit avec d'autres extensions ou des problèmes avec l'extension elle-même. Essayez de mettre à jour Firefox vers la dernière version, en désactivant d'autres extensions pour vérifier les conflits ou réinstaller l'extension problématique. Si le problème persiste, contactez le développeur d'extension pour prendre en charge.

Comment puis-je gérer mes extensions de Firefox?

pour gérer vos extensions Firefox, ouvrez le menu Firefox et sélectionnez «Add-ons». Cela ouvrira l'onglet Manager des modules complémentaires. Ici, vous pouvez activer ou désactiver les extensions, supprimer les extensions ou accéder aux options pour chaque extension.

Les extensions de firefox peuvent-elles ralentir mon navigateur?

Oui, certaines extensions de Firefox peuvent ralentir votre navigateur, surtout si de nombreuses extensions sont installées. Chaque extension utilise une certaine quantité de ressources système et en avoir trop peut ralentir votre navigateur. Si vous remarquez que votre navigateur fonctionne lentement, essayez de désactiver certaines extensions pour voir si elle s'améliore.

Les extensions de Firefox sont-elles sûres?

La plupart des extensions de Firefox sont sûres à utiliser. Cependant, comme tout logiciel, ils peuvent potentiellement être exploités par des acteurs malveillants. Pour assurer votre sécurité, n'installez que les extensions à partir de sources de confiance, gardez vos extensions à jour et révisez régulièrement les autorisations de vos extensions.

Comment puis-je mettre à jour mes extensions de Firefox?

Firefox vérifie automatiquement les mises à jour de vos extensions. Cependant, vous pouvez également vérifier manuellement les mises à jour en ouvrant le menu Firefox, en sélectionnant «Add-ons», puis en cliquant sur l'icône de l'équipement et en sélectionnant «Vérifier les mises à jour».

Puis-je utiliser des extensions de Firefox sur mobile?

Actuellement, seul un nombre limité d'extensions de Firefox est disponible pour le mobile. Pour vérifier si une extension est disponible pour mobile, visitez la page de l'extension sur le site Web des modules complémentaires Firefox et recherchez l'étiquette «disponible pour Android».

Comment puis-je développer ma propre extension Firefox?

Pour développer votre propre extension Firefox, vous aurez besoin d'avoir une compréhension de base des technologies Web comme HTML, CSS et Javascript. Mozilla fournit un guide complet sur la façon de développer des extensions de Firefox sur leur site Web de développeur.

Quelles sont les meilleures extensions de Firefox à utiliser?

Les meilleures extensions de Firefox à utiliser dépendent de vos besoins. Certaines extensions populaires incluent l'origine ublock pour le blocage des publicités, la gestion des mots de passe et le lecteur sombre pour le mode sombre.

Puis-je utiliser des extensions de chrome sur Firefox?

Certaines extensions chromées peuvent être utilisées sur Firefox à l'aide d'une extension appelée Chrome Store Foxified. Cependant, toutes les extensions chromées ne fonctionneront pas sur Firefox en raison de différences dans la façon dont les deux navigateurs gèrent les extensions.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!