Search code examples
google-chromegoogle-chrome-extensionnotifications

Show unread item count in Google Chrome extention icon


Is it possible to show unread item count in Google Chrome extension icon? If yes, then can someone point me to some pointers which explains how to do it?

I went through Google Chrome extension documentation, but couldn't figure it


Solution

  • If I understand correctly, you are looking for the browser-action's badge.

    ...a bit of text that is layered over the icon...

    A badge has a background color and optionally some text and is used for displaying small bits of info (such as unread item count).

    Use chrome.browserAction.setBadgeText to set/unset the text and chrome.browserAction.setBadgeBackgroundColor to set its color. E.g.:

    var ba = chrome.browserAction;
    
    function setAllRead() {
      ba.setBadgeBackgroundColor({color: [0, 255, 0, 128]});
      ba.setBadgeText({text: ' '});   // <-- set text to '' to remove the badge
    }
    
    function setUnread(unreadItemCount) {
      ba.setBadgeBackgroundColor({color: [255, 0, 0, 128]});
      ba.setBadgeText({text: '' + unreadItemCount});
    }
    

    Then use setUnread() and setAllRead() to show/hide the unread items count.