Search code examples
iconsgoogle-chrome-extension

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: enter image description here

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!

Solution

  • Manifest v3 update 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.

    Original answer

    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.