DOM Reader
Extract the rendered HTML from a web page after JavaScript execution.
Overview
This skill provides guidance for extracting the real DOM content from web pages. Unlike static HTML fetching, this captures the DOM after JavaScript has modified it, revealing dynamically loaded content.
When to Use
- Extract HTML content from JavaScript-heavy pages (SPAs, React, Vue, etc.)
- Get the rendered DOM of a specific element using CSS selectors
- Inspect the actual structure of a page after client-side rendering
Parameters
- url (required): The URL of the page to read
- selector (optional): CSS selector to extract specific elements. If omitted, returns the entire page HTML. When provided, returns ALL matching elements.
Implementation
Use the read-dom.js script with Puppeteer to extract DOM content. The script is in the plugin's shared scripts/ directory.
Pre-execution Check
Before running the script, check if node_modules exists in the plugin's scripts directory. If not, install dependencies:
# Check and install if needed (run from plugin root)
[ -d "scripts/node_modules" ] || (cd scripts && npm install)
Basic Usage
Run from plugin root directory:
node scripts/read-dom.js "https://example.com"
To read all elements matching a selector:
node scripts/read-dom.js "https://example.com" "h2"
To read a specific element by ID:
node scripts/read-dom.js "https://example.com" "#main-content"
Script Location
The script is located at scripts/read-dom.js in the plugin root directory (shared across skills).
Output
Returns the HTML string of the requested content:
- Full page: Complete document HTML
- With selector:
outerHTMLof ALL matching elements, separated by newlines
Error Handling
- Invalid URL: Report the URL format error
- Selector not found: Report that the selector matched no elements
- Page load timeout: Report timeout and suggest retrying or checking the URL
- Missing dependencies: Run pre-execution check to install
Converted and distributed by TomeVault — claim your Tome and manage your conversions.