chrome.browserAction

Description

Disponibilité

Dans l'illustration suivante, le carré multicolore à droite de la barre d'adresse est l'icône d'une action du navigateur. Un pop-up s'affiche sous l'icône.

Si vous souhaitez créer une icône qui n'est pas toujours active, utilisez une action de page au lieu d'une action de navigateur.

Fichier manifeste

Enregistrez l'action de votre navigateur dans le fichier manifeste de l'extension comme suit :

{   "name": "My extension",   ...   "browser_action": {     "default_icon": {                // optional       "16": "images/icon16.png",     // optional       "24": "images/icon24.png",     // optional       "32": "images/icon32.png"      // optional     },     "default_title": "Google Mail",  // optional, shown in tooltip     "default_popup": "popup.html"    // optional   },   ... } 

Vous pouvez fournir une icône de n'importe quelle taille à utiliser dans Chrome. Chrome sélectionnera la plus proche et la mettra à l'échelle à la taille appropriée pour remplir l'espace de 16 dip. Toutefois, si la taille exacte n'est pas fournie, cette mise à l'échelle peut entraîner une perte de détails ou un flou de l'icône.

Les appareils avec des facteurs d'échelle moins courants, comme 1,5x ou 1,2x, devenant de plus en plus répandus, nous vous encourageons à fournir plusieurs tailles pour vos icônes. Cela garantit également que si la taille d'affichage de l'icône est modifiée, vous n'aurez pas besoin de fournir d'autres icônes.

L'ancienne syntaxe pour enregistrer l'icône par défaut est toujours acceptée :

{   "name": "My extension",   ...   "browser_action": {     ...     "default_icon": "images/icon32.png"  // optional     // equivalent to "default_icon": { "32": "images/icon32.png" }   },   ... } 

Éléments de l'interface utilisateur

Une action du navigateur peut avoir une icône, une info-bulle, un badge et un pop-up.

Icône

Les icônes d'action du navigateur dans Chrome mesurent 16 dips (pixels indépendants de la densité) de large et de haut. Les icônes plus grandes sont redimensionnées pour s'adapter, mais pour de meilleurs résultats, utilisez une icône carrée de 16 dip.

Vous pouvez définir l'icône de deux manières : à l'aide d'une image statique ou à l'aide de l'élément canvas HTML5. L'utilisation d'images statiques est plus facile pour les applications simples, mais vous pouvez créer des UI plus dynamiques, telles que des animations fluides, à l'aide de l'élément canvas.

Les images statiques peuvent être dans n'importe quel format que WebKit peut afficher, y compris BMP, GIF, ICO, JPEG ou PNG. Pour les extensions non compressées, les images doivent être au format PNG.

Pour définir l'icône, utilisez le champ default_icon de browser_action dans le manifest ou appelez la méthode browserAction.setIcon.

Pour afficher correctement l'icône lorsque la densité de pixels de l'écran (ratio size_in_pixel / size_in_dip) est différente de 1, l'icône peut être définie comme un ensemble d'images de tailles différentes. L'image à afficher sera sélectionnée dans l'ensemble pour s'adapter au mieux à la taille de pixel de 16 dip. L'ensemble d'icônes peut contenir des spécifications d'icônes de n'importe quelle taille, et Chrome sélectionnera la plus appropriée.

Info-bulle

Pour définir l'info-bulle, utilisez le champ default_title de browser_action dans le manifeste ou appelez la méthode browserAction.setTitle. Vous pouvez spécifier des chaînes spécifiques aux paramètres régionaux pour le champ default_title. Pour en savoir plus, consultez Internationalisation.

Badge

Les actions du navigateur peuvent éventuellement afficher un badge, c'est-à-dire un petit texte superposé à l'icône. Les badges permettent de mettre à jour facilement l'action du navigateur pour afficher une petite quantité d'informations sur l'état de l'extension.

Comme l'espace est limité sur le badge, il doit comporter quatre caractères ou moins.

Définissez le texte et la couleur du badge à l'aide de browserAction.setBadgeText et browserAction.setBadgeBackgroundColor, respectivement.

Fenêtre pop-up

Si une action de navigateur comporte un pop-up, celui-ci s'affiche lorsque l'utilisateur clique sur l'icône de l'extension. Le pop-up peut contenir n'importe quel contenu HTML et sa taille est automatiquement ajustée à son contenu. La taille du pop-up ne peut pas être inférieure à 25 x 25 et ne peut pas être supérieure à 800 x 600.

Pour ajouter un pop-up à votre action de navigateur, créez un fichier HTML contenant le contenu du pop-up. Spécifiez le fichier HTML dans le champ default_popup de browser_action dans le manifest, ou appelez la méthode browserAction.setPopup.

Conseils

Pour un impact visuel optimal, suivez ces consignes :

• Utilisez les actions du navigateur pour les fonctionnalités qui ont du sens sur la plupart des pages.
• N'utilisez pas les actions du navigateur pour les fonctionnalités qui n'ont de sens que pour quelques pages. Utilisez plutôt page actions.
• Utilisez des icônes grandes et colorées qui exploitent au maximum l'espace de 16 x 16 dip. Les icônes d'action du navigateur doivent sembler un peu plus grandes et plus épaisses que les icônes d'action de la page.
• N'essayez pas d'imiter l'icône monochrome du menu de Google Chrome. Cela ne fonctionne pas bien avec les thèmes. De toute façon, les extensions doivent se démarquer un peu.
• Utilisez la transparence alpha pour ajouter des bords doux à votre icône. Étant donné que de nombreuses personnes utilisent des thèmes, votre icône doit être esthétique sur différentes couleurs d'arrière-plan.
• N'animez pas constamment votre icône. C'est juste ennuyeux.

Exemples

Vous trouverez des exemples simples d'utilisation des actions du navigateur dans le répertoire examples/api/browserAction. Pour obtenir d'autres exemples et de l'aide pour afficher le code source, consultez Exemples.

chrome.browserAction.disable(
  tabId?: number,
  callback?: function,
): Promise<void>

chrome.browserAction.enable(
  tabId?: number,
  callback?: function,
): Promise<void>

chrome.browserAction.getBadgeBackgroundColor(
  details: TabDetails,
  callback?: function,
): Promise<extensionTypes.ColorArray>

chrome.browserAction.getBadgeText(
  details: TabDetails,
  callback?: function,
): Promise<string>

chrome.browserAction.getPopup(
  details: TabDetails,
  callback?: function,
): Promise<string>

chrome.browserAction.getTitle(
  details: TabDetails,
  callback?: function,
): Promise<string>

chrome.browserAction.setBadgeBackgroundColor(
  details: object,
  callback?: function,
): Promise<void>

chrome.browserAction.setBadgeText(
  details: object,
  callback?: function,
): Promise<void>

chrome.browserAction.setIcon(
  details: object,
  callback?: function,
): Promise<void>

chrome.browserAction.setPopup(
  details: object,
  callback?: function,
): Promise<void>

chrome.browserAction.setTitle(
  details: object,
  callback?: function,
): Promise<void>

chrome.browserAction.onClicked.addListener(
  callback: function,
)