``` ██╗ ██╗███████╗██████╗ ██████╗ ███████╗ ██████╗ ██████╗ ███╗ ██╗ ██║ ██║██╔════╝██╔══██╗██╔══██╗██╔════╝██╔════╝██╔═══██╗████╗ ██║ ██║ █╗ ██║█████╗ ██████╔╝██████╔╝█████╗ ██║ ██║ ██║██╔██╗ ██║ ██║███╗██║██╔══╝ ██╔══██╗██╔══██╗██╔══╝ ██║ ██║ ██║██║╚██╗██║ ╚███╔███╔╝███████╗██████╔╝██║ ██║███████╗╚██████╗╚██████╔╝██║ ╚████║ ╚══╝╚══╝ ╚══════╝╚═════╝ ╚═╝ ╚═╝╚══════╝ ╚═════╝ ╚═════╝ ╚═╝ ╚═══╝ ``` **All-in-one website intelligence: tech stack detection, design tokens extraction, API discovery, SEO audit, and security analysis** `AI-Powered` · `6 Parallel Chrome Instances` · `Multi-Agent` · `OSINT`

--- ## What is WebRecon? WebRecon is an AI-powered website analyzer that runs 6 parallel Chrome browser instances simultaneously. Unlike single-purpose tools (Wappalyzer for tech, web-check for OSINT), WebRecon gives you everything in one scan: technology stack, design system, API endpoints, SEO metadata, security headers, and mobile responsiveness. **Use cases:** - **Competitive Intelligence** — Reverse-engineer how competitors built their sites - **Design Replication** — Extract design tokens, components, and assets - **API Discovery** — Find endpoints, auth patterns, and programmatic access opportunities ## Features | Agent | Chrome Port | What it extracts | |-------|-------------|------------------| | **Recon** | 9222 | Tech stack, frameworks, third-party scripts, analytics pixels, GTM | | **Design** | 9223 | CSS tokens, typography, colors, spacing, component libraries | | **API** | 9224 | REST/GraphQL endpoints, auth patterns, WebSocket, rate limits | | **Mobile** | 9225 | Responsive layouts, touch targets, viewport screenshots | | **SEO** | 9226 | Meta tags, OpenGraph, Schema.org, heading hierarchy | | **Security** | 9227 | HTTP headers, cookies, CSP, HSTS, mixed content | ### Output Formats - **Structured JSON** — Machine-readable data for each analysis category - **Screenshots** — Desktop and mobile captures at multiple viewports - **Design Tokens** — W3C DTCG format, exportable to Style Dictionary/Figma - **API Map** — Documented endpoints with auth requirements - **Executive Report** — Human-readable markdown summary ### Why WebRecon vs Other Tools? | Tool | Tech Stack | Design Tokens | API Discovery | SEO | Security | Parallel | |------|:----------:|:-------------:|:-------------:|:---:|:--------:|:--------:| | **WebRecon** | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ 6x | | Wappalyzer | ✅ | ❌ | ❌ | ❌ | ❌ | ❌ | | web-check | ✅ | ❌ | ❌ | ✅ | ✅ | ❌ | | BuiltWith | ✅ | ❌ | ❌ | ❌ | ❌ | ❌ | | Lighthouse | ❌ | ❌ | ❌ | ✅ | ✅ | ❌ | | CSS Extractor | ❌ | ✅ | ❌ | ❌ | ❌ | ❌ | WebRecon combines what you'd need 5+ separate tools for into a single parallel scan. ## Requirements - **Node.js** v20.19+ (for chrome-devtools-mcp) - **Google Chrome** (stable version) - **opencode** or **Claude Code** CLI with MCP support ### Optional - `FIRECRAWL_API_KEY` — For better page enumeration (falls back to sitemap.xml) ## Tested With | Component | Claude Code | opencode | Notes | |-----------|-------------|----------|-------| | Plugin install (`/plugin add`) | 2.0.76 | — | Auto-configures MCP servers | | `/webrecon` command | 2.0.76 | 1.0.193 | Core reconnaissance flow | | Parallel agents (6x Chrome) | 2.0.76 | 1.0.193 | Task tool dispatch | | Skills (`skill/SKILL.md`) | — | 1.0.193 | opencode only | | Agent definitions | — | 1.0.193 | opencode only | | MCP: chrome-devtools-mcp | 0.8.1+ | 0.8.1+ | `--browser-url` flag | ## Installation ### For Claude Code (Plugin) Install as a plugin with one command: ```bash /plugin add ozenalp22/webrecon ``` This automatically configures: - 6 Chrome MCP servers (ports 9222-9227) - The `/webrecon` command Then clone for the launcher script: ```bash git clone https://github.com/ozenalp22/webrecon.git ~/webrecon chmod +x ~/webrecon/scripts/launch-chrome-instances.sh ``` --- ### For opencode (Manual Setup)
Click to expand opencode installation #### 1. Clone the repository ```bash git clone https://github.com/ozenalp22/webrecon.git cd webrecon ``` #### 2. Run interactive installer ```bash ./install.sh ``` Or configure manually: #### 3. Make the launcher executable ```bash chmod +x scripts/launch-chrome-instances.sh ``` #### 4. Configure opencode Add to `~/.config/opencode/opencode.json`: ```json { "mcp": { "chrome-1": { "type": "local", "command": ["npx", "-y", "chrome-devtools-mcp@latest", "--browser-url=http://127.0.0.1:9222"], "enabled": true }, "chrome-2": { "type": "local", "command": ["npx", "-y", "chrome-devtools-mcp@latest", "--browser-url=http://127.0.0.1:9223"], "enabled": true }, "chrome-3": { "type": "local", "command": ["npx", "-y", "chrome-devtools-mcp@latest", "--browser-url=http://127.0.0.1:9224"], "enabled": true }, "chrome-4": { "type": "local", "command": ["npx", "-y", "chrome-devtools-mcp@latest", "--browser-url=http://127.0.0.1:9225"], "enabled": true }, "chrome-5": { "type": "local", "command": ["npx", "-y", "chrome-devtools-mcp@latest", "--browser-url=http://127.0.0.1:9226"], "enabled": true }, "chrome-6": { "type": "local", "command": ["npx", "-y", "chrome-devtools-mcp@latest", "--browser-url=http://127.0.0.1:9227"], "enabled": true } }, "command": { "webrecon": { "description": "WebRecon - reconnaissance tool for competitive analysis", "template": "Run WebRecon on the target URL. Parse mode from arguments (quick|deep|design). Flags: --exclude=, --max-pages=, --design-deep. Target: $ARGUMENTS", "agent": "audit-orchestrator", "subtask": true } } } ``` Symlink the agents and config: ```bash # Agents ln -s $(pwd)/agents/audit-orchestrator.md ~/.config/opencode/agent/ ln -s $(pwd)/agents/audit-recon.md ~/.config/opencode/agent/ ln -s $(pwd)/agents/audit-design.md ~/.config/opencode/agent/ ln -s $(pwd)/agents/audit-api.md ~/.config/opencode/agent/ ln -s $(pwd)/agents/audit-mobile.md ~/.config/opencode/agent/ ln -s $(pwd)/agents/audit-seo.md ~/.config/opencode/agent/ ln -s $(pwd)/agents/audit-security.md ~/.config/opencode/agent/ # Filter config ln -s $(pwd)/config/webrecon-filters.yaml ~/.config/opencode/ # Skill mkdir -p ~/.config/opencode/skill/webrecon ln -s $(pwd)/skill/SKILL.md ~/.config/opencode/skill/webrecon/ ```
## Usage ### 1. Launch Chrome instances ```bash ./scripts/launch-chrome-instances.sh ``` This opens 6 Chrome windows with remote debugging enabled on ports 9222-9227. ### 2. Run WebRecon ```bash # Quick scan (10 pages, ~2-3 min) /webrecon quick example.com # Deep scan (25 pages, ~8-12 min) /webrecon deep example.com # Design-focused (15 pages, skips SEO/security) /webrecon design example.com # Full design extraction with assets /webrecon deep example.com --design-deep ``` ### 3. View results Output saved to `~/webrecon-output///`: ``` ~/webrecon-output/example.com/2024-12-25_143022/ ├── _manifest.json # Run metadata ├── report.md # Executive summary ├── structured/ │ ├── tech-stack.json # Frameworks, libraries, pixels │ ├── design-tokens.json # Colors, typography, spacing │ ├── api-map.json # Endpoints, auth patterns │ ├── seo-data.json # Meta tags, schema.org │ ├── security-report.json │ └── mobile-audit.json ├── screenshots/ │ ├── homepage-desktop-1440.png │ ├── homepage-mobile-375.png │ └── ... └── network/ └── api-endpoints.json ``` ## Configuration ### Page Filtering Edit `config/webrecon-filters.yaml` to customize which pages to exclude: ```yaml exclude: - "/blog/*" - "/docs/*" - "/legal/*" - "/changelog/*" - "*?page=*" - "*?utm_*" limits: quick: 10 deep: 25 design: 15 ``` ### Design Deep Mode Use `--design-deep` flag for full design extraction: - Component inventory with HTML/CSS snippets - Icon library detection + SVG extraction - Font file downloads - Animation/transition capture - Multi-format export (Style Dictionary, Figma Tokens, Tailwind config) ## Project Structure ``` webrecon/ ├── .claude-plugin/ │ └── plugin.json # Claude Code plugin manifest ├── commands/ │ └── webrecon.md # /webrecon command definition ├── scripts/ │ └── launch-chrome-instances.sh ├── config/ │ └── webrecon-filters.yaml # Page exclusion patterns ├── skill/ │ └── SKILL.md # opencode execution methodology ├── agents/ # opencode agent definitions │ ├── audit-orchestrator.md │ ├── audit-recon.md │ ├── audit-design.md │ ├── audit-api.md │ ├── audit-mobile.md │ ├── audit-seo.md │ └── audit-security.md ├── install.sh # Interactive installer (opencode) └── README.md ``` ## How It Works ``` ┌─────────────────────────────────────────────────────────────┐ │ /webrecon deep example.com │ └─────────────────────────────────────────────────────────────┘ │ ▼ ┌─────────────────────────────────────────────────────────────┐ │ 1. ENUMERATE PAGES │ │ sitemap.xml → Firecrawl → browser crawl │ │ Apply exclusion filters, cap by mode │ └─────────────────────────────────────────────────────────────┘ │ ▼ ┌─────────────────────────────────────────────────────────────┐ │ 2. PARALLEL ANALYSIS (6 Chrome instances) │ │ │ │ ┌──────────┐ ┌──────────┐ ┌──────────┐ │ │ │ chrome-1 │ │ chrome-2 │ │ chrome-3 │ │ │ │ RECON │ │ DESIGN │ │ API │ │ │ └──────────┘ └──────────┘ └──────────┘ │ │ ┌──────────┐ ┌──────────┐ ┌──────────┐ │ │ │ chrome-4 │ │ chrome-5 │ │ chrome-6 │ │ │ │ MOBILE │ │ SEO │ │ SECURITY │ │ │ └──────────┘ └──────────┘ └──────────┘ │ └─────────────────────────────────────────────────────────────┘ │ ▼ ┌─────────────────────────────────────────────────────────────┐ │ 3. COMPILE OUTPUT │ │ Structured JSON + Screenshots + Report │ └─────────────────────────────────────────────────────────────┘ ``` ## Troubleshooting ### Chrome instances not starting ```bash # Check if ports are in use lsof -i :9222-9227 # Kill existing debug instances pkill -f "remote-debugging-port=922" # Rerun launcher ./launch-chrome-instances.sh ``` ### MCP connection errors 1. Ensure Chrome instances are running before starting your AI assistant 2. Restart the AI assistant after adding MCP server config 3. Check that `npx` is available in your PATH ### Slow page enumeration - Set `FIRECRAWL_API_KEY` for faster enumeration - Or ensure target site has a `sitemap.xml` ## Changelog See [CHANGELOG.md](CHANGELOG.md) ## License [The Unlicense](https://unlicense.org/) - Public domain. Do whatever you want, no attribution needed. ## Contributing Issues and PRs welcome!