@kocal/web-extension-library

Library

A set of functions used for easily write a web extension

Requirements

• Node.js
• NPM or Yarn
• TypeScript

Installation

$ npm install @kocal/web-extension-library

Usage

Browser action

onBadgeClick(callback: (tab: chrome.tabs.Tab) => void)

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

onBadgeClick(tab => {
  alert(`Badge has been clicked on "${tab.id}".`); 
})

setBadgeColor(color: string | chrome.browserAction.ColorArray, tabId?: number)

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

setBadgeColor('red');
setBadgeColor([255, 0, 0, 255], 123);

setBadgeText(text: string, tabId?: number)

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

setBadgeText('Text');
setBadgeText('Text for a specific tab', 123);

setBadgeTitle(title: string, tabId?: number)

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

setBadgeTitle('My title');
setBadgeTitle('My title for a specific tab', 123);

Agnostic methods

markAsOffline()

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

markAsOnline()

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

Notifications

createNotification(options: NotificationOptions, cb?: callback)

createNotification(notificationId: string, options: NotificationOptions, cb?: callback)

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

createNotification({ title: 'My title' });
createNotification({ title: 'My title' }, notificationId => console.log(notificationId));
createNotification('my-notification-id', { title: 'My title' }, notificationId => console.log(notificationId));

onNotificationClick(callback: (notificationId: string) => void)

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

onNotificationClick((notificationId) => {
  console.log(notificationId);
});

Tabs

createTab(createProperties: CreateProperties, cb?: (tab: Tab) => void)

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

createTab({ url: 'https://google.com' });
createTab({ url: 'https://google.com' }, (tab) => {
  // ...
});