Chrome ExtensionStatsigExperimentationUI/UX

Statsig Play

A powerful Chrome extension for managing Statsig experiments. Designed for developers and QA teams to easily test different experiment variations without touching code, offering a superior UI compared to default tools.

Try Interactive Preview
ID.me
STATSIGPLAY

a_a_localisation_all

Active
Current Bucket
show
Group Distribution (50% Allocation)
control (50%)
show (50%)
Override Group

a_a_localisation_usa_only

Active
Current Bucket
controlOVERRIDE
Active Override
control
Group Distribution (50% Allocation)
control (50%)
show (50%)
Override Group

push_notification_text

Active
Current Bucket
control
Group Distribution (100% Allocation)
control (50%)
show (50%)
Override Group

🎯 Overview

**Statsig Play** is a Chrome extension that integrates seamlessly with Statsig's experimentation platform. It provides a user-friendly interface to view, search, filter, and override A/B test experiments in real-time.

✨ Key Features

# 🔬 Experiment Management

- **View All Experiments**: See status (Active, Setup, etc.), current bucket, and group distributions.

- **Experiment Overrides**: Force yourself into any experiment group ('Control' or 'Show') instantly.

- **Environment Support**: Apply overrides specifically for Production, Staging, or Development.

- **Smart Filtering**: Filter by status (Active, Abandoned, Decision Made) or search by name.

# 🎨 User Interface

- **Modern Design**: Clean, dark-mode compatible UI with smooth animations.

- **Visual Feedback**: Progress bars for allocation, color-coded status dots, and clear override indicators.

- **Auto-Reload**: Automatically refreshes the page when an override is applied.

🛠 Technical Architecture

The extension is built with a modern stack focusing on performance and security:

- **Frontend**: React 18, Tailwind CSS, Framer Motion.

- **Storage**: Chrome Storage API for caching experiments and preferences.

- **Communication**: Chrome Message Passing between popup and content scripts.

- **Backend**: AWS Lambda (serverless) for secure API communication with Statsig.

# Security & Access

- **Domain Restriction**: Strictly limited to authorized Quince domains and localhost.

- **Authentication**: Uses existing session cookies for seamless zero-config access.

- **Intruder Detection**: Fun, themed "Intruder Screen" for unauthorized access attempts.

How to Install

  1. Download the zip file above.
  2. Unzip the file to a folder.
  3. Go to chrome://extensions
  4. Enable Developer mode (top right).
  5. Click Load unpacked.
  6. Select the unzipped folder.

Key Features

  • Zero Configuration - Works instantly
  • Lightning Fast with cached data
  • Experiment Overrides & Force Buckets
  • Visual Progress Bars for distribution
  • Environment-Specific Overrides
  • Dark Mode Support
  • Smart Filtering & Search

Tech Stack

React 18TypeScriptTailwind CSSFramer MotionChrome Extension APIAWS Lambda (Backend)Serverless Framework