70

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!

1
  • 1
    Doing something similar Doug... pretty funny landing on your question. Hope all is well! - Edu
    – E.E.33
    Commented Dec 24, 2018 at 5:01

3 Answers 3

122

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.

2
  • 1
    It seems also to accept strings longer than 4 characters. I have tried a time in the format like "11:30", and it is shown as a whole in the badge.
    – Ethan Yang
    Commented Jul 21, 2016 at 0:37
  • 1
    As @j0k mentioned, the change need to be in 'background.js'
    – lkahtz
    Commented Sep 8, 2020 at 3:02
37

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.

1
  • 5
    it's also necessary to have "browser_action": {} in the manifest otherwise chrome.browserAction will remain undefined
    – rmanna
    Commented May 22, 2019 at 7:48
0

MV3 combines the API's USE

chrome.action.setBadgeBackgroundColor

Manifest only needs

"action":{

}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.