Barre d'outils Google
API de la barre d'outils Google

Guide de création de boutons personnalisés pour la barre d'outils Google 4 pour Internet Explorer

Ce document explique comment créer des boutons personnalisés. Les boutons personnalisés ne fonctionnent actuellement qu'avec Internet Explorer.

Table des matières

Références
  • XML
  • Caractères d'échappement
  • Variables
  • Introduction

    Qu'est-ce qu'un bouton personnalisé ?

    Il s'agit d'un bouton que vous pouvez ajouter à la barre d'outils Google. Il peut être doté de fonctionnalités personnalisées de navigation, de recherche, d'envoi et de mise à jour. En particulier, un bouton de recherche personnalisé peut utiliser le moteur de recherche de Google ou d'un autre site.

    Un simple clic sur un bouton de recherche peut vous permettre de réaliser les tâches suivantes :

    • Accéder à un site Web, ou à un favori.
    • Accéder à un site Web et utiliser le moteur de recherche de ce site pour rechercher le texte saisi dans la zone de recherche de la barre d'outils. Par exemple, un bouton Wikipedia permet d'accéder à wikipedia.org et de rechercher le terme que vous avez saisi. (Il peut vous permettre d'accéder à des sites Web en fonction des paramètres régionaux de la barre d'outils.)
    • Envoyer le texte actuellement sélectionné dans le navigateur vers un service, afin, par exemple, de composer un e-mail, une entrée de blog ou un message au format texte.
    • Mettre à jour l'icône du bouton, son info-bulle et sa liste déroulante d'icônes et de chaînes à partir d'un flux RSS.

    Un bouton personnalisé peut être doté des fonctionnalités d'ergonomie suivantes :

    • Une icône représentant le site Web auquel il permet d'accéder ou l'action qu'il permet d'effectuer (<icon>). Cette icône peut être mise à jour par le biais d'un flux RSS (<feed>).
    • Une liste déroulante d'icônes et de chaînes (accessible en cliquant sur un bouton représentant une flèche vers le bas) qui peut être mise à jour par le biais d'un flux RSS, tel que les titres d'un flux d'actualités (<feed>).
    • Le texte de l'info-bulle qui apparaît momentanément lorsque le pointeur de la souris passe sur le bouton (<description>).
    • Un titre qu'il est possible de faire figurer à côté du bouton (<title>).

    Outre les fonctionnalités d'ergonomie mentionnées ci-dessus, un bouton personnalisé peut être doté des propriétés suivantes (enregistrées dans un fichier XML) qui permettent d'effectuer les tâches décrites ci-dessus :

    • Une URL vers laquelle diriger le navigateur lorsque la zone de recherche est vide et en cas de clic sur le bouton (<site>).
    • Une URL de recherche dirigeant le navigateur vers un site Web ; en cas de clic sur le bouton, la recherche portera sur le terme saisi dans la zone de recherche (<search>).
    • Une URL dirigeant le navigateur vers un site Web pour y envoyer le texte sélectionné (<send>).
    • Une URL de mise à jour pour accéder aux mises à jour du bouton (<update>).

    La barre d'outils suivante illustre des boutons personnalisés pour Slashdot, Wikipedia et la BBC (en surbrillance). Le bouton BBC correspond à un flux d'actualités avec une liste déroulante de titres (comme l'indique la flèche vers le bas).

    Ajout d'un bouton personnalisé

    Pour ajouter ou gérer des boutons personnalisés sur la barre d'outils Google :

    • La méthode la plus simple et la plus courante pour ajouter (installer) un bouton personnalisé consiste à cliquer directement sur un bouton du site Web d'un éditeur et à confirmer que vous voulez ajouter ce bouton à la barre d'outils. Une liste de ce type de boutons est présente dans la Galerie des boutons de la barre d'outils Google. L'éditeur utilise une URL de commande spéciale qui invite l'utilisateur à confirmer qu’il souhaite installer le bouton. Si l'utilisateur n'a pas installé la barre d'outils Google, l'URL de commande pointe vers la page de téléchargement de la barre d'outils.
    • La deuxième méthode, Création et ajout automatiques d'un bouton de recherche personnalisé, consiste pour l'utilisateur à cliquer avec le bouton droit sur une zone de recherche textuelle.
    • La troisième méthode consiste à modifier un bouton personnalisé à l'aide de l'éditeur avancé de la barre d'outils Google : Paramètres > Options > Boutons personnalisés (onglet) > Modifier > Utiliser l'éditeur avancé.
    • La quatrième méthode est la Création et installation manuelles d'un bouton personnalisé.
    • La cinquième méthode consiste, pour les administrateurs, à publier des boutons personnalisés sur des machines Windows utilisant une chaîne de stratégie de groupe vers une URL avec un fichier XML, ou à utiliser le programme d'installation pour écrire un fichier destiné à la section de données d'application « Tous les utilisateurs » du système de fichiers Windows.

    Comment créer des boutons personnalisés

    Création et ajout automatiques d'un bouton de recherche personnalisé

    1. Avec Internet Explorer, accédez à la page de recherche pour laquelle vous voulez créer un bouton de recherche personnalisé.
      Exemple : www.wikipedia.org

    2. Cliquez avec le bouton droit sur la zone de recherche de la page que vous voulez utiliser, sélectionnez « Effectuer une recherche personnalisée... », puis cliquez sur « Ajouter ».

    Résultat : le bouton personnalisé est installé et immédiatement opérationnel.

    En arrière-plan, cette procédure crée un fichier XML de bouton personnalisé avec une icône et l'enregistre sous un nom haché dans le dossier suivant :

    C:\Documents and Settings\larry\Local Settings\Application Data\Google\Custom Buttons\

    Cette approche est plus intéressante que la création manuelle d'un bouton personnalisé car elle utilise des requêtes POST complexes ou des redirections qui rendent difficile l'identification de l'élément url-template.

    Fichier XML du bouton personnalisé

    Les propriétés et le fonctionnement d'un bouton personnalisé sont définis dans un fichier XML avec un élément <custombuttons> dont l'espace de nom est défini sur « http://toolbar.google.com/custombuttons/ » avec un élément <button> imbriqué. Le bouton personnalisé le plus simple utilise l'élément <site>, qui définit un lien vers un site Web. Le code XML suivant produit un bouton qui ouvre http://www.wikipedia.org dans votre fenêtre de navigateur :

    <?xml version="1.0" encoding="utf-8"?>
    <custombuttons xmlns="http://toolbar.google.com/custombuttons/">
    
      <button>
        <site>http://www.wikipedia.org</site>
      </button>
    </custombuttons>
    
    REMARQUE : Vous pouvez inclure des nouvelles lignes et des espaces n'importe où dans les chaînes d'URL du fichier XML. La barre d'outils les élimine lorsqu'elle interprète le fichier. Si votre URL requiert des espaces (vous ne voulez donc pas les éliminer), vous devez les remplacer par « %20 » (si le navigateur ne l'a pas déjà fait pour vous). Parmi les exemples suivants, nombre d'entre eux illustrent l'URL saisie sur deux lignes avec une nouvelle ligne au milieu, ce qui fonctionne très bien.
    REMARQUE : Dans tous les exemples donnés ici, seule la partie du code XML comprise dans l'élément <button> est modifiée.

    Création et installation manuelles d'un bouton personnalisé

    Pour installer un bouton personnalisé sur la barre d'outils Google :

    1. Créez un bouton XML comme cela est indiqué dans les sections précédentes (et suivantes).
    2. Enregistrez le fichier XML du bouton sous :

      C:\Documents and Settings\username\Local Settings\Application Data\Google\Custom Buttons\filename.xml

      username correspond à votre nom de connexion Windows et filename est le nom que vous attribuez au fichier XML.

      Dans notre exemple Wikipedia, pour le nom de connexion « larry », enregistrez le fichier XML du bouton sous :

      C:\Documents and Settings\larry\Local Settings\Application Data\Google\Custom Buttons\wikipedia.xml

    3. Ouvrez ensuite une fenêtre Internet Explorer sur laquelle la barre d'outils Google 4.0 est installée. Un nouveau bouton sur lequel figure un point d'interrogation, comme l'illustre la capture d'écran suivante, apparaît. Cliquez sur le point d'interrogation pour accéder à Wikipedia.

    Ajout d'un titre et d'une info-bulle à un bouton

    Comme cela est illustré plus loin, utilisez l'élément <title> pour ajouter un titre à un bouton. Le titre figure à droite du bouton (Paramètres > Options > Plus > Texte des boutons> Texte sur tous les boutons). Il permet d'identifier le bouton dans la liste des boutons personnalisés (Paramètres > Options > Boutons personnalisés). S'il s'agit d'un bouton de recherche, donnez-lui un titre unique, car il correspond au nom du bouton dans la zone de recherche de la barre d'outils Google. (Par exemple, l'utilisateur peut accéder à la zone de recherche avec la combinaison de touches Alt-G, appuyer sur la flèche vers le bas pour ouvrir le menu déroulant du moteur de recherche, puis taper « w » dans la zone de recherche pour sélectionner le moteur de recherche « wikipedia ».)

    Pour ajouter une info-bulle, utilisez l'élément <description>.

    <?xml version="1.0" encoding="utf-8"?>
    <custombuttons xmlns="http://toolbar.google.com/custombuttons/">
      <button>
        <site>http://www.wikipedia.org</site>
    
        <title>Wikipedia</title>
        <description>The Free Encyclopedia</description>
      </button>
    </custombuttons>
    

    Bouton de recherche personnalisé

    La barre d'outils Google vous permet de créer un bouton permettant d'utiliser les moteurs de recherche de la plupart des sites Web, en se basant sur le terme saisi dans la zone de recherche de la barre d'outils. Les deux exemples suivants illustrent, d'une part, un bouton permettant d'effectuer des recherches dans wikipedia.org à l'aide du moteur de recherche Wikipedia, et, d'autre part, un bouton permettant d'effectuer des recherches sur Internet à l'aide du moteur de recherche Google.

    Pour ce faire, ajoutez au fichier XML du bouton un élément de recherche sous la forme <search> url-template </search>. Incluez une URL de requête de recherche à l'aide de la variable {query}, comme l'illustrent les exemples suivants. Les requêtes GET et POST sont toutes deux possibles (spécifiées à l'aide de l'attribut method). La requête GET est sélectionnée par défaut. L'URL doit être de type http: ou https:. Le type javascript: n'est pas autorisé. Trois caractères de l'élément url-template doivent être codés par échappement : inférieur à (<), supérieur à (>) et perluète (&).

    REMARQUE : Pour que le bouton s'affiche, l'élément <search> doit contenir une variable {query}.

    Bouton personnalisé pour la recherche sur Wikipedia

    Par exemple, pour créer un bouton permettant d'effectuer des recherches sur wikipedia.com à l'aide du moteur de recherche Wikipedia, commencez par une requête Wikipedia portant sur un terme le plus simple possible, comme « dog » (chien) : http://en.wikipedia.org/wiki/Special:Search?search=dog&fulltext=Search. Pour rechercher le terme saisi par l'utilisateur dans la zone de recherche de la barre d'outils à la place, remplacez « dog » par « {query} » et codez la perluète (&) par échappement de la façon suivante :

    <search>http://en.wikipedia.org/wiki/Special:Search?search={query}&amp;fulltext=Search</search>
    
    

    Si vous ajoutez cet élément de recherche au bouton précédent, vous obtenez ceci :

    <?xml version="1.0" encoding="utf-8"?>
    <custombuttons xmlns="http://toolbar.google.com/custombuttons/">
      <button>
        <site>http://www.wikipedia.org</site>
    
        <title>Wikipedia</title>
        <description>The Free Encyclopedia</description>
        <search>http://en.wikipedia.org/wiki/Special:Search?search={query}&amp;fulltext=Search</search>
    
      </button>
    </custombuttons>
    

    Remarquez que, dans l'URL, la perluète est codée par échappement de la façon suivante : « &amp; ». Il est nécessaire d'échapper les caractères perluète (&), inférieur à (<) et supérieur à (>) dans les chaînes des fichiers XML.

    Bouton personnalisé pour la recherche Google

    Pour créer un bouton permettant d'effectuer des recherches sur Internet à l'aide du moteur de recherche Google, commencez par une requête Google portant sur un terme le plus simple possible, comme « dog » (chien) : http://www.google.com/search?q=dog. Puis, remplacez « dog » par « {query} » de la façon suivante :

    <search>http://www.google.com/search?q={query}</search>
    

    Exemple :

    Recherche Slashdot

    <search>http://slashdot.org/search.pl?query={query}</search>
    

    Envoi d'une action de recherche par la méthode POST

    Pour envoyer des actions de recherche en requête POST plutôt que GET, insérez un attribut method="post" dans l'élément de recherche. Tout ce qui suit le dernier point d'interrogation sera envoyé sous forme de données de formulaire POST codées en www-url. Notez que certains sites Web utilisent des données en codage formulaire plutôt que des données en codage URL, ce que nous ne prenons pas en charge. Il est également possible d'envoyer des paramètres CGI et des données POST simultanément. Pour ce faire, utilisez deux points d'interrogation « ? ».

    Recherche « The Onion »

    Cet exemple illustre une méthode POST pour l'envoi de données POST (en surbrillance) :

    <search method="post">http://www.theonion.com/content/search/node
            ?edit%5Bkeys%5D={query}</search>
    

    Mise à jour d'un bouton personnalisé

    L'URL de téléchargement que vous utilisez pour héberger le fichier XML du bouton devient l'identifiant unique du bouton (utilisé lors des mises à jour de ce même bouton). Si vous effectuez une seconde tentative de téléchargement d'un bouton à partir de la même URL, la barre d'outils vous propose uniquement de remplacer l'ancien bouton et non d'en ajouter un nouveau.

    Parmi les cinq méthodes pour ajouter un bouton, la première et la cinquième permettent de chercher automatiquement les mises à jour. En outre, toute valeur <update> écrite dans le fichier XML est ignorée. Pour les trois autres méthodes, vous pouvez spécifier l'élément <update> dans le fichier XML pour indiquer l'emplacement des mises à jour du bouton.

    <update>http://buttons.com/updated_button.xml</update>
    

    Options du bouton

    Un bouton peut spécifier une chaîne d'options définie localement à l'aide de la balise <option>, que l'utilisateur peut facilement modifier dans la boîte de dialogue des paramètres de la barre d'outils. Cela est particulièrement utile, par exemple, dans le cas d'un bouton Météo, afin de spécifier un code postal, ou d'un bouton Bourse, afin de spécifier une valeur mobilière. Exemple :

    <?xml version="1.0" encoding="utf-8"?>
    <custombuttons xmlns="http://toolbar.google.com/custombuttons/">
      <button>
        <title>Weather</title>
        <option>
    
          <title>Zip code</title>
          <description>Enter a US zip code.  For example, 94043 is Mountain View, CA</description>
          <default>94043</default>
        </option>
    
        <site>http://www.google.com/search?q=weather+{option1}</site>
      </button>
    </custombuttons>
    

    Le titre de l'option est obligatoire. La valeur par défaut et la description sont facultatives. Utilisez toujours la variable {option1} à l'intérieur des spécifications d'un modèle d'URL afin d'insérer le texte de l'utilisateur.

    Il n'existe pas encore de technique de validation ou d'élimination des espaces blancs de l'entrée utilisateur. La variable {option1} utilisera les caractères d'échappement à l'aide de paramètres d'échappement utf-8 et cgi, comme dans le cas d'une zone de texte d'un envoi de formulaire.

    Incorporation de l'URL active

    Outre l'envoi d'une requête, vous pouvez spécifier l'URL affichée par le navigateur de trois manières différentes : {url} avec codage, {url.noescape} sans codage ou {url.host} uniquement le site Web.

    Cet exemple illustre l'utilisation de l'élément {url.noescape} pour envoyer l'URL vers archive.org afin d'y rechercher une version plus ancienne de la page actuelle. Le site archive.org requiert l'URL suivante, sans caractères d'échappement :

    <site>http://web.archive.org/web/*/{url.noescape}*</site>
    

    L'exemple suivant illustre également une recherche dans archive.org mais à l'aide de l'élément {url}:

    <site method="post">http://www.archive.org/searchresults.php?search={url}&amp;mediatype=mediatype&amp;Submit=Submit</site>
    

    Si vous souhaitez utiliser le moteur de recherche Google pour effectuer des recherches sur le site Web actuellement affiché, utilisez l'élément {url.host}. Il s'agit d'un raccourci pratique, qu'il n'est pas possible d'utiliser à partir du site Web de Google.

    <search>http://www.google.com/search?q=site:{url.host}+{query}</search>
    

    Incorporation du suffixe de domaine Google

    La barre d'outils Google dispose d'une variable {domain} permettant d'obtenir le domaine, tel que com ou co.uk. Vous trouverez le domaine de recherche dans la barre d'outils, sous Paramètres > Options > onglet Recherche > Utiliser le site Google. Il s'agit de la chaîne qui suit le terme « google. ».

    Utilisez la variable {domain} au lieu de coder la chaîne de domaine. Une recherche sur Google doit donc être rédigée de la façon suivante :

    <search>http://www.google.{domain}/search?q={query}</search>
    

    Envoi de texte sélectionné par l'utilisateur

    Vous pouvez permettre à un bouton personnalisé d'envoyer un extrait de texte seul, par exemple, un texte de la page Web sélectionné par l'utilisateur. Cela peut être utile pour un service de traduction, ou pour une application de messagerie ou de blog. Lorsque vous sélectionnez du texte, une petite icône texte apparaît sur l'icône du bouton personnalisé.

    Cette opération requiert l'élément <send>. L'URL cible de l'opération <send> peut être différente de la cible de l'opération <search>. La balise <send> doit comporter la variable {selection}, qui renvoie au texte seul actuellement sélectionné dans le navigateur :

    <send>http://www.google.com/search?hl=en&amp;lr=&amp;q=define%3A+{selection}</send>
    

    Les boutons personnalisés pour les opérations d'envoi figurent également dans le menu contextuel (bouton droit de la souris) du navigateur lorsque du texte est sélectionné.

    Vérification de l'existence d'une variable

    Au fur et à mesure de l'évolution de la barre d'outils, des variables d'URL supplémentaires sont susceptibles d'être mises en œuvre. Afin d'assurer une compatibilité totale (ascendante et descendante) avec ces nouvelles variables, la syntaxe {a?b:c} sera disponible dans tous les analyseurs (parsers) prenant en charge les boutons personnalisés, avec la sémantique suivante :

    {param_to_be_tested?use this text if the param is implemented:use this text if not}
    

    En clair, le créateur d'un bouton personnalisé peut utiliser en toute sécurité une nouvelle fonctionnalité, et cela permet également la compatibilité ascendante avec des analyseurs plus anciens qui ne prennent pas en charge cette nouvelle fonctionnalité. Par exemple, imaginons que la variable {locale} vienne d'être créée. Un modèle d'URL comme celui-ci permet de s'assurer que la variable n'a eu aucun effet sur des barres d'outils plus anciennes :

    <site>http://www.google.com/{locale??hl={locale}}</site>
    

    Si la barre d'outils prend en charge la variable {locale}, cela donnerait :

    <site>http://www.google.com/?hl=en</site>
    

    Sinon :

    <site>http://www.google.com/</site>
    

    Vous pouvez imbriquer dix niveaux d'expressions {a?b:c}, à condition que les imbrications soient placées après le « ? ». Cela ne pose pas de problème.

    <site>http://www.google.com/{locale??hl={domain?{domain}:{query}}}</site>
    
    

    Notez également qu'à chaque fois que vous utilisez un caractère d'échappement et que celui-ci n'est pas reconnu, le parser le remplace par une chaîne vide. Par conséquent, Bonjou{bla bla}r à tous, donnerait simplement Bonjour à tous. En outre, en cas de déséquilibre dans le nombre d'accolades « { » ou « } », ou tout autre problème de parsing, l'intégralité de l'URL est réinitialisée (chaîne vide).

    Comment améliorer l'apparence des icônes

    La plupart des icônes utilisées comme icônes de favoris (favicons) peuvent également être utilisées comme icônes de boutons personnalisés. Ces icônes comprennent les images BMP 16 x 16, ICO, GIF et JPEG. Il vous suffit de les coder en texte ASCII à l'aide d'un codage en base64. Sur Internet, plusieurs sites peuvent réaliser le codage à votre place. Par exemple, celui-ci. Sur ce site, utilisez le bouton « Browse » (Parcourir) pour sélectionner le fichier que vous voulez coder, puis cliquez sur le bouton « Convert the source data » (Convertir les données source) pour lancer le codage. Javascript et PHP disposent aussi de commandes sur une seule ligne pour le codage en base64.

    Exemple d'icône Gmail en base64, avec un élément <icon> :

        <icon mode="base64" type="image/x-icon">
    AAABAAEAEBAAAAEAIABoBAAAFgAAACgAAAAQAAAAIAAAAAEAIAAAAAAAQAQAAAAAAAAAAAAAAAAA
    AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
    AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
    AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
    AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA4ONr/ODja/6en+f+np/n/p6f5/6en+f+np/n/p6f5
    /6en+f+np/n/p6f5/6en+f+np/n/p6f5/zg42v84ONr/ODja/zg42v/i4v//////////////////
    /////////////////////////////////////+Li//84ONr/ODja/zg42v84ONr/p6f5/+Li////
    /////////////////////////////////////////+Li//+np/n/ODja/zg42v84ONr/ODja/+Li
    //+np/n/4uL/////////////gYHy/4GB8v///////////+Li//+np/n/4uL//zg42v84ONr/ODja
    /zg42v//////4uL//6en+f+2tv//gYHy/1pa6f9aWun/gYHy/7a2//+np/n/4uL///////84ONr/
    ODja/zg42v84ONr///////////+2tv//gYHy/1pa6f84ONr/ODja/1pa6f+BgfL/trb/////////
    ////ODja/zg42v84ONr/ODja////////////gYHy/1pa6f84ONr/trb//7a2//84ONr/Wlrp/4GB
    8v///////////zg42v84ONr/ODja/zg42v//////gYHy/1pa6f84ONr/trb/////////////trb/
    /zg42v9aWun/gYHy//////84ONr/ODja/zg42v84ONr/gYHy/1pa6f84ONr/trb/////////////
    //////////+2tv//ODja/1pa6f+BgfL/ODja/zg42v84ONr/ODja/zg42v84ONr/trb/////////
    /////////////////////////7a2//84ONr/ODja/zg42v84ONr/ODja/zg42v84ONr/gYHy/6en
    +f+np/n/p6f5/6en+f+np/n/p6f5/6en+f+np/n/gYHy/zg42v84ONr/ODja/wAAAAAAAAAAAAAA
    AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
    AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
    AAAA//8AAP//AAD//wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
    AAD//wAA//8AAA==
        </icon>
    

    Les icônes de boutons personnalisées peuvent être d'une taille supérieure à 16 x 16, mais la barre d'outils les ramène à la taille 16 x 16. Il est donc préférable de ne pas les rendre plus grandes que nécessaires, car elles seraient moins esthétiques que si vous les aviez mises à l'échelle à l'aide d'une application graphique de qualité.

    Les icônes les plus esthétiques sont obtenues en utilisant 24 bits de couleur (RVB) et 8 bits alpha, enregistrées en tant qu'icônes RVBA de type XP. Vous pouvez enregistrer l'icône en tant que fichier PNG 16 x 16 avec transparence alpha, puis la convertir en icône 16 x 16 de type XP (à l'aide d'un programme comme IconWorkshop), et enfin la coder en base64. Les fichiers PNG ne sont pas directement pris en charge car Windows ne peut les gérer en mode natif sans les lier à de nombreux autres éléments.

    Vous devez utiliser un canal alpha car toutes les barres d'outils des utilisateurs ne sont pas dotées d'une couleur d'arrière-plan identique à la vôtre. Windows XP permet aux utilisateurs de personnaliser leur modèle de couleurs, y compris pour l'arrière-plan de la barre d'outils. Vous pouvez contourner cette difficulté en créant une icône carrée sans transparence, mais cette solution est toutefois moins esthétique. Les canaux alpha de couleur unique, comme les images GIF, comportent des bordures arrondies et granuleuses, contrairement aux icônes correctement conçues à l'aide d'un canal alpha, comme celles de la barre d'outils Google Toolbar ou d'Internet Explorer.

    Icônes et info-bulles avec mise à jour automatique

    L'une des fonctionnalités les plus intéressantes des boutons personnalisés réside dans la mise à jour de leurs icônes et info-bulles à partir d'un serveur distant, à intervalles réguliers. À cet effet, les boutons utilisent un flux RSS. Cela permet d'utiliser les boutons comme système de notification ou comme icône d'état (par exemple; pour la météo ou tout ce que vous pouvez imaginer). Un bouton peut également être doté d'un menu déroulant contenant des éléments, eux-mêmes dotés de texte ou d'icônes. Chaque élément du menu peut avoir sa propre URL dynamique, lancée par clic. Des exemples sont fournis dans la section suivante.

    Ajout d'un flux RSS

    Les flux RSS utilisent l'élément <feed>. Voici un exemple de flux d'actualités provenant de CNN.

    <feed refresh-interval="1800">http://rss.cnn.com/rss/cnn_topstories.rss</feed>
    

    Le protocole permettant d'obtenir ces flux de mise à jour est Atom 1.0, Atom 0.3, RSS 2.0 ou RSS 1.0. Les flux standard devraient fonctionner normalement.

    Utilisation d'un flux pour la mise à jour de l'icône ou de l'info-bulle d'un bouton

    Pour effectuer, à partir d'un flux, la mise à jour d'une icône de la barre d'outils ou de son info-bulle, vous devez ajouter une extension spécifique à la barre d'outils RSS ou ATOM à l'aide d'un espace de nom. Exemple de bouton « perceptif » connecté à un flux :

    <?xml version="1.0" encoding="utf-8"?>
    <custombuttons xmlns="http://toolbar.google.com/custombuttons/">
      <button>
        <title>Mood ring</title>
        <description>Your virtual mood ring</description>
    
        <site>http://www.google.com/search?q=mood+ring</site>
        <feed menu="false" refresh-interval="900">
              http://www.example.com/custombuttons/samples/feeds/mood</feed>
      </button>
    </custombuttons>
    
    

    Remarquez la mention menu="false" qui indique que ce flux est uniquement utilisé pour mettre à jour l'icône et l'info-bulle et non pour créer des sous-éléments dans le menu déroulant.

    En situation réelle, le flux donnerait :

    <?xml version='1.0'?>
    <feed xmlns='http://www.w3.org/2005/Atom' 
        xmlns:gtb='http://toolbar.google.com/custombuttons/'>
    <id>http://www.example.com/custombuttons/samples/feeds/mood</id>
    
    <title>Mood</title>
    <link href='http://www.google.com/search?q=+ring' />
    <link rel='self' 
        href='http://www.example.com/custombuttons/samples/feeds/mood' />
    <gtb:description>Bluegreen:
    Inner emotions charged, somewhat relaxed</gtb:description>
    <gtb:icon mode="base64" type="image/x-icon">
    AAAAAAMAAAABAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACAAAAAwAAAAMAA
    AAABAAEAEBAAAAEAIABoBAAAFgAAACgAAAAQAAAAIAAAAAEAIAAAAAAAQAQAAAAAAAAAAAAAAAAA
    AAAAAAAAAAAGAAAAHAAAAEAAAABhAAAAcwAAAHQAAABpAAAAVQAAAD4AAAApAAAAGAAAAAoAAAAD
    AAAAAQAAAAAAAAAAAAAAESZIXl4zdJvAXbHS8m3C3f9LnrrLFUtsmwILEX4AAABzAAAAYQAAAEcA
    AAAqAAAAEwAAAAcAAAACAAAAACs9RTNOjrDtW6nS/53u/f+n/P//hej//2bP/P9Fq93wHGaNrxEv
    O4kAAAB6AAAAXwAAADwAAAAfAAAADAAAAANihaWST6XK/0h/kcAdKCyWKTtAgVJ/kIhytNKse873
    9E+w6v9RuN39SXuJpgQHCIoAAAB2AAAAUQAAACsAAAAPb6nU7mK65v9jqs76KkNPqAUICJoAAACE
    AAAAaxUgJWBkrMiwsvv+//D+/v+y1NniIj1FnAAAAIgAAABcAAAALHS74PV1zPn/c835/1Oezv9N
    iq7vNVRjrxUiJ5kBAgORAQICh3uLjZz3+vr1+f///4PL5/wvVmusAAAAigAAAFNyu+TPdtL8/0Cp
    7v8ng8X/CFOH/ytpjv86gJ//R46z+Th6jsovVmCsd56pxNf2/f9TuPH/W7fs/ypGV6UAAAByf77Y
    r02y7P9Zwfb/puH3/y+AtP8jZ5f/KWKH/0p7hP+ZrVr/zcUt/9vMKf/bzSz/tsBP/3OzrP9kl7Pp
    AAAAgHGdpThatuT/0fn+//b///+V0uv/NICu/4mvfP/czjL/3M0v/9rMKP/dzzT/3c83/9vNLf/b
    zS//nrWA/gAAAIMAMzMFbrrd2d/+///5////t+n6/4q6nf/czzX/3tA+/97QPf/czjP/3dA7/97R
    Qv/czjD/3M4z/9DHLPoAAAB/AAAAAWShtUix5+//5v7+/5Hf7//Bvjn/3M0v/9/SSP/g1FL/39RR
    /+DVWv/e0kf/3tFA/9zNL//bzCj/AAAAbwAAAAAAAAADcq7Fmpzo8f9rsL3/2ssl/93POf/f0kj/
    49pu/+ffhP/q45b/49pp/97SSv/czS//yb0q4wAAAE8AAAAAAAAAAF54hhNrq77BXpCj/7+7Of/c
    zjH/3tFH/+bdeP/w7cv/9PLa/+zlnf/g1VP/1so5/mBfJHsAAAArAAAAAAAAAAAAAAABa5GgIHWs
    t/dymG3/3tE//9/UUv/o4Ij/9PHT//v67P/v6a3/08xY/3uMX6UAAAAuAAAAEAAAAAAAAAAAAAAA
    AAAAAAKSvb9YSoWa+WyagP+wv2X/4NRO/+ngfv/m4Zf/rLeB+lpubIkAAAAlAAAADgAAAAMAAAAA
    AAAAAAAAAAAAAAAAAAAAAoqvuDxkkp2gYo+c51mHkv9lk5v/Y4eNtlBfaEgAAAAWAAAACQAAAAIA
    AAAAAAMAAAABAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACAAAAAwAAAAMAA
    AADgAAAA8AEAAA==
    </gtb:icon>
    
    </feed>
    

    L'exemple ci-dessus illustre un flux Atom 1.0, avec l'espace de nom des boutons Google personnalisés spécifiés de la façon suivante :

    xmlns:gtb='http://toolbar.google.com/custombuttons/'
    

    Pour ignorer l'info-bulle associée au bouton, spécifiez :

    <gtb:description> new-description </gtb:description>
    
    

    Pour ignorer l'icône associée au bouton, spécifiez :

    <gtb:icon> icon-base64-code </gtb:icon>
    

    Le script PHP à la base de ce système complexe d'analyse « perceptive » se présente comme suit :

    <?php
    
    header('Content-type: text/xml');
    
    switch(rand(1, 7)) {
      case 1:
        $icon = "amber.ico";
        $desc = "Amber:\nNervous, on edge, uncertain";
        break;
    
      case 2:
        $icon = "black.ico";
        $desc = "Black:\nTense, stressed, working too hard";
        break;
    
      case 3:
        $icon = "blue.ico";
        $desc = "Blue:\nComfortable, breeze, at rest, loveable";
        break;
    
      case 4:
        $icon = "bluegreen.ico";
        $desc = "Bluegreen:\nHeightened inner emotional state, moderately relaxed";
        break;
    
      case 5:
        $icon = "gray.ico";
        $desc = "Gray:\nAnxious, ill at ease, strained";
        break;
    
      case 6:
        $icon = "green.ico";
        $desc = "Green:\nSteady, stable, no emotional turmoil";
        brea;
    
      case 7:
        $icon = "purple.ico";
        $desc = "Dark Blue:\nImpassioned, delighted, whiff of romance";
        break;
    }
    
    $icon = base64_encode(file_get_contents($icon));
    
    echo "<?xml version='1.0'?>";
    echo "\n<feed xmlns='http://www.w3.org/2005/Atom' xmlns:gtb='http://toolbar.google.com/custombuttons/'>";
    echo "\n<id>http://www.example.com/custombuttons/samples/feeds/mood</id>";
    echo "\n<title>Mood</title>";
    echo "\n<link href='http://www.google.com/search?q=$mood+ring' />";
    echo "\n<link rel='self' href='http://www.example.com/custombuttons/samples/feeds/mood' />";
    echo "\n<gtb:description>$desc</gtb:description>";
    echo "\n<gtb:icon mode='base64' type='image/x-icon'>$icon</gtb:icon>";
    echo "\n</feed>";
    
    ?>
    
    

    Les icônes doivent se trouver dans le même dossier que le script.

    Utilisation d'un flux pour la mise à jour des icônes du bouton et du menu déroulant

    Vous pouvez également ajouter des icônes personnalisées de type serveur aux éléments du menu déroulant du flux. Voici un exemple de bouton météo doté d'un flux avec menu déroulant (paramètre par défaut) mais spécifiant également refresh-menuitem="false" pour masquer l'élément de menu « Actualiser » à chaque connexion réussie avec le serveur. Cela permet d'obtenir une présentation plus claire.

    <?xml version="1.0" encoding="utf-8"?>
    <custombuttons xmlns="http://toolbar.google.com/custombuttons/">
      <button>
        <title>Weather 94043</title>
        <description>Weather updates for Mountain View, CA</description>
    
        <site>http://www.google.com/search?q=weather+94043&num=1</site>
        <feed refresh-interval="3600" refresh-menuitem="false">
            http://www.example.com/custombuttons/samples/feeds/weather?zip=94043</feed>
      </button>
    
    </custombuttons>
    

    L'exemple suivant présente un flux météo, avec une icône personnalisée en regard de chaque élément du menu déroulant (pour plus de clarté, la plupart des éléments relatifs au codage de l'icône en base64 ont été supprimés). Vous pouvez voir l'exemple ci-dessus à l'adresse suivante : http://www.example.com/custombuttons/samples/feeds/weather?zip=94043

    <?xml version='1.0'?>
    <feed xmlns='http://www.w3.org/2005/Atom' 
        xmlns:gtb='http://toolbar.google.com/custombuttons/'>
    <id>http://www.example.com/custombuttons/samples/feeds/weather</id>
    
    <title>Weather Mountain View, CA</title>
    <link href='http://www.google.com/search?q=weather+94043/' />
    <link rel='self'
        href='http://www.example.com/custombuttons/samples/feeds/weather' />
    <gtb:description>Mountain View, CA
    63F Mostly Cloudy
    Humidity: 48%
    Wind: NW at 8 mph</gtb:description>
    <gtb:icon mode='base64' type='image/x-icon'>
    R0lGODlhKAAoANUAAEuc/Pz8/Fik/Ii00k9daZGPivLy8tbW1k2R0uvr6wZj3HSq0f/QMMfHx7a2
    tj2F0fu0EePj4yx81neUp4J/eKanphJq3IJtOGB3iI3C5BFt5B5XnWis7H2346jO5/6+IWKo8923
    ... and so on...
    </gtb:icon>
    
    <entry>
    <title>Today: Mostly Cloudy 65 | 50</title>
    
    <link href='http://www.google.com/search?q=weather+94043/' />
    <id>http://www.example.com/custombuttons/samples/feeds/weather/0</id>
    <gtb:icon mode='base64' type='image/x-icon'>
    R0lGODlhKAAoANUAAEuc/Pz8/Fik/Ii00k9daZGPivLy8tbW1k2R0uvr6wZj3HSq0f/QMMfHx7a2
    tj2F0fu0EePj4yx81neUp4J/eKanphJq3IJtOGB3iI3C5BFt5B5XnWis7H2346jO5/6+IWKo8923
    ... and so on...
    </entry>
    
    <entry>
    <title>Thu:  66 | 51</title>
    <link href='http://www.google.com/search?q=weather+94043/' />
    <id>http://www.example.com/custombuttons/samples/feeds/weather/1</id>
    <gtb:icon mode='base64' type='image/x-icon'>
    R0lGODlhKAAoAPcAAAAAAP///4WOwPT1+tDT3unr8sHG1ff5/6Wy0mZ8rGqAr3mJrJakxa+zvHSK
    tcDBw1R2slBql110njBXjztmqS9OfjtekTZWhGeJuoqctklLTgJYyQJQtQ9hzhRr3BZlzBVRoS1S
    ... and so on...
    </gtb:icon>
    
    </entry>
    
    <entry>
    <title>Fri:  67 | 51</title>
    <link href='http://www.google.com/search?q=weather+94043/' />
    <id>http://www.example.com/custombuttons/samples/feeds/weather/2</id>
    <gtb:icon mode='base64' type='image/x-icon'>
    
    R0lGODlhKAAoANUAAObm52ms7k2Q0Uuc/Fmk+v2zDoS01HOp0avP5tvb26CPXQZj3DqG14yLh05Y
    Yf/IKv/VN3mCiMPDw6SkpCt82GhxePz8/JG+2pd5NRZu3hBq3fb29rCAFrm5uSN549OWE4WltqHI
    ... and so on...
    </gtb:icon>
    </entry>
    <entry>
    <title>Sat:  67 | 50</title>
    <link href='http://www.google.com/search?q=weather+94043/' />
    
    <id>http://www.example.com/custombuttons/samples/feeds/weather/3</id>
    
    <gtb:icon mode='base64' type='image/x-icon'>
    R0lGODlhKAAoANUAAObm52ms7k2Q0Uuc/Fmk+v2zDoS01HOp0avP5tvb26CPXQZj3DqG14yLh05Y
    Yf/IKv/VN3mCiMPDw6SkpCt82GhxePz8/JG+2pd5NRZu3hBq3fb29rCAFrm5uSN549OWE4WltqHI
    ... and so on...
    </gtb:icon>
    </entry>
    </feed>
    

    Pour les flux de la barre d'outils, vous pouvez également utiliser les mêmes espaces de nom et descriptions ou les balises « http://toolbar.google.com/custombuttons/ » dans les flux RSS 1.0, RSS 2.0, Atom 1.0 et Atom 0.3.

    Support multilingue

    Un bouton personnalisé peut gérer des URL de substitution, des icônes et du texte en fonction des paramètres régionaux spécifiques de la barre d'outils. Les deux méthodes possibles sont répertoriées ci-dessous. Nous vous recommandons d'utiliser la première méthode.

    Utilisation d'un attribut de paramètres régionaux

    La méthode recommandée consiste à créer une liste de balises XML, chaque balise utilisant un attribut locale="iso-name" avec l'élément iso-name pour les paramètres régionaux en question. Exemple d'un bouton avec des URL et des descriptions en français et en espagnol :

    <?xml version="1.0" encoding="utf-8"?>
    <custombuttons xmlns="http://toolbar.google.com/custombuttons/">
      <button>
        <title>Wikipedia</title>
        <site>http://www.wikipedia.org</site>
    
        <site locale="fr">http://fr.wikipedia.org</site>
        <site locale="es">http://es.wikipedia.org</site>
        <description>The Free Encyclopedia</description>
    
        <description locale="fr">L'encyclopdie libre</description>
        <description locale="es">La enciclopedia libre</description>
      </button>
    </custombuttons>
    
    

    Si les paramètres régionaux de la langue actuelle de la barre d'outils ne se trouvent pas directement dans la balise XML, la première balise de la liste ci-dessus est utilisée comme balise par défaut.

    Utilisation de la variable {locale}

    L'autre méthode consiste à utiliser la variable {locale} incorporée dans une URL, comme http://{locale}/wikipedia.org. Cette méthode fonctionne très bien si l'ensemble des paramètres régionaux qu'elle évalue pointe directement vers les différents sites Web disponibles (ce qui est le cas pour Google.com). Par contre, cela ne sera pas le cas pour la plupart des utilisateurs. Certains sites Web sont dotés de paramètres régionaux que la barre d'outils ne prend pas encore en charge. Par exemple, Wikipedia dispose d'une version en polonais (http://pl.wikipedia.org), mais cette langue (pl) n'est pas encore prise en charge par la barre d'outils. Les utilisateurs polonais ne sont donc pas en mesure d'accéder à ce site par le biais de la barre d'outils. À l'inverse, la barre d'outils est disponible en brésilien (pt-BR), mais Wikipedia ne dispose pas d'une version de site pour ces paramètres régionaux. Vous pouvez également combiner des instructions avec l'attribut locale, ainsi qu'avec la variable {locale} si vous le souhaitez. Dans ce cas, le premier attribut demeure le paramètre par défaut.

    Tableau des paramètres régionaux ISO

    Les paramètres régionaux actuellement pris en charge par la barre d'outils sont les suivants :

    Paramètres régionaux ISO Langue
    en Anglais
    da Danois
    de Allemand
    es Espagnol
    fi Finnois
    fr Français
    it Italien
    ja Japonais
    ko Coréen
    nl Néerlandais
    no Norvégien
    pt-BR Portugais (Brésil)
    ru Russe
    sv Suédois
    zh-CN Chinois (simplifié)
    zh-TW Chinois (traditionnel)

    Hébergement d'un bouton personnalisé

    Où héberger votre bouton

    L'URL de téléchargement que vous utilisez pour héberger le fichier XML du bouton est importante puisqu'elle devient l'identifiant unique du bouton, utilisé lors des mises à jour de ce même bouton. Si vous effectuez une seconde tentative de téléchargement d'un bouton à partir de la même URL, la barre d'outils vous propose uniquement de remplacer l'ancien bouton et non d'en ajouter un nouveau. Pour plus d'informations, consultez la rubrique Mise à jour d'un bouton personnalisé.

    Ajout de votre bouton à la Galerie des boutons Google

    Ajoutez votre nouveau bouton à la Galerie des boutons Google afin de le faire connaître à un grand nombre d’utilisateurs. Votre fichier XML doit déjà être hébergé quelque part (la Galerie des boutons établit un lien direct avec le fichier) et doit être conforme à nos consignes de rédaction.

    Si vous avez créé un bouton pour un site dont vous êtes propriétaire, vous devez héberger votre fichier XML sur le même domaine que votre site. Les boutons de la Galerie des boutons Google sont identifiés comme étant « officiels » s'ils sont hébergés sur le domaine auquel le bouton permet d'accéder. Les utilisateurs sont ainsi en mesure de trouver plus facilement le bouton officiel de votre site.

    Une fois que vous avez effectué ces opérations, remplissez le formulaire de demande de la Galerie des boutons afin d'informer Google de l'existence de votre bouton.

    Lien vers votre bouton à partir de votre site

    Vous pouvez faire en sorte que votre bouton soit disponible sur votre site en créant un lien d'installation. Lorsqu'un utilisateur de la barre d'outils Google 4 clique sur le lien, il est invité à installer votre bouton. Si l'utilisateur ne dispose pas d'une version compatible de la barre d'outils, le lien le dirige alors vers la page de téléchargement de la barre d'outils Google.

    Un développeur peut créer un lien d'installation à l'aide de la syntaxe d'URL suivante :

    http://toolbar.google.com/buttons/add?url=url

    dans laquelle l'élément url pointe vers le fichier XML du bouton personnalisé. Par exemple, le lien suivant permet d'installer un bouton Slashdot.com :

    <a href="http://toolbar.google.com/buttons/add?url=http://www.slashdot.org/slashdot_button.xml">Add</a>

    Le libellé de ce lien est « Ajouter ». Lorsqu'un utilisateur clique sur ce lien, le bouton Slashdot.com est installé sur sa barre d'outils Google.

    L'URL Google ci-dessus est en fait un déclencheur signalant à la barre d'outils qu'elle doit installer un bouton personnalisé. Si l'utilisateur ne dispose pas d'une version compatible de la barre d'outils, il est alors invité à l'installer. Une fois la barre d'outils installée, le bouton personnalisé est ajouté automatiquement.

    Gestion de votre trafic de flux

    Le trafic Web peut se révéler problématique si vous utilisez des flux. Si vous pensez que votre bouton aura du succès et qu'il génèrera un trafic important, il ne doit pas orienter son flux vers un serveur limité en bande passante. Le serveur risque d'être saturé par les requêtes d'actualisation.

    Le bouton personnalisé dispose de son propre attribut de fréquence d'actualisation pour les flux. La barre d'outils respecte le délai d'« Expiration » fourni par le serveur dans l'en-tête HTTP. Ce paramètre écrase le paramètre de fréquence d'actualisation du bouton. Si votre serveur est surchargé, vous pouvez augmenter le délai d'« Expiration » afin de réduire la charge. Par exemple, si un bouton est défini pour une actualisation toutes les heures, le délai d'« Expiration » peut être défini pour une actualisation quotidienne, ce qui limite radicalement le trafic (en réduisant certes la fréquence d’actualisation du bouton).

    Exemple de script PHP permettant de définir le délai Expires sur une semaine :

    <?php
    $expires = gmdate("D, d M Y H:i:s", time() + 3600 * 24 * 7) . " GMT";
    Header("Expires: " . $expires);
    ?>
    

    Exemple de réponse HTTP en provenance du serveur :

    HTTP/1.1 200 OK
    Date: Thu, 05 Jan 2006 23:39:54 GMT
    Server: Apache/2.0.47 (Red Hat Linux)
    Accept-Ranges: bytes
    X-Powered-By: PHP/4.3.2
    Expires: Thu, 12 Jan 2006 23:39:54 GMT
    Transfer-Encoding: chunked
    Content-Type: text/html
    

    Références

    XML

    Le fichier XML d'un bouton personnalisé est structuré de la façon suivante :

    <?xml version="1.0" encoding="utf-8"?>
    <custombuttons xmlns="http://toolbar.google.com/custombuttons/">
    
      <button>
        <!-- XML elements -->
      </button>
    </custombuttons>
    

    Les éléments XML suivants peuvent figurer au sein d'un élément <button>. Tout élément (à l'exception de <update>) peut figurer plusieurs fois, du moment que chacun d'entre eux est affecté à des paramètres régionaux différents.

    <title> texte </title>
    Titre du bouton de recherche personnalisé vu par l'utilisateur dans la liste des boutons personnalisés (Paramètres > Options > Boutons personnalisés) ou, éventuellement, en regard du bouton. Cette valeur doit être unique car elle fera également office de mot clé par défaut si elle apparaît en tant que type de recherche.
    Cet élément prend en charge le même attribut locale que l'élément <search> ci-dessous.
    Consultez l'exemple <title>.
    <description> info-bulle </description>
    Texte de l'info-bulle de la recherche personnalisée visible par l'utilisateur lorsque le pointeur de sa souris passe au-dessus de cet élément. Il s'agit également de la description que l'utilisateur voit après avoir téléchargé le bouton à partir d'un site Web.
    Cet élément prend en charge le même attribut locale que l'élément <search> ci-dessous.
    Consultez l'exemple <description>.
    <site> url </site>
    Autre URL vers laquelle naviguer lorsque la zone de recherche ne contient pas de nouveau texte. Les protocoles admis sont http: et https: pour des raisons de sécurité. Les variables suivantes au sein de cette URL seront développées : {domain}, {url}, {url.noescape}, {url.host} et {locale}.
    L'élément <site> prend en charge les mêmes attributs method et locale que l'élément <search> ci-dessous.
    Consultez l'exemple <site>.
    <search> modèle-url </search>
    URL à laquelle le navigateur accède et sur laquelle une recherche est lancée lorsque l'utilisateur clique sur le bouton si la zone de recherche contient un « nouveau » terme. (« Nouveau » signifie que la zone de recherche est active.) L'URL doit être au format http: ou https:. Le format javascript: n'est pas autorisé. La variable {query} est obligatoire dans le modèle de recherche (et n'est pas autorisée dans les autres modèles d'URL). Cet élément est facultatif et peut donc être omis si ce bouton ne doit pas figurer dans la liste des boutons de recherche.
    L'élément de recherche peut définir les attributs suivants :
    method="post"|"get"
    Le paramètre par défaut est « get ». Définissez ce paramètre sur « post » si vous souhaitez utiliser la méthode POST lorsque vous envoyez des données de formulaire en codage URL. La méthode de codage doit être application/x-www-formulaire-codageurl. Lorsqu'une recherche est effectuée, l'intégralité du texte qui suit le dernier point d'interrogation « ? » est envoyé sous la forme de données POST.
    locale="en"|"da"|"de"|"es"|"fi"|"fr"|"it"|"ja"|"ko"|"nl"|"no"|"pt-BR"|"ru"|"sv"|"zh-CN"|"zh-TW"
    Ces attributs définissent les paramètres régionaux pour lesquels cet élément est en mesure de fournir une URL de substitution. Veillez à inclure le nom des paramètres régionaux ISO, comme locale="fr". Vous devez normalement définir plusieurs éléments, chacun ayant son propre attribut de paramètres régionaux et sa propre URL de substitution. (Lorsque cet attribut est utilisé conjointement à d'autres éléments XML, il peut définir une icône ou un texte différent.) Consultez les exemples de paramètres régionaux et le tableau des paramètres ISO
    Consultez l'exemple <search>.
    <send> modèle-url </send>
    URL facultative à laquelle le navigateur accède lorsque la zone de recherche ne contient aucun texte et que l'utilisateur a sélectionné du texte dans la fenêtre du navigateur. La variable {selection} est obligatoire dans le modèle d'envoi (elle n'est pas autorisée dans les autres URL).
    L'élément <send> prend en charge les mêmes attributs method, charset et locale que l'élément <search> ci-dessus.
    Consultez l'exemple <send>.
    <icon> codage-base64 </icon>
    Bits réels d'un fichier .ico de type Windows, de préférence une image de type XP 16 x 16 RVBA 32 bits, utilisée par de nombreux sites comme fichier favicon.ico. Étant donné qu'il s'agit d'une valeur binaire, elle doit être codée en base64. Si aucune icône n'est présente, une valeur par défaut sera choisie. Les images .ico de type XP 16 x 16 conçues à l'aide d'un canal alpha sont préférables, mais les images standard ICO, JPG, BMP et GIF, de tailles arbitraires et qui seront ramenées au format 16 x 16, sont également prises en charge. L'icône RVBA XP fonctionne sur tous les systèmes d'exploitation avec lesquels la barre d'outils Google est compatible. Il n'est donc pas nécessaire de créer d'icône de remplacement en 256 ou 16 couleurs. Le format PNG n'est pas pris en charge.
    Les attributs mode et type ne sont pas nécessaires, mais rendent l'édition plus facile dans un éditeur XML capable de les interpréter :
    mode="base64"
    Codage de l'icône.
    type="image/x-icon"
    Type de l'image.
    Cet élément prend en charge le même attribut locale que l'élément <search> ci-dessus.
    Consultez l'exemple <icon>.
    <feed> url </feed>
    Définit une URL pour un fichier XML RSS 2.0 ou Atom Feed 0.3/1.0. Cet élément permet d'ouvrir un menu déroulant avec des titres de flux RSS, des descriptions et des liens, de la même façon que les favoris RSS de Firefox, qui sont automatiquement mis à jour (procédure non initiée par l'utilisateur). Cet élément est facultatif et ne sera pas utilisé par la plupart des recherches personnalisées. Les variables {domain} et {locale} peuvent également être utilisées dans les flux.
    Cet élément accepte les attributs suivants :
    menu="true"|"false"
    Affectez la valeur « false » pour masquer le menu déroulant des entrées du flux. La valeur par défaut est « true ».
    refresh-interval="secs"
    Nombre de secondes d'attente avant un nouveau chargement du flux. Le délai par défaut est de 3600 secondes (1 heure). L'intervalle de mise à jour ne sera pas inférieur à une minute, même si cette valeur est inférieure à 60.
    refresh-onclick="true"|"false"
    Affectez la valeur « true » pour effectuer un nouveau chargement chaque fois que l'utilisateur clique sur le bouton. La valeur par défaut est « false ».
    google-service="true"|"false"
    Affectez la valeur « true » dans le cas d'un service lié à un compte Google, indiquant que le service est disponible uniquement si un utilisateur s'est connecté à Google. Une actualisation s'effectue lorsque la connexion est détectée. La déconnexion a pour effet d'effacer les éléments du menu.
    Cet élément prend en charge le même attribut locale que l'élément <search> ci-dessus.
    Consultez l'exemple <feed>.
    <feed-icon> codage-base64 </feed-icon>
    Icône de substitution à afficher lorsque le flux dispose de nouveaux éléments (format identique à <icon>). Lorsqu'un utilisateur clique sur un bouton, l'icône normale s'affiche de nouveau jusqu'au prochain flux. Un serveur de flux peut définir une icône directement dans la réponse Atom Feed ou RSS 2.0. Dans ce cas, l'élément <feed-icon> ou <icon> bénéficie d'une priorité de niveau deux.
    Cet élément prend en charge le même attribut locale que l'élément <search> ci-dessus.
    (Aucun exemple <feed-icon> n'est inclus, mais vous pouvez, pour référence, consulter l'exemple <icon>.)
    <feed-description> info-bulle </feed-description>
    Description de substitution à afficher dans l'info-bulle lorsque le flux dispose de nouveaux éléments. Lorsqu'un utilisateur clique sur un bouton, la description normale s'affiche de nouveau jusqu'au prochain flux.
    Cet élément prend en charge le même attribut locale que l'élément <search> ci-dessus.
    (Aucun exemple <feed-description> n'est inclus, mais vous pouvez, pour référence, consulter l'exemple <description>.)
    <update> url </update>
    URL à partir de laquelle ce bouton a été téléchargé et à partir de laquelle le bouton de mise à jour obtiendra un fichier XML de substitution si l'utilisateur clique sur le lien à mettre à jour (Paramètre > Options > Boutons personnalisés > sélectionner un bouton > Modifier > Télécharger la dernière version). Pour les environnements Web ne provenant pas de google.com, cette URL sera écrasée par l'URL à partir de laquelle le bouton a réellement été téléchargé. Il s'agit du seul élément du bouton personnalisé qui ne peut être doté d'un attribut de paramètres régionaux.
    Voir <update> example.
    <option> sous-éléments </option>
    Spécifie une chaîne d'option définie localement, que l'utilisateur peut facilement modifier dans la boîte de dialogue des paramètres de la barre d'outils. La valeur est renvoyée dans la variable {option1}. Cet élément peut être doté de trois sous-éléments, le premier étant obligatoire :
    <title>
    Nom de l'option. L'utilisateur voit ce nom dans la boîte de dialogue des paramètres de la barre d'outils. Ce sous élément est obligatoire.
    <description>
    Description de cette option. Cette description est visible par l'utilisateur. Chaque option peut être dotée de plusieurs descriptions. Ce sous-élément est facultatif.
    <default>
    Valeur par défaut de la balise {option1}. Cette valeur est utilisée si l'utilisateur ne saisit pas de valeur. Ce sous-élément est facultatif.
    Consultez l'exemple <option>.

    Caractères d'échappement

    Les chaînes des fichiers XML (et HTML) requièrent que les trois caractères suivants soient codés par échappement, comme l'illustrent les entités HTML suivantes :

    Caractère Chaîne avec caractères d'échappement
    & &amp;
    > &gt;
    < &lt;

    Variables

    REMARQUE : Une syntaxe conditionnelle {a?b:c} existe pour les variables qui permettent une compatibilité en amont et en aval. Pour plus d'informations, consultez la rubrique Test de l'existence d'une variable.

    Les variables suivantes, ou paramètres d'échappement, sont utilisées dans les éléments répertoriés dans le champ d'application spécifié. Par exemple, {query} peut uniquement être utilisé dans l'élément <search>.

    {query}
    Renvoie la chaîne que l'utilisateur a saisie dans la zone de recherche de la barre d'outils, avec le signe « + » en remplacement des espaces, des caractères d'échappement URL pour les signes de ponctuation et un codage UTF-8 pour les caractères internationaux. Certains sites Web requièrent que les requêtes soient codées par une méthode autre que UTF-8, par exemple Maj-JIS pour le japonais.
    Valeur exemple : Si l'utilisateur tape « Bonjour à tous » dans la zone de recherche, cette variable renvoie « Bonjour à tous »
    Champ d'application : élément <search>
    Consultez l'exemple {query}.
    {url}
    Renvoie vers l'URL figurant dans le champ d'adresse du navigateur, où tout caractère autre qu'une lettre, un nombre, un point (.) ou un caractère de soulignement (_) est codé (par caractère d'échappement). Par exemple, le signe @ est codé par %40 et l'espace par %20.
    Valeur exemple : http%3A%2F%2Fwww.wikipedia.org (version avec caractères d'échappement de http://www.wikipedia.org)
    Champ d'application : l'élément <search>, <site> ou <send>
    Consultez l'exemple {url}.
    {url.host}
    Renvoie la chaîne du site Web.
    Valeur exemple : www.google.com
    Champ d'application : l'élément <search>, <site> ou <send>
    Consultez l'exemple {url.host}.
    {url.noescape}
    Renvoie la formulation exacte de l'URL, exactement telle qu'elle apparaît dans le champ d'adresse du navigateur, sans codage supplémentaire.
    Valeur exemple : http://www.wikipedia.org
    Champ d'application : l'élément <search>, <site> ou <send>
    Consultez l'exemple {url.noescape}.
    {domain}
    Renvoie le domaine de recherche principal de Google pour cette barre d'outils. Il s'agit du domaine correspondant aux résultats de recherche et non du domaine de l'utilisateur.
    Valeurs exemple : com et co.uk
    Champ d'application : l'élément <search>, <site>, <send> ou <feed>
    Consultez l'exemple {domain}.
    {locale}
    Renvoie les paramètres régionaux ISO de la barre d'outils.
    Valeurs exemple : en, es et pt-BR
    Champ d'application : l'élément <search>, <site> ou <send>
    Consultez l'exemple {locale}.
    {selection}
    Renvoie le texte brut actuellement sélectionné dans la fenêtre du navigateur. Ce texte est codé en utf-8 ou par toute autre méthode spécifiée par l'attribut charset. Il est également codé par échappement cgi. Si la méthode de codage n'est pas POST, le texte risque d'être tronqué.
    Valeur exemple : si l'utilisateur sélectionne « Bonjour à tous » en gras dans le navigateur, cette variable renvoie « Bonjour à tous » en texte normal.
    Champ d'application : élément <send>
    Consultez l'exemple {selection}.
    {option1}
    Renvoie la valeur définie par l'utilisateur à partir de l'élément <option>. Cette variable doit être placée dans une URL. (Notez que cette variable s'appelle option1 au cas où il serait nécessaire d'ajouter d'autres options à l'avenir.)
    Valeur exemple : si l'utilisateur spécifie un code postal dans les paramètres de la barre d'outils pour le bouton personnalisé, cette variable renvoie cette valeur, par exemple « 94043 », comme faisant partie de l'URL.
    Champ d'application : doit se trouver dans une URL, dans l'élément <search>, <site>, <send> ou <feed>
    Consultez l'exemple {option1}.