Skip to main content

ActionPort

ActionPort controls the extension's toolbar button - its badge, icon, title, and popup - across all supported browsers.

Context​

  • Availability: Background
  • Source: packages/ports/src/background/action/action.port.ts

Key Methods​

  • setTitle(details: { title: string; tabId?: number }): Promise<void> - Set button tooltip text.
  • setBadgeText(details: { text: string; tabId?: number }): Promise<void> - Set badge label on button.
  • setBadgeBackgroundColor(details: { color: string; tabId?: number }): Promise<void> - Set badge background color.
  • setIcon(details: { path?: string | { [size: number]: string }; tabId?: number; imageData?: any }): Promise<void> - Set button icon.
  • setPopup(details: { popup: string; tabId?: number }): Promise<void> - Assign popup HTML to button.
  • enable(tabId?: number): Promise<void> - Enable button for a tab or globally.
  • disable(tabId?: number): Promise<void> - Disable button for a tab or globally.

Usage​

import { ActionPort } from '@hexajs-dev/ports';
import { Injectable, HexaContext } from '@hexajs-dev/common';

@Injectable({ context: HexaContext.Background })
export class SyncStatusIndicatorService {
  constructor(private readonly action: ActionPort) {}

  async showSyncing(tabId: number) {
    await this.action.setBadgeText({ text: '...', tabId });
    await this.action.setBadgeBackgroundColor({ color: '#0078D4', tabId });
  }

  async showComplete(tabId: number) {
    await this.action.setBadgeText({ text: '?', tabId });
    await this.action.setBadgeBackgroundColor({ color: '#107C10', tabId });
  }
}

API Reference Appendix​

Below is the exhaustive, auto-generated technical reference for all types, interfaces, and signatures associated with this API.

Classes​

ActionPort​

import { ActionPort } from '@hexajs-dev/ports';
class ActionPort { ... }

Methods​

disable()

disable(tabId?: number): Promise<void>

enable()

enable(tabId?: number): Promise<void>

onClickedAddListener()

onClickedAddListener(listener: (tab: HexaWebTab) => void): void

onClickedRemoveListener()

onClickedRemoveListener(listener: (tab: HexaWebTab) => void): void

setBadgeBackgroundColor()

setBadgeBackgroundColor(details: SetBadgeBackgroundColorDetails): Promise<void>

setBadgeText()

setBadgeText(details: SetBadgeTextDetails): Promise<void>

setIcon()

setIcon(details: SetIconDetails): Promise<void>

setPopup()

setPopup(details: SetPopupDetails): Promise<void>

setTitle()

setTitle(details: SetTitleDetails): Promise<void>

Supporting Types​

SetBadgeBackgroundColorDetails​

interface SetBadgeBackgroundColorDetails {
  color: string;
  tabId?: number;
}

SetBadgeTextDetails​

interface SetBadgeTextDetails {
  text: string;
  tabId?: number;
}

SetIconDetails​

interface SetIconDetails {
  path?: string | {
    [size: number]: string;
};
  tabId?: number;
  imageData?: any;
}

SetPopupDetails​

interface SetPopupDetails {
  popup: string;
  tabId?: number;
}

SetTitleDetails​

interface SetTitleDetails {
  title: string;
  tabId?: number;
}