# procraftkrd/chesscube-extension architecture

> Architecture diagram of the GitHub repository procraftkrd/chesscube-extension, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-09-26). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/procraftkrd/chesscube-extension
- Repository: https://github.com/procraftkrd/chesscube-extension

## Overview

ChessCube Assistant is a Chrome extension that detects chess positions on webpages, requests an external engine evaluation, and highlights the suggested move. The main workflow runs from page observation and FEN construction through background message routing to side-panel analysis and a highlight command back to the page. The side panel also provides bilingual presentation and customization. The README documents these capabilities; sampled source supports the routing, parsing, evaluation, and overlay links shown here, while unsampled implementation details are represented only where the tree supports a path.

Main entry points: [`sidepanel.html`](https://github.com/procraftkrd/chesscube-extension/blob/main/sidepanel.html) (Side panel UI), [`background.js`](https://github.com/procraftkrd/chesscube-extension/blob/main/background.js) (Message router), [`sidepanel.js`](https://github.com/procraftkrd/chesscube-extension/blob/main/sidepanel.js) (Evaluation and results), [`content-universal.js`](https://github.com/procraftkrd/chesscube-extension/blob/main/content-universal.js) (Board observer)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_page["Page integration"]
  node_observer["Board observer"]
  node_parser["Position parser"]
  node_overlay["Move overlay"]
end

subgraph group_coordination["Extension coordination"]
  node_background["Message router<br/>[background.js]"]
end

subgraph group_panel["Analysis panel"]
  node_panelui["Side panel UI<br/>[sidepanel.html]"]
  node_panelstyles["Panel styling<br/>[sidepanel.css]"]
  node_preferences["Preferences and language<br/>[sidepanel.js]"]
  node_analysis["Evaluation and results<br/>[sidepanel.js]"]
end

node_user(("User"))
node_chesspage["Chess webpage"]
node_engine["Chess evaluation API"]

node_user -->|"opens"| node_panelui
node_chesspage -->|"DOM changes"| node_observer
node_observer -->|"scans board"| node_parser
node_parser -->|"sends FEN"| node_background
node_background -->|"relays position"| node_panelui
node_panelui -->|"loads settings"| node_preferences
node_preferences -->|"applies language and theme"| node_panelui
node_panelui -->|"provides controls"| node_analysis
node_analysis -->|"requests evaluation"| node_engine
node_engine -->|"returns analysis"| node_analysis
node_analysis -->|"shows results"| node_panelui
node_analysis -->|"sends highlight command"| node_background
node_background -->|"dispatches highlight"| node_overlay
node_overlay -->|"draws overlay"| node_chesspage
node_background -->|"injects or requests scan"| node_observer
node_panelui -->|"uses styles"| node_panelstyles

click node_observer "https://github.com/procraftkrd/chesscube-extension/blob/main/content-universal.js"
click node_parser "https://github.com/procraftkrd/chesscube-extension/blob/main/content-universal.js"
click node_overlay "https://github.com/procraftkrd/chesscube-extension/blob/main/content-universal.js"
click node_background "https://github.com/procraftkrd/chesscube-extension/blob/main/background.js"
click node_panelui "https://github.com/procraftkrd/chesscube-extension/blob/main/sidepanel.html"
click node_panelstyles "https://github.com/procraftkrd/chesscube-extension/blob/main/sidepanel.css"
click node_preferences "https://github.com/procraftkrd/chesscube-extension/blob/main/sidepanel.js"
click node_analysis "https://github.com/procraftkrd/chesscube-extension/blob/main/sidepanel.js"

classDef toneNeutral fill:#f8fafc,stroke:#334155,stroke-width:1.5px,color:#0f172a
classDef toneBlue fill:#dbeafe,stroke:#2563eb,stroke-width:1.5px,color:#172554
classDef toneAmber fill:#fef3c7,stroke:#d97706,stroke-width:1.5px,color:#78350f
classDef toneMint fill:#dcfce7,stroke:#16a34a,stroke-width:1.5px,color:#14532d
classDef toneRose fill:#ffe4e6,stroke:#e11d48,stroke-width:1.5px,color:#881337
classDef toneIndigo fill:#e0e7ff,stroke:#4f46e5,stroke-width:1.5px,color:#312e81
classDef toneTeal fill:#ccfbf1,stroke:#0f766e,stroke-width:1.5px,color:#134e4a
class node_observer,node_parser,node_overlay,node_user toneBlue
class node_background toneAmber
class node_panelui,node_panelstyles,node_preferences,node_analysis,node_engine toneMint
class node_chesspage toneIndigo
```

## Components

### Page integration

- [Board observer](https://github.com/procraftkrd/chesscube-extension/blob/main/content-universal.js): `content-universal.js`
- [Position parser](https://github.com/procraftkrd/chesscube-extension/blob/main/content-universal.js): `content-universal.js`
- [Move overlay](https://github.com/procraftkrd/chesscube-extension/blob/main/content-universal.js): `content-universal.js`

### Extension coordination

- [Message router](https://github.com/procraftkrd/chesscube-extension/blob/main/background.js): `background.js`

### Analysis panel

- [Side panel UI](https://github.com/procraftkrd/chesscube-extension/blob/main/sidepanel.html): `sidepanel.html`
- [Panel styling](https://github.com/procraftkrd/chesscube-extension/blob/main/sidepanel.css): `sidepanel.css`
- [Preferences and language](https://github.com/procraftkrd/chesscube-extension/blob/main/sidepanel.js): `sidepanel.js`
- [Evaluation and results](https://github.com/procraftkrd/chesscube-extension/blob/main/sidepanel.js): `sidepanel.js`

### Other components

- **User**
- **Chess webpage**
- **Chess evaluation API**

## Connections

- User → Side panel UI: opens
- Chess webpage → Board observer: DOM changes
- Board observer → Position parser: scans board
- Position parser → Message router: sends FEN
- Message router → Side panel UI: relays position
- Side panel UI → Preferences and language: loads settings
- Preferences and language → Side panel UI: applies language and theme
- Side panel UI → Evaluation and results: provides controls
- Evaluation and results → Chess evaluation API: requests evaluation
- Chess evaluation API → Evaluation and results: returns analysis
- Evaluation and results → Side panel UI: shows results
- Evaluation and results → Message router: sends highlight command
- Message router → Move overlay: dispatches highlight
- Move overlay → Chess webpage: draws overlay
- Message router → Board observer: injects or requests scan
- Side panel UI → Panel styling: uses styles