Sebastian Gomez
Customizing Chrome Extensions with Badges and Tooltips
In this post we'll explore how we can modify and customize Chrome's user interface (UI) using the override options the browser provides. This guide is especially useful for developers who want to build more attractive and functional Chrome extensions.
Modifying the new tab page
One of Chrome's most interesting capabilities is the ability to override specific pages, such as the new tab page, the bookmark manager, and the history page. To get started, let's focus on how to change the new tab page.
Override the new tab page: Chrome lets you replace the new tab page through the chrome_url_overrides option in your extension's manifest.json file.
To do it, add the following configuration to your manifest.json:
{
"chrome_url_overrides": {
"newtab": "mypage.html"
}
}Create a mypage.html file with the content you want to display. For example:
<!DOCTYPE html>
<html>
<head>
<title>My New Tab</title>
</head>
<body>
<h1>Hello World</h1>
</body>
</html>Once configured, every time you open a new tab in Chrome it will show the content of mypage.html.
Customizing history and bookmarks
Besides the new tab page, you can also modify the history and bookmark pages the same way. You just adjust the configuration in your manifest.json file.
For the history page:
{
"chrome_url_overrides": {
"history": "mypage.html"
}
}For the bookmarks page:
{
"chrome_url_overrides": {
"bookmarks": "mypage.html"
}
}Using the Action API
Chrome offers the Action API, which lets us control our extension's toolbar button and other parts of the UI. This API is very useful for adding interactivity and customization.
Tooltips: you can configure a tooltip that appears when the user hovers over your extension's icon. The declarative way is to use the default_title key, which must be nested inside the "action" key in your manifest.json:
{
"action": {
"default_title": "My Awesome Chrome Extension"
}
}If you'd rather set the title programmatically, for example to change it based on the extension's state, you can use the API equivalent from your service worker:
chrome.action.setTitle({ title: 'My Awesome Chrome Extension' });Badges: badges are small bits of text shown on top of the extension's icon, very useful for notifications. They're set programmatically with the Action API:
chrome.action.setBadgeText({ text: '1' });
chrome.action.setBadgeBackgroundColor({ color: '#000000' });Action API usage examples
To illustrate how to use the Action API, let's look at a few practical examples.
Set the badge text:
chrome.action.setBadgeText({ text: 'New' });Change the badge color:
chrome.action.setBadgeBackgroundColor({ color: '#FF0000' });And if we combine both inside the Manifest V3 background service worker, we can welcome the user when the extension is installed, setting the tooltip and a badge at the same time:
// background.js (service worker declared in manifest.json as "background": { "service_worker": "background.js" })
chrome.runtime.onInstalled.addListener(() => {
chrome.action.setTitle({ title: 'My Awesome Chrome Extension' });
chrome.action.setBadgeText({ text: 'New' });
chrome.action.setBadgeBackgroundColor({ color: '#FF0000' });
});These small changes can make your extension more informative and appealing to users.
Exploring more APIs
This post has only scratched the surface of Chrome's customization capabilities. In future posts we'll explore other available APIs, such as bookmark handling and context menus, which can take your extensions to the next level.
Suggested exercises
- Build an extension that overrides the new tab page with your own
mypage.htmland shows the user a welcome message. - From the background service worker, set a tooltip with
chrome.action.setTitleand a badge withchrome.action.setBadgeTextwhen the extension is installed. - Change the badge color based on a state in your extension (for example, red when there are pending notifications and green when there are none).
3-point summary
- With
chrome_url_overridesinmanifest.jsonyou can override the new tab page, the history page, and the bookmarks page. - The tooltip is defined declaratively with
default_titlenested under the"action"key, or programmatically withchrome.action.setTitle. - Badges are controlled with
chrome.action.setBadgeTextandchrome.action.setBadgeBackgroundColorfrom the service worker.
I hope this post helped you understand how to start customizing Chrome's UI. If you have any questions or need more details, feel free to leave a comment. The ability to customize Chrome's UI by overriding pages and using the Action API opens up a world of possibilities for extension developers. Imagine and build. Until next time.
Sebastian Gomez
Creador de contenido principalmente acerca de tecnología.