Extensions

Enhance your Frontrow platform with custom extensions and third-party integrations. Build powerful add-ons that extend functionality, integrate with external services, and create unique experiences for your community.

Overview

Frontrow's extension system allows developers and creators to extend the platform's core functionality with custom features, integrations, and user experiences. Whether you want to add new content types, integrate with external APIs, or create custom analytics dashboards, extensions provide the flexibility to tailor Frontrow to your specific needs.

What Extensions Can Do

Custom Content Types: Create new ways to present and interact with content
Third-Party Integrations: Connect with external services and APIs
Analytics & Reporting: Build custom dashboards and data visualizations
Community Features: Add new social and engagement tools
Monetization Tools: Implement custom payment and subscription models
Workflow Automation: Streamline content creation and management processes

Extension Architecture

Extensions run in a secure, sandboxed environment with controlled access to Frontrow's APIs and user data. This ensures platform stability while giving developers the power to create rich, interactive experiences.

Installing Extensions

Installing extensions on your Frontrow platform is straightforward and can be done through the admin dashboard or programmatically via API.

From the Extension Marketplace

Browse Extensions: Navigate to the Extensions section in your admin dashboard
Search & Filter: Find extensions by category, popularity, or functionality
Preview: View screenshots, descriptions, and user reviews
Install: Click install and configure any required settings
Activate: Enable the extension for your platform

Manual Installation

For custom or private extensions, you can install them manually:

# Install via Frontrow CLI
frontrow extension install ./my-extension.zip

# Install from URL
frontrow extension install https://example.com/extension.zip

# Install from npm package
frontrow extension install @mycompany/frontrow-extension

// Install extension via API
const response = await fetch('/api/extensions/install', {
  method: 'POST',
  headers: {
    'Authorization': `Bearer ${apiKey}`,
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({
    source: 'marketplace',
    extensionId: 'custom-analytics-dashboard',
    config: {
      apiKey: 'your-api-key',
      webhookUrl: 'https://your-domain.com/webhook'
    }
  })
});

Configuration

Most extensions require some configuration after installation:

API Keys: Connect to external services
Permissions: Define what data the extension can access
Display Settings: Customize how the extension appears to users
Webhooks: Configure event notifications and data sync

Creating Extensions

Building your own extensions allows you to create exactly the functionality you need for your platform.

Extension Structure

Every Frontrow extension follows a standard structure:

my-extension/
├── manifest.json          # Extension metadata and configuration
├── src/
│   ├── index.js          # Main extension entry point
│   ├── components/       # React components
│   ├── hooks/           # Custom React hooks
│   └── utils/           # Utility functions
├── public/
│   ├── icon.png         # Extension icon
│   └── screenshots/     # Marketplace screenshots
├── docs/
│   └── README.md        # Documentation
└── package.json         # Dependencies and scripts

Manifest File

The manifest.json file defines your extension's metadata and capabilities:

{
  "name": "Custom Analytics Dashboard",
  "version": "1.0.0",
  "description": "Advanced analytics and reporting for your Frontrow platform",
  "author": "Your Company",
  "homepage": "https://your-company.com/extensions/analytics",
  "permissions": [
    "analytics:read",
    "users:read",
    "content:read"
  ],
  "entry": "src/index.js",
  "hooks": [
    "dashboard.sidebar",
    "content.view",
    "user.profile"
  ],
  "settings": {
    "apiKey": {
      "type": "string",
      "required": true,
      "description": "API key for external analytics service"
    },
    "refreshInterval": {
      "type": "number",
      "default": 300,
      "description": "Data refresh interval in seconds"
    }
  }
}

Basic Extension Example

Here's a simple extension that adds a custom widget to the dashboard:

import React from 'react';
import { Extension, useAPI, useSettings } from '@frontrow/extension-sdk';

function AnalyticsDashboard() {
  const api = useAPI();
  const settings = useSettings();
  const [data, setData] = React.useState(null);

  React.useEffect(() => {
    // Fetch analytics data
    api.analytics.getOverview()
      .then(setData)
      .catch(console.error);
  }, [api]);

  if (!data) return <div>Loading...</div>;

  return (
    <div className="analytics-widget">
      <h3>Platform Analytics</h3>
      <div className="metrics">
        <div className="metric">
          <span className="value">{data.totalUsers}</span>
          <span className="label">Total Users</span>
        </div>
        <div className="metric">
          <span className="value">{data.activeUsers}</span>
          <span className="label">Active Users</span>
        </div>
      </div>
    </div>
  );
}

// Register the extension
Extension.register({
  name: 'analytics-dashboard',
  component: AnalyticsDashboard,
  hooks: ['dashboard.sidebar']
});

Advanced Extension Features

import { Extension, useAPI, useSettings, useHooks } from '@frontrow/extension-sdk';

function AdvancedExtension() {
  const api = useAPI();
  const settings = useSettings();
  
  // Use hooks to extend platform functionality
  useHooks({
    'content.beforeSave': async (content) => {
      // Process content before saving
      return await processContent(content);
    },
    'user.afterLogin': async (user) => {
      // Track user login events
      await trackUserEvent('login', user.id);
    }
  });

  // Extension component
  return (
    <div className="advanced-extension">
      {/* Your extension UI */}
    </div>
  );
}

Extension Types

Frontrow supports several types of extensions, each designed for different use cases:

UI Extensions

Add new interface elements and user experiences:

Dashboard Widgets: Custom analytics, metrics, and quick actions
Content Editors: New ways to create and edit content
Player Enhancements: Custom video players and interactive elements
Theme Extensions: Custom styling and branding options

Integration Extensions

Connect Frontrow with external services:

Payment Processors: Custom payment gateways and billing systems
Email Services: Marketing automation and transactional emails
Analytics Platforms: Advanced tracking and reporting
Social Media: Cross-platform posting and engagement tools

Workflow Extensions

Automate and streamline platform operations:

Content Processing: Automatic transcription, translation, and optimization
User Management: Custom onboarding and user lifecycle automation
Moderation Tools: Automated content review and community management
Backup & Sync: Data backup and multi-platform synchronization

Publishing Extensions

Share your extensions with the Frontrow community through the Extension Marketplace.

Submission Process

Prepare Your Extension: Ensure code quality, documentation, and testing
Create Marketplace Listing: Add description, screenshots, and pricing
Security Review: Frontrow reviews all extensions for security and compatibility
Approval & Publishing: Once approved, your extension goes live in the marketplace

Marketplace Guidelines

Code Quality: Follow Frontrow's coding standards and best practices
Security: Extensions must pass security audits and follow permission guidelines
Documentation: Provide clear installation and usage instructions
Support: Maintain your extension and provide user support

Publishing API

// Submit extension to marketplace
const submission = await frontrow.marketplace.submit({
  extensionPath: './my-extension.zip',
  listing: {
    title: 'Custom Analytics Dashboard',
    description: 'Advanced analytics for your platform',
    category: 'analytics',
    pricing: {
      type: 'free' // or 'paid', 'freemium'
    },
    screenshots: [
      'screenshot1.png',
      'screenshot2.png'
    ]
  }
});

Security & Permissions

Frontrow's extension system prioritizes security and user privacy through a comprehensive permission model.

Permission System

Extensions must declare what data and functionality they need access to:

Content Permissions: Read/write access to courses, videos, and other content
User Permissions: Access to user profiles, analytics, and behavior data
System Permissions: Ability to modify platform settings and configurations
Network Permissions: Access to external APIs and services

Security Best Practices

Minimal Permissions: Only request the permissions your extension actually needs
Data Encryption: Encrypt sensitive data both in transit and at rest
Input Validation: Validate all user inputs to prevent security vulnerabilities
Regular Updates: Keep your extension updated with security patches

All extensions run in a sandboxed environment with limited access to system resources. This ensures that even if an extension has vulnerabilities, it cannot compromise the entire platform.

Permission Examples

// Request specific permissions in manifest.json
{
  "permissions": [
    "analytics:read",           // Read analytics data
    "content:write",           // Create/modify content
    "users:read",              // Access user profiles
    "webhooks:create",         // Create webhook endpoints
    "payments:process"         // Handle payment transactions
  ]
}

// Check permissions at runtime
const hasPermission = await api.permissions.check('analytics:read');
if (hasPermission) {
  const data = await api.analytics.getOverview();
}

Best Practices

Follow these guidelines to create high-quality, maintainable extensions:

Development

Modular Design: Break your extension into reusable components
Error Handling: Gracefully handle API failures and edge cases
Performance: Optimize for fast loading and minimal resource usage
Testing: Write comprehensive tests for your extension's functionality

User Experience

Intuitive Interface: Design interfaces that feel native to Frontrow
Responsive Design: Ensure your extension works on all device sizes
Accessibility: Follow accessibility guidelines for inclusive design
Documentation: Provide clear user guides and help documentation

Maintenance

Version Control: Use semantic versioning for your releases
Backward Compatibility: Maintain compatibility with older Frontrow versions
User Feedback: Actively collect and respond to user feedback
Regular Updates: Keep your extension current with platform changes

Extension SDK Reference

Core APIs

import { 
  useAPI,           // Access Frontrow APIs
  useSettings,      // Extension settings
  useHooks,         // Platform hooks
  useAuth,          // Authentication context
  useTheme          // Theme and styling
} from '@frontrow/extension-sdk';

// API usage examples
const api = useAPI();
const users = await api.users.list();
const content = await api.content.get(contentId);
const analytics = await api.analytics.getMetrics();

Available Hooks

Extensions can hook into various platform events:

content.beforeSave - Before content is saved
content.afterSave - After content is saved
user.beforeLogin - Before user login
user.afterLogin - After user login
payment.beforeProcess - Before payment processing
payment.afterProcess - After payment processing

Testing Extensions

// Extension testing setup
import { createExtensionTest } from '@frontrow/extension-sdk/testing';

const { render, mockAPI } = createExtensionTest();

test('analytics widget displays data', async () => {
  mockAPI.analytics.getOverview.mockResolvedValue({
    totalUsers: 1000,
    activeUsers: 250
  });

  const { getByText } = render(<AnalyticsDashboard />);
  
  await waitFor(() => {
    expect(getByText('1000')).toBeInTheDocument();
    expect(getByText('250')).toBeInTheDocument();
  });
});

API Reference - Complete API documentation
SDK Documentation - Platform SDKs and libraries
Webhooks - Event-driven integrations
Authentication - Extension authentication