Implémenter une action

Une action se produit lorsqu'un utilisateur clique sur l'icône de la barre d'outils, généralement appelée icône d'action de votre extension. Une action appelle une fonctionnalité d'extension à l'aide de l'API Action ou ouvre une fenêtre pop-up. Cette page explique comment appeler une fonctionnalité d'extension. Pour utiliser une fenêtre pop-up, consultez Ajouter une fenêtre pop-up.

Enregistrer l'action

Pour utiliser l'chrome.action API, ajoutez la clé "action" au fichier manifeste de l'extension. Pour obtenir une description complète des propriétés facultatives de ce champ, consultez la section sur le manifeste de la documentation de référence de l'chrome.action API.

manifest.json:

{
  "name": "My Awesome action Extension",
 ...
  "action": {
   ...
  }
 ...
}

Répondre à l'action

Enregistrez un onClicked gestionnaire pour lorsque l'utilisateur clique sur l'icône d'action. Cet événement n'est pas déclenché si une fenêtre pop-up est enregistrée dans le fichier manifest.json.

service-worker.js:

chrome.action.onClicked.addListener((tab) => {
  chrome.action.setTitle({
    tabId: tab.id,
    title: `You are on tab: ${tab.id}`});
});

Activer l'action de manière conditionnelle

L'API chrome.declarativeContent vous permet d'activer l'icône d'action de l'extension en fonction de l'URL de la page ou lorsque les sélecteurs CSS correspondent aux éléments de la page. Lorsqu'une icône d'action d'extension est désactivée, elle est grisée. Si l'utilisateur clique sur l'icône désactivée, le menu contextuel de l'extension s'affiche.

Badge d'action

Les badges sont des éléments de texte mis en forme placés au-dessus de l'icône d'action pour indiquer l'état de l'extension ou que l'utilisateur doit effectuer des actions. Pour illustrer cela, l'exemple Drink Water affiche un badge avec la mention "ON" pour indiquer à l'utilisateur qu'il a bien défini une alarme et n'affiche rien lorsque l'extension est inactive. Les badges peuvent contenir jusqu'à quatre caractères.

Définissez le texte du badge en appelant chrome.action.setBadgeText() et la couleur d'arrière-plan en appelant chrome.action.setBadgeBackgroundColor().

service-worker.js:

chrome.action.setBadgeText({text: 'ON'});
chrome.action.setBadgeBackgroundColor({color: '#4688F1'});

Info-bulle

Enregistrez les info-bulles dans le champ "default_title" sous la clé "action" du fichier manifest.json.

manifest.json:

{
  "name": "Tab Flipper",
 ...
  "action": {
    "default_title": "Press Ctrl(Win)/Command(Mac)+Shift+Right/Left to flip tabs"
  }
...
}

Vous pouvez également définir ou mettre à jour des info-bulles en appelant action.setTitle(). Si aucune info-bulle n'est définie, le nom de l'extension s'affiche.