page_action

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

Une action de page est une icône que votre extension ajoute dans la barre d'URL du navigateur.

Votre extension peut seulement fournir un popup associé dont le contenu est spécifié en utilisant HTML, CSS et JavaScript.

Si vous fournissez une fenêtre contextuelle, la fenêtre contextuelle est ouverte lorsque l'utilisateur clique sur l'icône, 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 clic événement est envoyé à votre extension aux scripts d'arrière plan quand l'utilisateur clique sur l'icône.

Vous pouvez également créer et manipuler des actions de page par programme en utilisant l'API pageAction.

Les actions de page sont comme les actions de navigateur, sauf qu'elles sont associées à des pages Web particulières plutôt qu'avec le navigateur dans son ensemble. Si une action est seulement pertinente que sur certaines pages, vous devez utiliser une action de page et l'afficher uniquement sur les pages pertinentes. Si une action est pertinente pour toutes les pages ou pour le navigateur lui-même, utilisez une action de navigateur.

Alors que les actions du navigateur sont affichées par défaut, les actions de la page sont cachées par défaut. Ils peuvent être affichés pour un onglet particulier en appelant pageAction.show(), en passant dans l'ID de l'onglet.

Syntaxe

La clé page_action est un object qui peut avoir l'une des trois propriétés, toutes optionnelles:

Name Type Description
browser_style Boolean

Facultatif, par defaut à 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. Bien que cette clé soit par défaut soit 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 on 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 d'exemple latest-download utilise browser_style dans sa fenêtre contextuelle.

default_icon Object or String

Utilisez cette option pour spécifier une icône pour l'action.

Il est recommandé de fournir deux icônes ici, un 19x19 pixel et un 38x38 pixel, et les spécifier dans un objet avec les propriétés "19" et "38", comme ceci:

    "default_icon": {
      "19": "geo-19.png",
      "38": "geo-38.png"
    }

Si vous faites cela, le navigateur choisira l'icône de la bonne taille pour la résolution des pixels de l'écran.

Vous pouvez simplement fournir une chaine ici :

"default_icon": "geo.png"

Si vous faites cela, l'icône sera mise à l'échelle pour correspondre à la barre d'outils et peut sembler floue.

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 commeune 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ûr, à l'extension possédant les permissions appropriées).

Ceci est une propriété localisable.

default_title String

Tooltip pour l'icône, affiché lorsque l'utilisateur passe sa souris dessus.

Ceci est une propriété localisable.

Exemple

"page_action": {
  "default_icon": {
    "19": "button/geo-19.png",
    "38": "button/geo-38.png"
  }
}

Une action de page avec juste une 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.pageAction.onClicked.addListener(handleClick);
"page_action": {
  "default_icon": {
    "19": "button/geo-19.png",
    "38": "button/geo-38.png"
  },
  "default_title": "Whereami?",
  "default_popup": "popup/geo.html"
}

Une action de page avec une icône, un titre et une fenêtre contextuelle. Le popup s'affiche lorsque l'utilisateur clique sur l'icône.

Compatibilité du navigateur

ChromeEdgeFirefoxFirefox for AndroidOpera
Basic supportYes 1Yes 1 248NoYes
browser_styleNoNo48NoNo
1. SVG icons are not supported.
2. 'default_icon' must be an object, with explicit sizes.

Étiquettes et contributeurs liés au document

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