Stripchat Extension Platform

Appearance

Methods ​

The @stripchatdev/ext-helper SDK exposes three instance methods — makeRequest, subscribe, and unsubscribe — and a factory function createExtHelper that initializes the SDK.

createExtHelper ​

Creates and initializes an ExtHelper instance. Call this once at the entry point of each HTML page.

ts
import { createExtHelper } from '@stripchatdev/ext-helper';

const ext = createExtHelper();

The function automatically:

  • Connects to the host platform.
  • Reads the current theme (dark or light) and sets data-theme on the <html> element.

Returns an ExtHelper instance with makeRequest, subscribe, and unsubscribe methods.

makeRequest ​

Sends a typed request to the platform and returns a promise with the result.

ts
ext.makeRequest(request, params): Promise<Result>
ArgumentTypeDescription
requeststringRequest name. See Requests.
paramsvariesParameters specific to each request. Described per request in Requests.

Returns: Promise resolving to a result specific to the request. See Requests for return types.

Example ​

ts
const ctx = await ext.makeRequest('v1.ext.context.get', null);

subscribe ​

Subscribes to a platform event. The handler is called each time the event is emitted.

ts
ext.subscribe(eventName, handler): void
ArgumentTypeDescription
eventNamestringEvent name to subscribe to. See Events for the full list.
handler(data) => voidCallback invoked with the event payload.

Example ​

ts
ext.subscribe('v1.ext.context.updated', ({ context }) => {
  console.log(context);
});

unsubscribe ​

Removes an event subscription.

ts
ext.unsubscribe(eventName, handler?): void
ArgumentTypeDescription
eventNamestringEvent name to subscribe to. See Events for the full list.
handler(data) => voidOptional. The specific handler to remove. If omitted, all handlers for this event are removed.

Example ​

ts
const onUpdate = ({ context }) => {
  console.log(context);
};

ext.subscribe('v1.ext.context.updated', onUpdate);

// later
ext.unsubscribe('v1.ext.context.updated', onUpdate);

SDK helpers ​

The SDK includes helpers for sharing state between a background slot and visual slots. The background slot owns the state; visual slots read it and send partial updates.

These helpers are imported from a separate entrypoint:

ts
import {
  createSlotStateClient,
  createSlotStateHost,
} from '@stripchatdev/ext-helper/helpers';

In addition to the standard helpers, the SDK provides a react-specific hooks that can be imported from the react entrypoint:

ts
import { useSlotState } from '@stripchatdev/ext-helper/helpers/react';

See Shared Slot State for the communication flow, lifecycle rules, and complete examples.

createSlotStateHost ​

Creates the state owner for a background slot.

ts
const state = createSlotStateHost({
  channel: 'game',
  extHelper,
  initialState: { score: 0 },
});

The host exposes:

MemberDescription
getState()Returns the current state.
setState(partialState)Applies a shallow partial update.
unsubscribe()Stops sharing the state.

createSlotStateClient ​

Creates a state client for a visual slot. Use the same channel as the background host.

ts
const state = createSlotStateClient({
  channel: 'game',
  extHelper,
});

The client exposes getSnapshot(), setState(partialState), and subscribe(). Initially, getSnapshot() returns isLoading: true and state: null. The client state changes when the background host publishes an update.

useSlotState ​

Creates a React client for a visual slot. It returns the current state, loading status, and a function for sending partial updates.

tsx
const { isLoading, state, setState } = useSlotState({
  channel: 'game',
  extHelper,
});