web-dev-qa-db-fra.com

Google Chrome Numéros d'extension sur l'icône

J'ai testé une extension Chrome, et je souhaite en créer une similaire à mon extension Google Voice, où l'icône affiche un petit "1" bleu à côté de l'icône lorsque je reçois un événement , S'agit-il d'une icône complètement distincte? Puis ils utilisent simplement la méthode "setIcon"?

chrome.browserAction.setIcon({path:"icon.png"});

Voici un exemple visuel de son apparence: enter image description here

Le gmail semble aller jusqu'à 500! Ils ne peuvent pas avoir d'icône pour chaque numéro, ou le font-ils ?? Y a-t-il quelque chose que je peux utiliser pour faire ce genre de choses? J'ai déjà mon icône, si je dois en faire une unique, je peux faire comme 10 et avoir une icône "10+". Je le connecte à une API qui pourrait avoir beaucoup d'événements.

Quelqu'un at-il eu ce problème? Comment l'ont-ils contourné?

Tout conseil ou suggestion serait utile!

Merci!

iconsgoogle-chrome-extension
53
Doug Molineux

Vous pouvez définir un badge sur l'action de votre navigateur avec setBadgeText :

chrome.browserAction.setBadgeText({text: "10+"}); // We have 10+ unread items.

Notez que si le texte que vous passez dépasse 4 caractères, il sera tronqué aux 4 premiers caractères.

78
Sebastian Paaske Tørholm

Vous devrez d'abord faire quelques choses. Vous devez avoir une page de fond sur l'endroit où vous devez mettre le code pour afficher le BadgeText. Et deuxièmement, vous devrez enregistrer votre fichier de script d'arrière-plan dans le manifest.json fichier.

Vous devez faire un background.js fichier ou tout autre fichier * .js. Puis dans le background.js fichier Vous devez écrire ce code.

chrome.browserAction.setBadgeBackgroundColor({ color: [255, 0, 0, 255] });
chrome.browserAction.setBadgeText({text: 'your text'});

Après cela, enregistrez-le dans le même dossier que celui de votre extension. Modifiez ensuite votre manifest.json fichier et entrez ce code à la fin

,
"background":
{
  "scripts":["background.js"]
}

Maintenant, lorsque vous rechargez l'extension, vous verrez le mot your comme texte de badge, car seuls quatre caractères seront affichés dans cette petite zone. Cependant, ce n'est pas une règle stricte et rapide que la chaîne de texte sera tronquée à quatre caractères, c'est juste que autant de caractères peuvent y entrer qu'elle sera affichée. J'avais besoin de cinq caractères et j'ai eu la chance que deux d'entre eux soient i et qu'ils ne prennent pas beaucoup de place et tous les cinq caractères se sont affichés. Si vous voulez essayer, j'essayais d'afficher Nidhi.

24
Ishan