Browser action & Badge


Ensure you have properly configured your browser action through manifest.json:

  "browser_action": {
    "default_title": "Your extension name",
    "default_icon": "icons/icon_48.png"

Browser action

Methods related to chrome.browserAction API.

Set title

Set the title of the browser action. This shows up in the tooltip.

import { setBrowserActionTitle } from '@kocal/web-extension-library';

setBrowserActionTitle('My title');
setBrowserActionTitle('My other title', 123); // only for tab "123"

Listen for a click

Fired when a browser action icon is clicked.


This event will not fire if the browser action has a popup

import { onBrowserActionClick } from '@kocal/web-extension-library';

onBrowserActionClick(() => {

onBrowserActionClick(tab => {
  // ...


Set badge color

You can pass a string, like a CSS value (red), long (#ff0000) or short (#f00) hexadecimal notation.

You can also pass an array of four integers in the range [0, 255].

import { setBadgeColor } from '@kocal/web-extension-library';

setBadgeColor([255, 0, 0, 255]);
setBadgeColor('#ff0000', 123); // only for tab "123"

Set badge text

Update badge text, only four characters can be displayed.

import { setBadgeText } from '@kocal/web-extension-library';

setBadgeText('My text');
setBadgeText('My other text', 123); // only for tab "123"

Agnostic methods

The following methods can be used when developing a web extension where you should display if a live (Twitch, YouTube, Dailymotion...) is online or offline.


Shortcut to setBadgeColor('gray'); setBadgeText('OFF');


Shortcut to setBadgeColor('green'); setBadgeText('ON');