Skip to content

feat: auto-capture training mode for self-healing DOM selectors #4

@jadeftx

Description

@jadeftx

Problem

LLM providers periodically update their DOM structure, breaking the hardcoded CSS selectors used for auto-capture. Maintaining selectors manually is a losing game — and
adding support for new providers (ChatGPT, Copilot, etc.) currently requires reverse-engineering their DOM from scratch.

Proposed Solution

Add a "Train Auto-Capture" flow that discovers response container selectors dynamically by planting a known probe phrase and locating it in the DOM. Works for any
provider — existing (Claude, Gemini) and future.

Flow

  1. User enables auto-capture and clicks Train for a provider
  2. Extension generates a unique probe phrase (e.g., AIDIALECTIC_PROBE_a7x2)
  3. Wraps it in a prompt: "Please respond with exactly the following text and nothing else: AIDIALECTIC_PROBE_a7x2"
  4. Sets as pending push — user clicks the arrow button to paste and send
  5. Content script watches the DOM (TreeWalker or MutationObserver) for the exact probe string
  6. When found, walks up the DOM tree to identify the response container element
  7. Extracts a stable CSS selector (tag name, classes, data attributes — skip dynamic IDs)
  8. Stores the learned selector in chrome.storage per provider
  9. Future auto-captures use the learned selector, falling back to hardcoded defaults

Why this matters beyond fixing Claude

Training-based selector discovery turns adding a new LLM provider from "reverse-engineer the DOM and hardcode selectors" into "open the site, click Train, done." This is
the path to supporting ChatGPT, Copilot, Perplexity, or any future provider without provider-specific code for response extraction.

Files likely affected

  • content/provider-base.js — probe detection, DOM tree walking, selector extraction
  • content/claude.js / content/gemini.js — per-provider training trigger
  • sidepanel/sidepanel.html — Train button in settings (per provider)
  • sidepanel/sidepanel.js — training flow UI + messaging
  • background.js — relay training messages between sidepanel and content scripts
  • manifest.json — new host_permissions for additional providers

Design considerations

  • Selector extraction needs to find attributes that are stable across page loads (classes, data-* attributes, tag hierarchy) and skip dynamic/generated IDs
  • Should validate the learned selector works on subsequent responses before committing it
  • Probe message should be auto-deleted from the session after training completes
  • Consider running training automatically when auto-capture fails N times in a row
  • Benefits from the planned monolith refactor — ideally implement after that

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions