Overview
This Chrome extension is a browser-engineering prototype exploring real-time chess engine integration. It parses a rendered board, generates FEN positions, communicates asynchronously with Stockfish, and turns engine output into understandable position evaluations.
My work covered the TypeScript architecture, DOM parsing, state management, WebWorker communication, visual evaluation layer, and build pipeline. The portfolio presents it as a controlled analysis and learning project.Responsible Use
The repository contains live-page integration and an automated move-execution mode built to test browser automation. Those capabilities must not be used during competitive or rated play, or in any context that violates a platform's fair-play rules. The engineering value demonstrated here is the browser architecture, state extraction, asynchronous engine integration, and explainable evaluation interface.Key Features
| Feature | Description |
|---|
| Position Analysis | Board monitoring with FEN position extraction for controlled analysis |
| Move Evaluation | Centipawn scoring with principal variation display |
| Visual Suggestions | Highlighted move recommendations on the board |
| Advantage Tracking | Dynamic progress bar showing position evaluation |
| Automation Test Mode | Move execution capability for isolated browser-automation testing, not competitive play |
| Draggable UI | Compact, minimizable panel that can be positioned anywhere |
Technical Architecture
The extension follows a modular, service-oriented architecture:
src/
├── types/ # TypeScript type definitions
│ ├── chess.types.ts # FEN, moves, scores
│ ├── engine.types.ts # Engine communication
│ └── ui.types.ts # UI component types
├── services/ # Core services
│ ├── board.service.ts # Board state & FEN generation
│ └── engine.service.ts # Stockfish WebWorker
├── components/ # UI components
│ ├── panel.component.ts # Main control panel
│ └── highlights.component.ts # Move highlighting
├── core/ # Business logic
│ ├── analysis.manager.ts # Analysis state management
│ └── autoplay.manager.ts # Automated move execution
└── content/ # Entry point
└── assistant.ts # Main orchestrator
Design Patterns
- Service Pattern - Encapsulated services for board and engine interaction
- Observer Pattern - Event-based engine updates with subscription model
- Singleton Pattern - Single instance services for state consistency
- Facade Pattern - ChessAssistant class orchestrates all subsystems
Technical Stack
| Technology | Purpose |
|---|
| TypeScript 5.4 | Type-safe development with strict mode |
| Vite 5.2 | Fast builds with HMR and optimized bundling |
| CRXJS | Chrome extension development with Vite |
| Chrome Extension MV3 | Modern manifest version with service workers |
| Stockfish | Chess engine for position analysis |
| ESLint + Prettier | Code quality and formatting |
| GitHub Actions | CI/CD pipeline |
Core Features
FEN Generation
The board service extracts piece positions from the DOM and generates standard FEN notation:
Engine Communication
Asynchronous communication with Stockfish via WebWorker:
Event-Driven Updates
Real-time analysis updates via subscription pattern:
UI Features
- Compact Design - 260px width, minimal footprint
- Draggable Panel - Position anywhere on screen
- Minimizable - Collapse to small "+" button at 50% opacity
- Color Selection - Analyze from White or Black's perspective
- Move History - Color-coded ratings (Excellent/Good/OK/Poor)
Technologies Summary
| Category | Technologies |
|---|
| Language | TypeScript 5.4, ES2022 |
| Build | Vite 5.2, CRXJS |
| Extension | Chrome Manifest V3 |
| Engine | Stockfish WASM |
| Quality | ESLint, Prettier |
| CI/CD | GitHub Actions |
