Modules

Elements du menu contextuel

L'option d'interface utilisateur ajoute un ou plusieurs éléments dans un menu contextuel du navigateur.

Example of content menu items added by a WebExtension, from the context-menu-demo example

Vous utiliserez cette option pour exposer les fonctionnalités pertinentes pour les contextes spécifiques du navigateur ou de la page Web. Par exemple, vous pouvez afficher des fonctionnalités pour ouvrir un éditeur graphique lorsque l'utilisateur clique sur une image ou offre une fonctionnalité pour enregistrer le contenu de la page lorsqu'une partie d'une page est sélectionnée. Vous pouvez ajouter des éléments de menu, des éléments de case à cocher, des groupes de radio boutons et des séparateurs aux menus. Une fois qu'un élément de menu contextuel a été ajouté en utilisant contextMenus.create il s'affiche dans tous les onglets du navigateur, mais vous pouvez le cacher en le supprimant avec contextMenus.remove.

Spécification des éléments du menu contextuel

Vous gérez les éléments du menu contextuel par programmation, en utilisant l'API contextMenus. Cependant, vous devez demander la permission contextMenus dans votre manifeste.json pour pouvoir profiter de l'avantage de l'API.

"permissions": ["contextMenus"]
Vous pouvez ensuite ajouter (mettre à jour ou supprimer) les éléments du menu contextuel dans votre script de fond de l'extension. Pour créer un élément de menu, vous spécifiez un ID, son titre et les menus contextuels sur lesquels il doit apparaître:
browser.contextMenus.create({
  id: "log-selection",
  title: browser.i18n.getMessage("contextMenuItemSelectionLogger"),
  contexts: ["selection"]
}, onCreated);

Votre extension attend les clics sur les éléments du menu. L'information passée sur l'élément a cliqué, le contexte où le clic s'est produit, et les détails de l'onglet où le clic a eu lieu, peuvent ensuite être utilisés pour appeler les fonctionnalités de l'extension appropriées.

browser.contextMenus.onClicked.addListener(function(info, tab) {
  switch (info.menuItemId) {
    case "log-selection":
      console.log(info.selectionText);
      break;
    ...
  }
})

Exemples

Le depot webextensions-examples sur GitHub contient plusieurs exemples de WebExtensions qui utilise les élements du menu contextuel :

Étiquettes et contributeurs liés au document

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