Click the buttons below to simulate how content.tsx mounts a protective Shadow Root (#iplus-problem-root) and teleports React Portals into live Codeforces DOM targets!

8

YES

WHY Shadow DOM? (The CSS Bleed Problem):

Codeforces uses legacy global CSS rules like div { font-family: Arial } and global table styles. If an extension injects normal React components into the page, Codeforces styles distort extension buttons, while extension CSS leaks into Codeforces page elements. Creating a Shadow Root (host.attachShadow({ mode: 'open' })) provides a 100% protective style forcefield in both directions.

WHY React Portals? (Container Locator Pattern):

Instead of scattering raw document.createElement calls, findCodeforcesContainers() queries native targets (.problem-statement .title, #sidebar). ReactDOM.createPortal projects specific UI components into these targets while keeping React state centralized in the Shadow DOM root. Calling removeCodeforcesContainers() on unmount cleans up wrapper nodes to prevent memory leaks.

Low-Level Design (LLD) Breakdown:

• Container Locator Pattern: findCodeforcesContainers() locates 7 native injection targets (.problem-statement .title, #sidebar, .second-level-menu-list) and creates wrapper containers.
• React Portals Setup: createPortal(<ProblemWorkspace />, targetNode) mounts UI trees inside Shadow DOM without polluting host DOM.
• Clean Lifecycle Tear-down: removeCodeforcesContainers() removes all injected wrapper elements on React unmount to ensure zero memory leaks.

WHY a Scraper is Required:

The official Codeforces JSON API returns submission metadata (verdict, time, memory), but never returns raw user source code strings! To enable peer learning where users study friends' solutions directly on the problem page, we must fetch and parse the submission HTML.

HOW the Scraper Pipeline Works:

• Friend Handles: Fetches https://codeforces.com/friends in background to parse active friend handles.
• Status Lookup: Queries contest.status (fast) or falls back to user.status to identify submissions with verdict OK.
• 700ms Throttle: Enforces rateLimitedFetch() with a minimum 700ms delay between API requests to prevent HTTP 429 rate limit bans.
• DOMParser Extraction: Parses raw HTML using new DOMParser().parseFromString() and extracts <pre class="prettyprint"> safely without executing external scripts.

Low-Level Design (LLD) Breakdown:

• Rate Limited Fetch: Throttles API fetches with a minimum 700ms window between requests.
• Two-Tier API Fallback Strategy: Queries contest.status first (scoped fast lookup), falling back to user.status if contest endpoints return empty.
• DOMParser Extraction & Prettify: Uses browser-native DOMParser to extract <pre class="prettyprint"> code blocks securely without script execution risks.

WHY Architectural Dual Realm (Popup vs Content Script)?

The Extension Popup (App.tsx, MainUI.tsx) runs in Chrome toolbar context and dies completely from RAM when closed. The Content Script (workspace_widget.tsx) lives persistently inside codeforces.com/* pages. Both realms decouple data using chrome.storage.

WHY Derived State for Table Filters (filterHelpers.ts)?

Instead of maintaining redundant filtered arrays that easily fall out of sync, problemsToShow is derived on the fly right before render (filterProblems & sortProblems). React recalculates this derived calculation whenever inputs or headers change, guaranteeing 100% data accuracy with zero state-sync bugs.

Low-Level Design (LLD) Breakdown:

• 3-Slot Vertical Snapping Math: getSlotY(slot) calculates target Y coordinates (top: 20px, middle: containerHeight / 2, bottom: containerHeight - 70px).
• Click vs Drag Threshold: Mouse movements < 5px released within 250ms toggle popup visibility, whereas drags compute proximity to minDiff(diffTop, diffMid, diffBot).
• Stable Table Sorting: sortProblems() uses originalIndex as a tie-breaker during multi-column sort operations to maintain deterministic row ordering.

WHY Daily Streaks?

Gamifies competitive programming by rewarding continuous practice habits. Converts raw submission timestamps into a clean local Set<string> of YYYY-MM-DD dates.

HOW Streak Algorithm Operates:

• Current Streak Continuation: Checks if dateSet includes today or yesterday. If yes, a date cursor decrements day-by-day to count active streak length.
• Record Streak Scan: Sorts date strings ascending and runs a linear scan to find maximum consecutive day sequences (diffDays === 1).
• 15-Minute Local Caching: Results are cached in chrome.storage.local under streak_handle with a 15-minute TTL to minimize Codeforces API traffic.

Low-Level Design (LLD) Breakdown:

• DateSet Linear Scan: Converts submission timestamps to local YYYY-MM-DD strings stored in a Set<string>.
• Current Streak Continuation Rule: Checks if dateSet contains today or yesterday. If yes, decrements a date cursor day-by-day to count active streak length.
• Longest Streak Scan: Sorts date array ascending and computes consecutive day deltas (diffDays === 1) to track all-time record streak.

Click above to inspect storage payload...

WHY Storage Tiering?

Chrome extension popup React states are destroyed when the popup closes. We tier storage based on data size and sync frequency:

• chrome.storage.sync (100KB Limit, 8KB/Key): Used for user bookmarks, handle, and custom notes so they sync across all Chrome browsers automatically.
• chrome.storage.local (5MB+ Limit): Used for heavy cached payloads (friends list, raw code snippets, streak history, orb Y-slot).
• chrome.storage.onChanged: Listens to storage mutation events to synchronize state in real time across all open Codeforces tabs without page reloads.

Low-Level Design (LLD) Breakdown:

• Sync Storage (chrome.storage.sync): 100KB quota total, 8KB per key. Used for cf_handle, bookmarks, and user_notes.
• Local Storage (chrome.storage.local): 5MB limit. Used for heavy API payload caches (cached_friends, streak_info, orb coordinates).
• Storage Observer: Listens to chrome.storage.onChanged events for instant cross-tab state updates without page reloads.