# Browser action & Badge

{
  "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.

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

onBrowserActionClick(() => {
  
})

onBrowserActionClick(tab => {
  // ...
})

# Badge

# 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('red');
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.

# markAsOffline()

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

# markAsOnline()

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