Case study · Manifold Ventures · 2.5 years (ongoing)

MeaVana: Productivity Dashboard Chrome Extension

A feature-rich Chrome extension that transforms the new tab page into a customizable productivity dashboard with widgets, wallpapers, and integrations—serving 55K+ users worldwide.

Client Manifold Ventures
Duration 2.5 years (ongoing)
Role Lead Developer & Key Contributor
55K+
Active Users
61K+
Lines of Code
642
My Commits
1,964
Total Commits
354
Source Files

Key challenges.

  • Managing state across isolated Chrome extension contexts (background, content, newtab)
  • Building a type-safe RPC system for cross-context communication
  • Handling state migrations across 26 schema versions without data loss
  • Optimizing performance for instant new tab loading
  • Implementing rich features (music player, news feeds, widgets) within extension constraints

Implementation highlights.

01

Cross-Context State Synchronization

Problem

Chrome extensions run code in isolated contexts: service worker, content scripts, and UI pages. These contexts can't share memory, making state management complex. Users expect changes in one context to instantly reflect everywhere.

Solution

Built a custom RPC messaging system with type-safe proxies. The background service worker serves as the single source of truth, persisting state to IndexedDB. UI contexts use Valtio for reactive state that syncs via message passing. State updates broadcast to all tabs automatically.

Impact

Seamless user experience across all extension surfaces. Settings changed in the side panel instantly appear in new tabs. The architecture handles 55K+ users without state corruption or sync issues.

02

Type-Safe State Path Updates

Problem

With a complex nested state schema (quote.random.data.author, weather.forecast.daily), ensuring type safety for deeply nested updates is difficult. Typos in paths cause runtime errors that are hard to debug.

Solution

Integrated HotScript library for compile-time path validation. setState('quote.random.data.author', value) is fully type-checked—invalid paths fail at compile time, not runtime. Combined with Zod schemas for runtime validation of external data.

Impact

Zero type-related bugs in state management. Developers get autocomplete for all state paths. Refactoring state shape is safe—the compiler catches all outdated references.

03

Offscreen Audio Architecture

Problem

Chrome Manifest V3 removed persistent background pages, making background music playback challenging. Service workers can't access Audio APIs, and playing in the newtab context stops when the tab closes.

Solution

Implemented Chrome's Offscreen API to create an isolated document specifically for audio playback. The background service worker controls playback via messaging, while the offscreen document handles actual audio. State syncs across all contexts so any tab can control music.

Impact

Uninterrupted background music that persists across tab changes. Users can control playback from any new tab or the side panel. The architecture works within Manifest V3 constraints.

04

26-Version State Migration System

Problem

With 2.5 years of active development, the state schema evolved significantly. Users updating from old versions need their data migrated without loss. Migrations must handle partial states and edge cases.

Solution

Sequential migration system where each version has a migration function. On extension update, migrations run in order from user's version to current. Migrations can be async for API calls. Never modify existing migrations—only append new ones.

Impact

Zero data loss across 26 schema versions. Users upgrading from any previous version get their bookmarks, settings, and preferences preserved. The system handles edge cases like missing fields gracefully.

Tech stack.

TypeScriptReact 19Chrome Manifest V3ViteStyled ComponentsValtioZodLexical EditorFramer MotionPostHogSentry

Overview

MeaVana is a Chrome extension that replaces the default new tab page with a feature-rich productivity dashboard. Users can customize their experience with widgets, wallpapers from Unsplash, bookmarks, news feeds, world clocks, and integrations with 70+ services. The extension has grown to serve over 55,000 users worldwide with 88 themed extension variants.

I joined the project after the initial architecture was established and became a key contributor, responsible for major features, performance optimizations, and maintaining the codebase as it scaled.

My Role

As the second-largest contributor (642 of 1,964 commits), I've been deeply involved in:

  • Building and maintaining core features
  • Implementing the analytics and error tracking infrastructure
  • Performance optimization for instant new tab loading
  • State management improvements and migrations
  • Code review and quality standards

Technical Architecture

Chrome Extension Constraints

Building for Chrome extensions means working within strict constraints:

  • Manifest V3: No persistent background pages, limited APIs
  • Context Isolation: Service worker, content scripts, and UI pages can't share memory
  • Performance: New tabs must load instantly—users notice any delay
  • Security: Content Security Policy restricts what code can run

State Management Strategy

The extension uses a two-tier state system:

Persistent Layer (Background Service Worker):

  • Single source of truth stored in IndexedDB via chrome.storage.local
  • Handles all state mutations
  • Broadcasts changes to all contexts

Reactive Layer (UI Contexts):

  • Valtio proxies for reactive state
  • Instant UI updates on state changes
  • Syncs with background via custom RPC messaging

Key Integrations

The extension integrates with numerous external services:

  • Unsplash API: Dynamic wallpapers with search
  • Weather APIs: Location-based forecasts
  • News RSS: Customizable news feeds with scraping
  • CoinCap: Cryptocurrency tickers
  • Chrome APIs: Bookmarks, history, top sites, tab management

Analytics & Monitoring

Implemented comprehensive observability:

  • PostHog: Feature adoption tracking, user engagement metrics
  • Sentry: Error tracking with source maps for production debugging
  • Feature Discovery: Contextual onboarding based on user behavior

Results

The extension has achieved significant scale:

  • 55K+ Users: Serving users worldwide with consistent performance
  • 4.5+ Star Rating: High user satisfaction on Chrome Web Store
  • 50K+ Daily Active Users: Regular engagement with the dashboard
  • Zero Critical Bugs: Robust error handling and state management

Tech Stack Summary

Core: TypeScript, React 19, Vite, Chrome Manifest V3

State: Valtio (reactive), IndexedDB (persistent), Custom RPC (sync)

UI: Styled Components, Framer Motion, Radix UI, Lexical Editor

Integrations: Unsplash, Weather APIs, RSS feeds, CoinCap, Chrome APIs

Observability: PostHog (analytics), Sentry (errors), Custom event tracking

Quality: ESLint, Prettier, Lefthook, Strict TypeScript, Zod validation

Want something similar?

Ready to
ship?

I build production-grade applications with the same attention to architecture and reliability.

vadegharraj@gmail.com Book a call ↗