ChessOverLay

Chrome extension scaffold for a chess.com overlay.

Goals (short)

• Get a minimal Manifest V3 extension running on chess.com.
• Inject a transparent overlay layer above the board.
• Keep the overlay aligned on resize / orientation changes.
• Add board-state detection and “good/bad square” visualization.

Repo layout

• manifest.json - Chrome extension manifest (MV3)
• src/content.js - content script that mounts the overlay
• src/overlay.css - overlay styles
• docs/PLAN.md - phased plan and milestones
• docs/CHECKLIST.md - checklists for shipping steps
• docs/NOTES.md - design notes and assumptions

Local setup (manual load)

1. Open chrome://extensions/.
2. Enable Developer mode.
3. Click Load unpacked.
4. Select this folder: ChessOverLay.

Current status

• Attack overlays now render as arrows (green = friendly, red = enemy).
• Arrow rendering lives in src/arrow-renderer.js.

Debug toggle

• Press Ctrl+Shift+O on chess.com to toggle debug mode.
• Click the on-page toggle button (top-right) to toggle the overlay on/off.
• Debug mode adds a red outline and a small “ChessOverLay” badge.
• Debug state is persisted via localStorage key chessOverlayDebug.
• Overlay state is persisted via localStorage key chessOverlayEnabled.
• Debug probe in DevTools Console: window.__chessOverlay.probeBoardStateSources() (results logged; also saved to window.__chessOverlay.lastProbe).
• Move list helper in DevTools Console: window.__chessOverlay.getMoveList() (results logged; also saved to window.__chessOverlay.lastMoves).
• Board state helper in DevTools Console: window.__chessOverlay.getBoardState() (results logged; also saved to window.__chessOverlay.lastBoardState).