So you think you know your way around building a Chrome extension? Well, that’s all fine and dandy, but have you heard about context menus? Messaging between scripts? Adding a badge to your extension’s icon? If all this sounds fascinating, you’re in luck. We’ll go over some cool features the Chrome API grants us.

If you are interested in reading about how to build a Chrome extension, you can read my previous article here. If you want to know how to publish one, you can read all about it here

Context Menu

To put it simply, the context menu is the menu that appears when you right-click anywhere inside the browser. You can add your Chrome extension to that menu with a few simple steps:

1. Add context-menus to the permissions key in the manifest
2. Add a 16×16 icon (as it will be used in the context menu)
3. Add the following code to your background script:

//An object representing what will be added to the context menu
var contextMenuItem = {                      
	"id": "ExtensionName",
	"title": "Text that will appear in the context menu",
	"contexts": ["selection"]
};

//...
// This will add the above object to the context menu
chrome.contextMenus.create(contextMenuItem);  

//...
//Adding a listener for clicks
chrome.contextMenus.onClicked.addListener(function(clickData) {         
	if (clickData.menuItemId === "ExtensionName" && clickData.selectionText) {
		
	}
});

Storage

Similar to localStorage, the Chrome API allows saving data as objects, which persists even when the browser is closed and reopened. Here are the necessary steps to allow storage usage in your extension:

1. Add storage to the permissions key in the manifest
2. To put data in the storage, you use:

chrome.storage.local.set({key: value}, function() {
          //Logic that happens after the data is set
});

3. To pull data from the storage you use:

chrome.storage.local.get(['key'], function(result) {
             //Logic that happens after the data is pulled from the storage 
             //You can find it in result.key and result.value
});

⚠️ Do NOT put sensitive user data in the storage since it is not encrypted

Messaging

Chrome has another nifty feature which lets you pass messages along between scripts. For example, in your extension, you have your popup.js file that deals with things related to the popup window and you have a background script. If you wanted to have those two scripts communicate with each other you could use the following methods:

SendMessage

chrome.runtime.sendMessage({
    data:"Hello World!"
    }, function(response) {
      //Logic to handle response from object receiving message
    });

Listen In On Incoming Messages

chrome.runtime.onMessage.addListener(function(message,sender,sendResponse){
	 var str = JSON.stringify(message.data);
  //Use sendResponse to send a message back to the original sender
  sendResponse({response: "Hello back"});
});

Badges

You know them, you love them, and you can add them to the icon of your extension. Make sure to be aware that due to its small size, the text you want to display is limited to four characters.

To set the background color of the badge you use:

chrome.browserAction.setBadgeBackgroundColor({ color: "HEXADECIMAL_COLOR"}, callback);

To set the text of the badge you use:

chrome.browserAction.setBadgeText(object details, function callback)

In both methods, the callback is an optional parameter you can use after the method finishes its action.