Google Chrome Extension Numbers on the Icon

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!

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.

First you will have to do a few things. You need to have a background page on where you have to put the code for showing the BadgeText. And second you will have to register your background script file in the manifest.json file.

You have to make a background.js file or any other *.js file. Then in the background.js file You have to write this code.

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

After that save it to the same folder as of your extension. Then edit your manifest.json file and enter this code at the end

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

Now when you reload the extension you will see the word your as badge text because only four characters will be displayed in that small area. However it is not a hard and fast rule that the text string will be truncated to four characters, it's just that as many characters can fit in it will be displayed. I needed five characters and I got lucky that two of them were i and they do not take much space and all of the five characters got displayed. If you wanna try I was trying to display Nidhi.

MV3 combines the API's USE

chrome.action.setBadgeBackgroundColor

Manifest only needs

"action":{

}