- High-Level Overview Codeforces Webpage ↓ Content Script Injection (Plasmo) ↓ Floating React UI + Monaco Editor ↓ Run Button → Judge0 Public API ↓ Execution Result → Output Panel
No backend server required.
- Architecture Layers 2.1 Browser Extension Layer
Framework: Plasmo Responsibilities:
Inject UI into Codeforces pages
Manage storage
Handle permissions
Provide background worker
2.2 UI Layer (React)
Components:
FloatingPanel
HeaderBar
MonacoEditor
LanguageSelector
RunButton
OutputPanel
TestCaseTabs
Handles:
Drag & resize
State management
Rendering results
2.3 Data Layer Local Storage
Using:
chrome.storage.local
Stores:
Code per problem URL
Language selection
Panel size/position
2.4 External Service Layer Judge0 Public API
Used for:
Code compilation
Execution
Runtime measurement
Communication:
POST submission → receive token
GET result via polling
Decode base64 → compare output
- Security Model
No credentials stored
No background scraping
Only visible UI actions
Strict CSP compliance
No eval / unsafe scripts
- Performance Design
Lazy-load Monaco
Debounced polling
Minimal DOM queries
Memory target < 150MB
- Cross-Browser Strategy
Plasmo build targets:
Chrome
Edge
Firefox
Single codebase.