Chrome extension — How to add a badge on your extension’s icon
Prerequisite: this example project originates from the Chrome extension — How to use contextMenus API
Badges display information on top of the browser icon to highlight its current state. Your manifest.json should have action key. We can show the user total time , displayed on a badge, instead of opening the extension every time to view it from there.
Utilizechrome.storage to address synchronous response to storage updates as we need to track changes made to the data. Every time data in the storage changes, the event is fired.
Using an event listener to listen for saved changes, add this to background.js :
// listen to event for changes from saved data in storage
chrome.storage.onChanged.addListener(function (changes, namespace) {// set a badge
chrome.action.setBadgeText({text:changes.total.newValue.toString();// set badge color
chrome.action.setBadgeBackgroundColor({color: '#9688F1'});
});
That’s about it. You should be able to see the badge update to the entered new total time.
When you go to options page, reset the time, and zero should showup on the badge
