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 pour 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 browser.action, 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 fichier manifeste de la documentation de référence de l'API browser.action.
manifest.json:
{
"name": "My Awesome action Extension",
...
"action": {
...
}
...
}
Répondre à l'action
Enregistrez un gestionnaire onClicked pour le cas où 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 :
browser.action.onClicked.addListener((tab) => {
browser.action.setTitle({
tabId: tab.id,
title: `You are on tab: ${tab.id}`});
});
Activer l'action de manière conditionnelle
L'API browser.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 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 et placés au-dessus de l'icône d'action pour indiquer, par exemple, l'état de l'extension ou les actions requises de la part de l'utilisateur. 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 browser.action.setBadgeText() et la couleur d'arrière-plan en appelant browser.action.setBadgeBackgroundColor().
service-worker.js :
browser.action.setBadgeText({text: 'ON'});
browser.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 les info-bulles en appelant action.setTitle(). Si aucune info-bulle n'est définie, le nom de l'extension s'affiche.