DOM Snapshot for LLMs Demo

👉 See https://blog.bradvogel.com/p/giving-llms-eyes-on-the-web

Chrome side panel that captures the current page and produces LLM‑ready text. It offers three modes:

• Hybrid (Accessibility → Markdown): readable content with semantic structure
• Accessibility (AI mode): Playwright‑style YAML tree
• Markdown (Turndown): raw HTML → Markdown

The Playwright ARIA snapshot sources are vendored; the custom Markdown renderer lives in src/aria/.

Beyond the core demo described in the blog post, this build also shows how to:

• Inject and reuse Google’s open-source DOM Distiller library to extract reader-mode HTML and convert it to Markdown.
• Call Chrome’s new Gemini Nano Prompt API from the side panel so you can ask on-device questions about the distilled content.

⚠️ Gemini Nano currently requires Chrome 138+, the chrome://flags/#prompt-api-for-gemini-nano flag, and at least one model download per device. Make sure to enable the flag, restart Chrome, and let the model finish downloading before testing the “Ask Gemini Nano” flow.

Prerequisites

• Node.js 18+ (Node 24 used in development)
• npm 9+
• Chrome 114+

Quick Start

1. Install deps: npm install
2. Build bundles: npm run build
3. Load in Chrome:
   • Open chrome://extensions
   • Enable Developer mode
   • Load unpacked → select this folder
4. Open any page and click the toolbar icon to open the side panel. Pick a snapshot mode and copy the output.

Notes

• No host permissions are requested; runs with activeTab and isolated scripting injection.
• Scripts re‑inject automatically after navigation (tab reloads/new documents).
• Restricted pages (e.g., chrome://, extension pages) cannot be captured.

Dev Loop

• Edit src/aria/* or vendor/playwright-aria/*, then run npm run build to regenerate dist/*.
• Use npm run watch for automatic rebuilds on file changes.
• After building, reload the extension from chrome://extensions.

Project Layout

dist/
  aria-playwright.global.js  # Hybrid/ARIA renderer bundle (generated)
  turndown.global.js         # Turndown wrapper (generated)
lib/dom-distiller/
  domdistiller.js           # Chrome's DOM Distiller runtime
manifest.json
scripts/
  build-aria.js             # esbuild entry
src/
  aria/                     # Markdown renderer + entry
  background.js             # Injection + capture messaging
  sidepanel.html/.js        # Minimal UI
vendor/playwright-aria/     # Vendored Playwright snapshot helpers

Security & Permissions

• Permissions: activeTab, scripting, sidePanel
• Host permissions: none (uses activeTab scope only)
• Web-accessible resources: exposes lib/dom-distiller/domdistiller.js so the reader-mode script can run inside pages
• Minimum Chrome: 114
• Data stays local; clipboard copy only on user action

Licensing

• Project: MIT (see LICENSE).
• Vendored Playwright helpers in vendor/playwright-aria/: Apache 2.0 (keep Microsoft copyright notices).