by tomerpacific

Features of the Chrome API you should know

Photo by Jonatan Quintero on Unsplash

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 16x16 icon (as it will be used in the context menu)
  3. Add the following code to your background script:

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:

3. To pull data from the storage you use:

⚠️ 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

Listen In On Incoming Messages

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:

To set the text of the badge you use:

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

Have other Chrome APIs you want to know about? Want to ask something? Feel free to reach out.

If you liked this article, clap away so that others can enjoy it as well! 👏