How breschio/drawbridge works
Drawbridge is a Chrome extension for turning browser-based UI feedback into project-local tasks that AI coding tools can process. The main flow is annotate a running page, capture context and a screenshot, save and sync tasks, then process them through the deployed bridge workflow. The graph also includes documented rectangle annotations, task-status tracking, project connection, workflow deployment, and legacy-file migration. Some subsystem links are based on README descriptions because the relevant implementation excerpts were incomplete.
Main entry points: content_script.js Annotation Capture · background.js Extension Toolbar · taskStore.js Task Store · moat.js Task Drawer
Components 15
Browser Capture
- Extension Toolbar
chrome-extension/background.js - Annotation Capture
chrome-extension/content_script.js - Task Drawer
chrome-extension/moat.js - Screenshot Capture
chrome-extension/background.js
Task Management
- Task Store
chrome-extension/utils/taskStore.js - Legacy Migration
chrome-extension/utils/migrateLegacyFiles.js - Markdown Generator
chrome-extension/utils/markdownGenerator.js - Safe Local Storage
chrome-extension/utils/safeStorage.js
Project Sync
- Connected Project Files
- Directory Handle Persistence
chrome-extension/utils/persistence.js
Agent Workflows
- Workflow Templates
chrome-extension/rules-templates - Bridge Workflow
chrome-extension/rules-templates/bridge.md
Other components
- Developer
- Running App
- AI Coding Tool
Connections 20
- Developer → Extension Toolbar: opens drawer
README.md - Extension Toolbar → Annotation Capture: checks readiness
chrome-extension/background.js - Extension Toolbar → Task Drawer: toggles
chrome-extension/background.js - Developer → Annotation Capture: annotates UI
README.md - Annotation Capture → Running App: reads element context
README.md - Annotation Capture → Screenshot Capture: requests capture
README.md - Screenshot Capture → Running App: captures visible tab
chrome-extension/background.js - Annotation Capture → Task Store: saves tasks
chrome-extension/content_script.js - Task Drawer → Task Store: displays task queue
README.md - Annotation Capture → Markdown Generator: rebuilds task list
chrome-extension/content_script.js - Task Store → Connected Project Files: reads and writes tasks
chrome-extension/utils/taskStore.js - Markdown Generator → Connected Project Files: writes task summary
chrome-extension/utils/markdownGenerator.js - Developer → Directory Handle Persistence: connects project
README.md - Directory Handle Persistence → Connected Project Files: persists access handle
chrome-extension/utils/persistence.js - Annotation Capture → Workflow Templates: deploys workflows
chrome-extension/content_script.js - Workflow Templates → Connected Project Files: installs agent files
README.md - AI Coding Tool → Bridge Workflow: runs workflow
README.md - Bridge Workflow → Connected Project Files: processes task files
README.md - Legacy Migration → Connected Project Files: converts legacy files
chrome-extension/utils/migrateLegacyFiles.js - Safe Local Storage → Connected Project Files: stores local values