FlowCapture is a Chrome extension project for recording and replaying browser UI workflows.
This workspace contains the extension implementation and project context notes used for ongoing development.
chrome-extension/- Manifest V3 extension source code (popup UI, background service worker, content script, icons).
.context/- Working context files for project state, lessons learned, task tracking, blockers, and history.
- Records in-page actions such as click, fill, select, keypress, and navigation events.
- Saves recordings and categories to
chrome.storage.local. - Replays recorded flows in the active tab with step progress updates.
- Uses resilient selector fallbacks to improve playback reliability on SPA and Blazor-style apps.
- Open Chrome and go to
chrome://extensions. - Turn on Developer mode.
- Choose Load unpacked.
- Select the
chrome-extension/folder in this workspace. - Open the FlowCapture popup and start a recording.
chrome-extension/manifest.json- Extension permissions, popup, service worker, and content script wiring.
chrome-extension/background/background.js- Message router, session state, CRUD for recordings/categories, playback dispatch.
chrome-extension/content/recorder.js- Action capture, selector generation, page overlay, playback executor.
chrome-extension/popup/popup.html- Popup UI shell with home/edit/categories/action editor views.
chrome-extension/popup/popup.js- Popup application state, rendering, and command handlers.
chrome-extension/popup/popup.css- Popup visual design and transitions.
- Extension-specific implementation details:
chrome-extension/README.md - Project context and status:
.context/active-context.md - Lessons and decisions:
.context/lessons.md,.context/memories.md - Task tracking and history:
.context/tasks.md,.context/tasks-history.md
- Add an automated lint/validation command for local checks.
- Add export/import for recordings.
- Expand troubleshooting docs for selector drift and dynamic DOM behavior.