Implémenter une action

Une action est ce qui 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 un pop-up. Cette page explique comment appeler une fonctionnalité d'extension. Pour utiliser un pop-up, consultez Ajouter un pop-up.

Enregistrer l'action

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

manifest.json:

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

Répondre à l'action

Enregistrez un gestionnaire onClicked lorsque l'utilisateur clique sur l'icône d'action. Cet événement n'est pas déclenché si un pop-up est enregistré 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. Lorsque l'icône d'action d'une extension est désactivée, elle est grisée. Si l'utilisateur clique sur l'icône de désactivation, le menu contextuel de l'extension s'affiche.

<ph type="x-smartling-placeholder">

</ph> <ph type="x-smartling-placeholder">

</ph> Une icône d'action désactivée.

Badge d'action

Les badges sont des textes mis en forme placés au-dessus de l'icône d'action pour indiquer, par exemple, l'état de l'extension ou que l'utilisateur doit effectuer une action. Pour illustrer cela, l'exemple Boire Eau affiche un badge "ACTIVÉ". pour indiquer à l'utilisateur qu'il a défini une alarme avec succès, et n'affiche rien lorsque l'extension est inactive. Les badges peuvent contenir jusqu'à quatre caractères.

<ph type="x-smartling-placeholder">

</ph>

Icône d'extension sans badge (à gauche) et avec un badge (à droite).

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" dans le 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.