Chrome Extension for Vinyl Collectors
Diggin.
Digging is a 'Brutalist' style Chrome Extension designed to reduce the friction between discovering music and collecting it. Instead of manually copying album names, opening a new tab, navigating to Discogs, and filtering for vinyl, users simply highlight text and right-click. The extension intelligently queries the Discogs API, filters for LP formats (ignoring CDs and singles), and injects a non-intrusive popup with the current market floor price directly into the active viewport.
The Problem
For vinyl collectors, reading music reviews or browsing online stores is often a disconnected experience. You see an album you like, but checking its market value requires a tedious multi-step process: copy text, open Discogs, search, filter by format, and sort by condition. This friction often breaks the flow of discovery.
The Solution
Diggin removes the context switch. By leveraging the Chrome Context Menu API, the extension brings the marketplace data to the user. I designed the UI with a 'Brutalist' aesthetic—high contrast black and yellow—to ensure readability on any background while maintaining a distinct brand identity.
Technical Challenges
- API 'Noise' Filtering: The Discogs search API is noisy. Searching for an album often returns CD reissues or 7-inch singles first. I implemented a strict filtering logic in the background script to prioritize 'LP' formats and 'Master' releases, ensuring the price shown reflects the actual vinyl record.
- Viewport Awareness: A common issue with injected UIs is screen clipping. If a user selects text at the very bottom of the page, a standard popup gets cut off. I wrote a custom positioning hook that measures the selection's bounding client rect against `window.innerHeight`. If space is tight, the popup automatically inverts its position and animation direction to render *above* the cursor.
- Manifest V3 Compliance: Moving away from persistent background pages to Service Workers required rethinking how state is handled. The extension uses `activeTab` and `scripting` permissions to inject code on-demand, ensuring a light memory footprint and compliance with modern browser security standards.
Key Features
Context Menu Integration
- Adds a native right-click option to 'Search Vinyl' on any text selection.
- Sanitizes user selection to remove special characters and optimize API query relevance.
Smart Market Pricing
- Fetches real-time market data from the Discogs Marketplace API.
- Implements a 'Market Floor' logic to display the lowest available price for Mint/Near Mint copies.
- Automatically filters out CD, Cassette, and Single formats to ensure LP relevance.
Adaptive UI Injection
- Programmatically injects a React component into the host page's DOM.
- Calculates viewport constraints to intelligently render the popup above or below the cursor to prevent clipping.
- Uses isolated styling to ensure the extension UI is not affected by the host website's CSS.
Technology Stack
Core
UI & Injection
Data & Build
Gallery
