Google Chrome Extension Numbers on the Icon

Question

I've been experimenting with a Chrome Extension, and I want to make one similar to my Google Voice Extension where the icon shows a little blue "1" next to the icon when I receive an event, Is this a whole separate icon? and then they just use the "setIcon" method? Like this

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

Here's a visual example of how it looks:

The gmail one seems to go all the up to 500! They can't have an icon for each number, or do they?? Is there something I can use thats made to do this stuff? I already have my icon, if I have to make a unique one I may just make like 10 and then have a "10+" icon. I am connecting it to an API which could have a lot of events.

Has anybody had this issue? How did they get around it?

Any advice or suggestions would help!

Thanks!

Answer 1

You can set a badge on your browser action with setBadgeText:

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

Note that if the text you pass is longer than 4 characters, it will be truncated to the first 4 characters.

Edit: Mar 2021

According to the new Manifest V3, the APIs have been changed. According to the document:
In Manifest V3 the chrome.browserAction and chrome.pageAction APIs are consolidated into a single chrome.action API.

So, your code for adhering to the new API shall be:

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