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

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.

Answer 2

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.