Commerce Chrome Extension

Download from Chrome Web Store

A complete rewrite of Sovrn Commerce’s browser extension, replacing a legacy JavaScript codebase with modern TypeScript architecture and streamlined CI/CD.

Role: Lead Engineer

The Challenge

The existing Chrome Extension had accumulated years of technical debt. The codebase was vanilla JavaScript without type safety, making refactoring risky and onboarding new developers slow. The build system was a custom Webpack configuration that few understood, and there was no automated testing or deployment pipeline—releases required manual intervention and were error-prone.

User feedback indicated the extension was slow and occasionally buggy, but the codebase made it difficult to diagnose issues or ship fixes confidently.

Technical Approach

Architecture

I rewrote the extension from scratch with a focus on maintainability and developer experience:

TypeScript Everywhere: Full type coverage including background scripts, content scripts, and popup UI
React + Zustand: Component-based UI with lightweight state management
Vite Build System: Sub-second hot module reloading during development
Chrome Storage Sync: State persistence across browser sessions using Chrome’s storage API

Extension Architecture

Chrome extensions have unique constraints—code runs in multiple isolated contexts (popup, background service worker, content scripts) that must communicate via message passing.

Context	Responsibility
Popup	React UI for link creation and management
Background	Service worker handling API calls and auth state
Content Script	Page context for product detection and price scraping

I implemented a typed message-passing system that provided compile-time guarantees for cross-context communication, eliminating a class of runtime errors that plagued the legacy extension.

CI/CD Pipeline

Automated pipeline replacing manual release process:

PR Validation: Linting, type checking, and unit tests on every pull request
E2E Testing: Puppeteer-based integration tests against staging environment
Chrome Web Store Deployment: Tagged releases automatically submit to Chrome Web Store review
Datadog Integration: Real user monitoring for performance and error tracking

Technical Decisions

Decision	Rationale
Vite over Webpack	Dramatically faster builds; native ESM support; simpler configuration
Zustand over Redux	Smaller bundle, simpler API, native Chrome storage middleware
@crxjs/vite-plugin	First-class Vite support for Chrome extensions with HMR
TypeScript strict mode	Catch errors at compile time; self-documenting code

Impact

Improved developer velocity — new features ship faster with confidence
Reduced bug reports — TypeScript and automated testing caught issues before release
Faster onboarding — typed codebase with clear architecture reduced ramp-up time for new engineers
Consistent releases — automated pipeline eliminated manual deployment errors