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
- User enables auto-capture and clicks Train for a provider
- Extension generates a unique probe phrase (e.g.,
AIDIALECTIC_PROBE_a7x2)
- Wraps it in a prompt: "Please respond with exactly the following text and nothing else: AIDIALECTIC_PROBE_a7x2"
- Sets as pending push — user clicks the arrow button to paste and send
- Content script watches the DOM (TreeWalker or MutationObserver) for the exact probe string
- When found, walks up the DOM tree to identify the response container element
- Extracts a stable CSS selector (tag name, classes, data attributes — skip dynamic IDs)
- Stores the learned selector in
chrome.storage per provider
- 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
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
AIDIALECTIC_PROBE_a7x2)chrome.storageper providerWhy 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 extractioncontent/claude.js/content/gemini.js— per-provider training triggersidepanel/sidepanel.html— Train button in settings (per provider)sidepanel/sidepanel.js— training flow UI + messagingbackground.js— relay training messages between sidepanel and content scriptsmanifest.json— new host_permissions for additional providersDesign considerations