Feature Request: Chrome Extension for Direct Browser Tab Control (like Playwright Inspector)

[dvirben123]

Feature Request: Chrome Extension for Direct Browser Tab Control

Summary

Add a Chrome extension (similar to Playwright's codegen/inspector) that allows users to interact with any open Chrome tab directly, without requiring --remote-debugging-port=9222 setup.

Motivation

Currently, DOMGuard requires:

1. Starting Chrome with --remote-debugging-port=9222
2. Running commands from CLI
3. Managing which tab is active

Pain points:

• Can't inspect existing browser sessions (e.g., authenticated tabs)
• Requires restarting browser with debugging flags
• No visual feedback in browser during automation
• Can't quickly switch between manual browsing and automation

Proposed Solution

Chrome Extension Features

1. Direct Tab Access

   • Click extension icon to "connect" current tab to DOMGuard
   • No need for remote debugging port
   • Works with existing browser sessions

2. Visual Inspector (like Playwright)

   • Hover over elements to highlight them
   • Click to copy selector
   • Right-click → "Inspect with DOMGuard" → generates CLI command
   • Show element properties in extension popup

3. Action Recorder

   • Click "Record" button in extension
   • Perform actions manually (click, type, navigate)
   • Extension generates DOMGuard CLI commands
   • Copy/paste commands or save as workflow

4. Live Command Execution

   • Extension popup has command input
   • Execute DOMGuard commands directly from browser
   • See results in extension popup
   • Keep CLI workflow for automation

Example User Flow

Current workflow:

# Terminal
chrome --remote-debugging-port=9222
domguard interact click ".button"

With extension:

1. Browse to any page (already authenticated, no restart)
2. Click DOMGuard extension icon
3. Extension popup shows:
   • "Inspect Element" mode (hover to see selectors)
   • "Record Actions" button
   • Command input field
   • Recent commands history
4. Click element → extension shows: domguard interact click ".submit-btn"
5. Copy command for automation script

Technical Approach

Extension Architecture:

• Content Script: Injected into page for element inspection/highlighting
• Background Script: Manages tab connections, runs commands
• Popup UI: Command input, history, settings
• Native Messaging: Optional - communicate with CLI for advanced features

Compatibility:

• Keep existing CLI workflow (no breaking changes)
• Extension complements CLI, doesn't replace it
• Share same command syntax and options

Similar Tools Reference

Playwright Inspector

• Visual element picker
• Generates code automatically
• Records user actions
• https://playwright.dev/docs/codegen

Puppeteer Recorder (Chrome DevTools)

• Built into DevTools > Recorder tab
• Records flows, exports code
• Limited to Puppeteer API

DOMGuard Extension Advantages

• Simpler syntax than Playwright (standard CSS only)
• CLI-first design - extension generates CLI commands, not code
• Local-first - no external dependencies
• Lightweight - no Node.js, just Rust binary + extension

Benefits

For Developers

• ✅ Faster selector discovery (visual picking)
• ✅ No browser restart required
• ✅ Works with authenticated sessions
• ✅ Easier debugging (see what's being clicked)

For AI Agents

• ✅ Generate better selectors (visual validation)
• ✅ Record human demonstrations
• ✅ Quick element inspection without CLI back-and-forth

For QA Teams

• ✅ Record manual test flows → convert to automation
• ✅ Visual feedback during test execution
• ✅ Easier to teach non-technical users

Implementation Phases

Phase 1: Basic Extension (MVP)

• Element inspector (hover to highlight, show selector)
• Copy selector to clipboard
• Extension popup with basic info

Phase 2: Action Recorder

• Record clicks, typing, navigation
• Generate DOMGuard CLI commands
• Export as workflow script

Phase 3: Command Execution

• Run DOMGuard commands from extension
• Show results in popup
• Command history

Phase 4: Advanced Features

• Native messaging to CLI binary
• Screenshot annotations
• Design pattern extraction UI
• Workflow builder GUI

Alternatives Considered

1. Keep CLI-only ❌ Requires debugging port, less discoverable
2. Build full GUI app ❌ Too heavy, loses CLI simplicity
3. Chrome Extension ✅ Best of both worlds

Questions

• Should extension work standalone or require CLI binary?
• Support for Firefox/Edge extensions?
• How to handle native messaging for advanced features?

Real-World Use Case

I tested DOMGuard on a Next.js app with Editor V3. The CLI workflow was excellent, but I had to:

1. Find elements by trial and error (document.querySelectorAll())
2. Calculate coordinates manually for clicks
3. No visual confirmation of what's being selected

With extension: I could visually inspect the page, click elements to get selectors, and immediately see what would be automated.

---

This feature would make DOMGuard significantly more accessible while maintaining its CLI-first philosophy.

[Eliran79]

Implementation Complete

The Chrome extension has been implemented and is ready for testing:

Location: extension/ directory

Features implemented:

• Visual element inspector (hover to highlight)
• CSS selector generation
• DOMGuard command generation
• Click to copy selector/command
• Context menu integration
• Keyboard shortcut (ESC to stop)

To test (unpacked mode):

1. Go to chrome://extensions
2. Enable "Developer mode"
3. Click "Load unpacked"
4. Select the extension/ folder

Status: Waiting for Chrome Web Store developer account approval to publish.

---

Files created:

• extension/manifest.json (Manifest v3)
• extension/content.js (Element inspection/highlighting)
• extension/popup.html + popup.js (Inspector UI)
• extension/background.js (Service worker)
• extension/styles.css (Highlight styles)
• extension/icons/ (16/32/48/128px icons)