Extension Data Viewer

Live Demo

A web application built with SvelteKit to view the data compiled in the public Google Sheet created by @j3lte.

This dataset contains publicly available information from the Honey browser extension and was compiled as part of an investigation by @megalag. You can watch the full investigation video here.

Disclaimer: I, Hyperplexed, am not affiliated, associated, authorized, endorsed by, or in any way officially connected with MegaLag, j3lte, or PayPal (Honey). This project is strictly for educational and demonstration purposes.

Features

• Data Visualization: Clean, tabular view of extension data.
• High Performance: Handles 180k+ rows effortlessly using Web Workers and UI Virtualization.
• Search & Filter: Powerful client-side search with multi-term support.
• Sorting: Multi-column sorting capabilities.
• Responsive Design: Built with Tailwind CSS for mobile and desktop support.

Architecture

The application ensures high performance with large datasets (184k+ rows) by offloading search and sorting logic to a Web Worker, keeping the main thread free for UI rendering. This is paired with UI Virtualization, which only renders the DOM nodes currently visible in the viewport, maintaining a constant memory footprint and 60fps scrolling regardless of list size.

Tech Stack

• Framework: SvelteKit (Svelte 5 Runes)
• Styling: Tailwind CSS
• Runtime: Bun
• Data Fetching: Python (Pandas)
• Deployment: Cloudflare Pages

Development

Prerequisites

• Bun (latest)
• Python (3.13+)
• Public Google Sheet URL (must be viewable by anyone with the link)

Setup

1. Clone the repository:

   git clone https://github.com/yourusername/extension-data-viewer.git
   cd extension-data-viewer

2. Install dependencies:

   bun install

3. Install Python dependencies:

   pip install -r requirements.txt

Data Generation

To fetch and process the latest data from the source Google Sheet, you need to set the environment variables. You can create a .env file or export them directly.

Option 1: Using Sheet URL (Recommended)

# .env
SHEET_URL="https://docs.google.com/spreadsheets/d/YOUR_SHEET_ID/edit#gid=YOUR_GID"

Option 2: Using ID and GID

# .env
GOOGLE_SHEET_ID="your_sheet_id"
GOOGLE_SHEET_GID="your_gid"

Optional Fallback If the sheet fetch fails, the script can attempt to recover data from an existing live site:

# .env
SITE_URL="https://your-live-site.com"

Run the generation script:

bun run gen

Data Structure

The application expects specific columns in the source Google Sheet. These are mapped to short keys to minimize the JSON file size.

Sheet Column Name	Key	Description
Name	n	Store Name
URL	u	Store URL (https:// stripped)
Shoppers 30d	s30	Shoppers count (30 days)
Avg Savings 30d	a30	Average savings (30 days)
Affiliate URL	p	Has affiliate link (1 = Yes, 0 = No)
Number of Visible Coupons	c	Coupon count

Running the App

Start the development server:

bun run dev

Build for production:

bun run build

License

MIT