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.
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:
- Add context-menus to the permissions key in the manifest
- Add a 16x16 icon (as it will be used in the context menu)
- Add the following code to your background script:
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:
- Add storage to the permissions key in the manifest
- 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
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:
Listen In On Incoming Messages
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! ?