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

browser_action

Type Object
Obligatoire Non
Exemple
"browser_action": {
  "browser_style": true,
  "default_icon": {
    "16": "button/geo-16.png",
    "32": "button/geo-32.png"
  },
  "default_title": "Whereami?",
  "default_popup": "popup/geo.html"
}

Une action de navigateur est un bouton que votre extension ajoute à la barre d'outils du navigateur. Le bouton comporte une icône et peut éventuellement avoir une fenêtre contextuelle dont le contenu est spécifié à l'aide de HTML, CSS et JavaScript.

Si vous fournissez une fenêtre contextuelle, la fenêtre contextuelle est ouverte lorsque l'utilisateur clique sur le bouton, et que votre JavaScript s'exécute dans la fenêtre contextuelle peut gérer l'interaction de l'utilisateur avec elle. Si vous ne fournissez pas de popup, un événement de clic est envoyé aux scripts d'arrière-plan de votre extension lorsque l'utilisateur clique sur le bouton.

Vous pouvez également créer et manipuler des actions de navigateur de manière programmée à l'aide de l'API du navigateur.

Syntaxe

La clé browser_action est un objet qui peut avoir l'une des propriétés suivantes, toutes optionnelles :

Name Type Description
browser_style Boolean
Nouveau dans Firefox 48

Facultatif, par défaut à False.

Utilisez ceci pour inclure une feuille de style dans votre fenêtre contextuelle qui fera en sorte que cela corresponde à l'interface utilisateur du navigateur et à d'autres extensions qui utilisent la propriété browser_style. Although Bien que cette clé soit par défaut à false, il est recommandé de l'inclure et de la définir sur true.

Dans Firefox, la feuille de style peut être vue sur chrome://browser/content/extension.css, ou chrome://browser/content/extension-mac.css sur OS X.

Le guide de style Firefox décrit les classes que vous pouvez appliquer aux éléments de la fenêtre contextuelle afin d'obtenir des styles particuliers.

L'extension exemple latest-download utilise browser_style dans une fenetre contextuelle.

default_area String
Nouveau dans Firefox 54

Définit la partie du navigateur dans laquelle le bouton est initialement placé. Il s'agit d'une chaîne qui peut prendre l'une des quatre valeurs suivantes:

  • "navbar" : le bouton est placé dans la barre d'outils principale du navigateur, à côté de la barre d'URL.
  • "menupanel" : le bouton est placé dans un panneau contextuel.
  • "tabstrip" : le bouton est placé dans la barre d'outils qui contient les onglets du navigateur.
  • "personaltoolbar" : le bouton est placé dans la barre d'outils des signets

Cette propriété est seulement supporté dans Firefox.

Cett propriété est facultative, et defaut à "navbar".

Une extension ne peut pas changer l'emplacement du bouton après son installation, mais l'utilisateur doit pouvoir déplacer le bouton à l'aide du mécanisme de personnalisation intégrée du navigateur.

default_icon Object ou String

Utilisez cette option pour spécifier une ou plusieurs icônes pour l'action du navigateur. L'icône est affichée dans la barre d'outils du navigateur par défaut.

Les icônes sont spécifiées comme des URL relatives dans le fichier manifest.json file lui-même.

Vous pouvez spécifier un seul fichier d'icône en fournissant une chaîne ici:

"default_icon": "path/to/geo.svg"

Pour spécifier plusieurs icônes dans différentes tailles, spécifiez ici un objet. Le nom de chaque propriété est la hauteur de l'icône en pixels et doit être converti en un nombre entier. La valeur est l'URL. Par exemple:

    "default_icon": {
      "16": "path/to/geo-16.png",
      "32": "path/to/geo-32.png"
    }

Voir Choisir les tailles des icones pour plus de conseils à ce sujet.

default_popup String

Le chemin d'accès à un fichier HTML contenant la spécification de la fenêtre contextuelle.

Le fichier HTML peut inclure des fichiers CSS et JavaScript à l'aide des éléments  <link> et <script>, tout comme une page Web normale.

Contrairement à une page Web normale, JavaScript en cours d'exécution dans la fenêtre contextuelle peut accéder à toutes les APIs WebExtension (sujet, bien sû, à l'extension possédant les permissions appropriés).

Ceci est une propriété localisable.

default_title String

Tooltip pour le bouton, affiché lorsque l'utilisateur passe sa souris dessus.

Ceci est une propriété localisable.

Choisir la tailles des icônes

L'icône de l'action du navigateur peut devoir être affichée dans différentes tailles dans différents contextes:

  • L'icône est affichée par défaut dans la barre d'outils du navigateur, mais l'utilisateur peut la déplacer dans le panneau de menu du navigateur (le panneau qui s'ouvre lorsque l'utilisateur clique sur l'icône  "hamburger"). L'icône dans la barre d'outils est plus petite que l'icône dans le panneau de menu.
  • Sur un écran haute densité comme un écran Retina, les icônes doivent être deux fois plus grandes.

Si le navigateur ne peut pas trouver une icône de la bonne taille dans une situation donnée, il choisira la meilleure correspondante et l'escalera. La mise à l'échelle peut rendre l'icône apparente en flou, il est donc important de choisir attentivement les tailles d'icône.

Il y a deux approches principales à cela. Vous pouvez fournir un seul icône en tant que fichier SVG, et elle sera mise à l'échelle correctement:

"default_icon": "path/to/geo.svg"

Alternativement, vous pouvez fournir plusieurs icônes dans différentes tailles, et le navigateur choisira le meilleur.

Dans Firefox:

Vous pouvez donc spécifier des icônes qui correspondent exactement, à la fois aux affichages normaux et à Retina, en fournissant trois fichiers d'icônes et en les spécifiant comme suit:

    "default_icon": {
      "16": "path/to/geo-16.png",
      "32": "path/to/geo-32.png",
      "64": "path/to/geo-64.png"
    }

Dans Chrome, la hauteur et la largeur par défaut sont 19 * window.devicePixelRatio. Pour obtenir une correspondance exacte sur Firefox et Chrome, Retina et non-Retina :

    "default_icon": {
      "16": "path/to/geo-16.png",
      "19": "path/to/geo-19.png",
      "32": "path/to/geo-32.png",
      "38": "path/to/geo-38.png",
      "64": "path/to/geo-64.png"
    }

Si Firefox ne peut pas trouver une correspondance exacte pour la taille qu'il veut, alors il choisira l'icône la plus petite spécifiée qui est plus grande que la taille idéale. Si toutes les icônes sont plus petites que la taille idéale, elle choisira la plus grande icône spécifiée.

Exemple

"browser_action": {
  "default_icon": {
    "16": "button/geo-16.png",
    "32": "button/geo-32.png"
  }
}

Une action de navigateur avec juste un icône, spécifiée en 2 tailles différentes. Les scripts d'arrière-plan de l'extension peuvent recevoir des événements de clic lorsque l'utilisateur clique sur l'icône en utilisant un code comme celui-ci:

 browser.browserAction.onClicked.addListener(handleClick);
"browser_action": {
  "default_icon": {
    "16": "button/geo-16.png",
    "32": "button/geo-32.png"
  },
  "default_title": "Whereami?",
  "default_popup": "popup/geo.html"
}

Une action de navigateur avec une icône, un titre et une popup. La popup s'affiche lorsque l'utilisateur clique sur le bouton.

Pour une extension simple, mais complète, qui utilise une action de navigateur, consultez le tutoriel pas à pas.

Compatibilité du navigateur

ChromeEdgeFirefoxFirefox for AndroidOpera
Basic supportYesYes4855Yes
default_titleYesYes4855 1Yes
default_iconYes 2Yes 2 348NoYes
default_popupYesYes48NoYes
browser_styleNoNo48NoNo
default_areaNoNo54NoNo
1. Browser actions are presented as menu items, and the title is the menu item's label.
2. SVG icons are not supported.
3. 'default_icon' must be an object, with explicit sizes.

Étiquettes et contributeurs liés au document

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