Bookmarklet Utility Window

Inspect live UI like a compact desktop tool, not a broken demo card.

Huge Page Object Recorder scans a live page, promotes meaningful controls and regions, reranks selector heuristics, and exports page-object JSON without turning the whole experience into a sloppy inspector pile.

Self-contained bookmarklet bundle Region-first selector modeling Shadow DOM isolated inspector
Open Full Chat Fixture Read Project Notes
Window Study

Operating-System Utility Window Direction

macOS-inspired calm theme Windows XP-inspired inverse default
Page Object Recorder inspect mode · 3 selected
3 selected
composer region · 92% confidence
messageInput control · 87% confidence
sendButton control · 84% confidence
Current Object sendButton
button inside composer 84% confidence
Heuristic
Selector
[data-testid="send-button"]
CSS Score 58 Matches 1
clipboard ready
What Improved
  • The overlay now mounts safely on Trusted Types pages because the UI is built with explicit DOM APIs.
  • The tool lives in a shadow root, so host page CSS cannot flatten or distort the inspector window.
  • Long selector strings stay inside monospace editor fields instead of blowing out the entire layout.
Primary Flow
  • Scan the page to collect visible automation-relevant candidates.
  • Use hover selection or drag-area selection to capture regions, controls, and collections.
  • Rerun heuristics, test selectors, compare alternatives, then copy exported JSON.
Fixture Preview

Embedded Chat-Like Surface

Sidebar Transcript Composer
Analyst

Area selection should infer the transcript and repeated message collection before one fixed node.

Recorder

The send button should rank stable authored selectors above generated class chains.

Selector Strategy
  • Stable attributes first, but region scoping wins when a control belongs inside a meaningful parent.
  • Collection item mode promotes repeated units instead of one brittle instance.
  • Manual selector mode remains editable and testable without being overwritten automatically.
Tool Behavior
  • Window drag and resize keep the title bar reachable and the panel inside the viewport.
  • Toolbar, navigator, inspector, and footer stay structurally stable while the main body scrolls internally.
  • Themes invert desktop defaults: macOS gets XP-inspired framing; Windows and Linux get the calmer macOS-like panel.
Validation
  • The project builds with Bun into a single readable bookmarklet file.
  • Pure logic and safety constraints are covered by Bun tests and static assertions.
  • The chat fixture exists for manual validation on real pages and bookmarklet paste-run testing.