back
loading skill details...
Take full-page screenshots of HTML files as PNG images using Chrome + puppeteer-core, without downloading any browser. Use when: (1) rendering a data visuali...
---
name: chrome-screenshot
description: "Take full-page screenshots of HTML files as PNG images using Chrome + puppeteer-core, without downloading any browser. Use when: (1) rendering a data visualization report and delivering it as an image, (2) converting an HTML page to a shareable screenshot, (3) the user asks for an image/PNG/PDF of an HTML report, (4) the canvas or browser tool is unavailable or impractical. Also generates PDF via Chrome's print-to-PDF."
---
# Chrome Screenshot
Converts HTML files to PNG screenshots (or PDF documents) using the system's installed Chrome via puppeteer-core.
## Prerequisites
- Chrome installed at `/Applications/Google Chrome.app/Contents/MacOS/Google Chrome`
- puppeteer-core installed globally: `npm install -g puppeteer-core`
- Node.js
## Script: `scripts/screenshot.sh`
```
scripts/screenshot.sh <html-file> [output-path] [width]
```
- `html-file`: Path to the HTML file (required)
- `output-path`: Output PNG path (default: `/tmp/screenshot.png`)
- `width`: Viewport width in px (default: `420`, good for mobile/微信)
The script:
1. Starts a local HTTP server on port 8877
2. Opens the HTML in headless Chrome via puppeteer-core
3. Measures the full page height and captures a full-page screenshot
4. Saves as PNG, cleans up the HTTP server
## Usage
### Screenshot an HTML report
```bash
bash scripts/screenshot.sh /path/to/report.html /tmp/output.png 420
```
Then send the image via the message tool:
```json
{
"action": "send",
"media": "/tmp/output.png",
"message": "📊 Report Title"
}
```
### PDF output (optional)
Chrome's print-to-PDF can generate PDFs instead:
```bash
bash scripts/screenshot.sh /path/to/report.html /tmp/output.pdf 420
```
## Notes
- Do NOT use this skill for web browsing or page interaction—only for screenshotting locally authored HTML.
- The HTML file is served via Python's `http.server`. Make sure `python3` is available.
- For the best visual result in the screenshot, author the HTML with an explicit width matching the screenshot width.
- The HTTP server binds to 127.0.0.1 on port 8877.
don't have the plugin yet? install it then click "run inline in claude" again.