Chrome Extension

​

Key Features

​

OnlyFans Integration

• API Integration: Securely connects with OnlyFans APIs using authenticated user sessions
• Fan Data Management: Organizes information about subscribers
• Message Enhancement: Improves messaging capabilities with templates
• UI Integration: Adds helpful overlay elements to the OnlyFans interface

​

Authentication Process

1. Request Interception: The background service worker intercepts network requests to the OnlyFans API endpoint /api2/v2/users/me
2. Data Collection: When a user is logged into OnlyFans, the extension captures:
   • HTTP Request Headers (containing authentication tokens)
   • Cookies (including session data)
   • LocalStorage & SessionStorage data
3. Secure Transmission: This authentication data is securely transmitted to the OnlyAutomator backend via HTTPS:
   Copy

   // Simplified representation of the authentication data sent
   {
     localStorage: { /* OnlyFans localStorage values */ },
     sessionStorage: { /* OnlyFans sessionStorage values */ },
     cookies: { /* OnlyFans cookies */ },
     /* User profile data */
   }
   

4. Backend Validation: The OnlyAutomator backend validates the authentication data and establishes a secure connection between the user’s OnlyFans account and OnlyAutomator services
5. Status Feedback: The extension receives connection status (connected, pending, or error) and updates the UI accordingly

• User credentials are never directly stored in the extension
• Authentication works through legitimate OnlyFans API interactions
• All data is transmitted securely to prevent interception
• The extension only operates with properly authenticated sessions

​

Backend Data Processing Flow

​

1. Initial Data Collection (Write Flow)

1. Extension to Web Application:
   • The extension intercepts OnlyFans API requests and captures authentication data
   • This data is sent to the web application via /api/v2/account-connect
2. Web Application to Supabase:
   • The web application validates and processes the received data
   • The data is stored directly in the Supabase database
3. Web Application to Microservice:
   • After storing the data, the web application triggers the microservice via /api/process-account/{accountId}
   • This only happens during the initial account connection or synchronization
4. Microservice Processing:
   • The microservice performs complex data processing tasks
   • Results are stored back in the Supabase database

​

2. Data Retrieval (Read Flow)

1. Extension to Web Application:
   • The extension requests data from the web application (e.g., /api/v2/get-account)
2. Web Application to Supabase:
   • The web application queries the Supabase database directly
3. Web Application to Extension:
   • The retrieved data is returned to the extension
   • No microservice involvement is required for simple data retrieval

​

3. Data Updates (Update Flow)

1. Extension to Web Application:
   • The extension sends update requests (e.g., /api/v2/update-note)
2. Web Application to Supabase:
   • The web application updates the data directly in Supabase
   • For simple updates, the microservice is not involved

• Fast data retrieval for UI elements
• Secure handling of sensitive authentication data
• Efficient processing through appropriate service utilization
• Separation of concerns between components
• Real-time data availability across the platform

​

Fan Relationship Management

• Fan Notes: Store notes about subscribers for easy reference
• Fan Preferences: Track preferences and interests
• Location Data: Manage fan geographical information
• Spending Data: View messaging and tipping history

​

Creator Tools

• Message Templates: Save and reuse common messages
• PPV Time Graphs: View message monetization patterns by time
• Quick Reminders: Set alarms for important tasks
• Massive PPV: Send Pay-Per-View messages to multiple subscribers
• CRM Panel: Directly manage fan relationships from OnlyFans interface

​

User Interface

​

Popup Interface

​

Content Page Overlay

1. CRM Panel: Fan management panel showing notes and preferences
2. Scripts Popover: Quick access to message templates and automated scripts
3. PPV History Dialog: Track and analyze message pricing patterns
4. Massive PPV Dialog: Interface for sending PPV to multiple subscribers
5. Alarm Popover: Set and manage reminder alarms

​

Technical Implementation

​

Architecture

​

Data Flow

​

Directory Structure

src/
├── pages/
│   ├── popup/            # Extension popup interface
│   ├── content/          # Injected into OnlyFans pages
│   ├── background/       # Service worker scripts
│   └── devtools/         # Developer tools panel
├── components/
│   └── v2/
│       └── features/     # Feature components
│           ├── crm-panel/
│           ├── login/
│           ├── massive-ppv-dialog/
│           ├── scripts-popover/
│           └── ...
├── api/
│   └── v2/               # API integration with backend
├── utils/
│   ├── constants/        # Application constants
│   ├── helpers/          # Helper functions
│   └── scripts/          # Background scripts
│       ├── webrequests.ts  # API interception
│       ├── alarms.ts       # Notification system
│       └── ...
├── @types/              # TypeScript definitions
├── assets/              # Images and static files
└── styles/              # CSS and styling

​

Authentication Flow

1. When a user visits OnlyFans, the extension detects login status
2. The extension intercepts requests to the OnlyFans API endpoint /api2/v2/users/me
3. Authentication data (headers, cookies, localStorage) is captured
4. This data is securely transmitted to the OnlyAutomator backend
5. The backend validates and establishes the connection

• No credentials are stored directly in the extension
• The extension only works with authenticated OnlyFans sessions
• Data synchronization happens securely through the backend