Custom Plugin

This section introduces how to develop a custom plugin to provide additional functionality for the Replay SDK.

Custom Matcher

import { ExtensionType } from '@/models/Extension/Type';
import Extension from '@/packages/core/Extension';

const ImeanInput = Extension.create({
  name: 'ImeanInput',

  version: '0.0.1',

  description: 'Find the Input element with ID imean',

  type: ExtensionType.Matcher,

  scenario: 'All',

  getDefaultOptions: undefined,

  priorityMatch: ['ImeanInputMatch'],

  async addMatchRules(manager, options) {
    const step = await manager.getActionStep();
    if (!step) return undefined;
    return document.querySelector<HTMLElement>('#imean') || undefined;
  },

  async addMatchBeforeRules() {
    return undefined;
  }
});

export default Selector;

Custom Trigger

import { dispatchEvents } from '@/lib/utils/dispatchEvents';
import { ExtensionType } from '@/models/Extension/Type';
import Extension from '@/packages/core/Extension';

export interface ImeanTypeOptions {
  value: string;
}

const ImeanType = Extension.create<ImeanTypeOptions>({
  name: 'ImeanType',

  version: '0.0.1',

  description: 'The trigger for the Imean type',

  type: ExtensionType.Trigger,

  scenario: 'ImeanType',

  getDefaultOptions: undefined,

  addTriggerRules: {
    type: async ({ manager, options, target }) => {
      if (!target || !options?.value) return false;
      const step = await manager.getActionStep();
      if (!step) return false;
      const { bubbles, cancelable } = step;
      const eventInit = { bubbles, cancelable };

      if (target.tagName === 'INPUT') {
        (target as HTMLInputElement).value = options.value;
        dispatchEvents(target, ['focusin', 'focus', 'input', 'change'], eventInit);
        return true;
      }
      return false;
    }
  }
});

export default Beijingbank;