MDN’s new design is in Beta! A sneak peek: https://blog.mozilla.org/opendesign/mdns-new-design-beta/

Bouton de la barre d'outils

Généralement appelée action du navigateur, l'option d'interface utilisateur est un bouton ajouté à la barre d'outils du navigateur. Les utilisateurs cliquent sur le bouton pour intérargir avec votre extension.

Utilisez ce bouton lorsque les fonctionnalités de votre extension s'appliquent à presque toutes les pages Web. Le bouton de la barre d'outils est visible dans tous les onglets du navigateur.

Comparer avec le bouton de la barre d'adresse, qui offre un comportement similaire, mais est utilisé dans les situations où l'extension doit être consulté uniquement sur des pages spécifiques.

Spécification de l'action du navigateur

Vous définissez les propriétés de l'action du navigateur à l'aide de la clef browser_action dans le manifest.json:

"browser_action": {
  "default_icon": {
    "19": "button/geo-19.png",
    "38": "button/geo-38.png"
  },
  "default_title": "Whereami?"
}

La seule clef obligatoire est default_icon.

Il existe deux façons de spécifier une action du navigateur : avec ou sans popup. Si vous ne spécifiez pas de popup, quand l'utilisateur clique sur le bouton, un événement est envoyé en complément à l'extension, pour utiliser la fonction  browserAction.onClicked:

browser.browserAction.onClicked.addListener(handleClick);

Si vous spécifiez une fenêtre contextuelle, l'événement de clic n'est pas envoyé: à la place, le popup s'affiche lorsque l'utilisateur clique sur le bouton. L'utilisateur peut interagir avec le popup et il se ferme automatiquement lorsque l'utilisateur clique à l'extérieur. Regardez l'article Popup pour plus de détails sur la création et la gestion des fenêtres pop-up.

Notez que votre extension peut avoir une seule action de navigateur

Vous pouvez modifier l'une des propriétés d'action du navigateur de manière programmée à l'aide de l'API browserAction.

Exemples

Le dépot webextensions-examples contient plusieurs exemples de WebExtensions qui utilisent les actions du navigateur:

  • bookmark-it utilise une action de navigateur sans popup.
  • beastify utilise une action de navigateur avec une popup.

Étiquettes et contributeurs liés au document

 Contributeurs à cette page : hellosct1
 Dernière mise à jour par : hellosct1,