Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
11 changes: 11 additions & 0 deletions .claude-plugin/marketplace.json
Original file line number Diff line number Diff line change
Expand Up @@ -145,6 +145,17 @@
},
"source": "./plugins/security-guidance",
"category": "security"
},
{
"name": "webpage-snapshot",
"description": "Capture and save webpage screenshots using browser automation",
"version": "1.0.0",
"author": {
"name": "大粒子",
"email": "z814241@gmail.com"
},
"source": "./plugins/webpage-snapshot",
"category": "productivity"
Comment on lines +148 to +158
}
]
}
9 changes: 9 additions & 0 deletions plugins/webpage-snapshot/.claude-plugin/plugin.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
{
"name": "webpage-snapshot",
"description": "Capture and save webpage screenshots using browser automation",
"version": "1.0.0",
"author": {
"name": "大粒子",
"email": "z814241@gmail.com"
}
}
52 changes: 52 additions & 0 deletions plugins/webpage-snapshot/README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,52 @@
# Webpage Snapshot Plugin

A Claude Code plugin that enables capturing screenshots of webpages using browser automation.

## Features

- Capture full-page or viewport screenshots of any webpage
- Automatic page load detection
- Clean browser management

## Installation

This plugin is included in the claude-code-plugins bundle. To use it:

1. Ensure you have Claude Code installed
2. The plugin is automatically available in projects that include the marketplace

## Usage

Use the `/webpage-snapshot` command followed by the URL you want to capture:

```
/webpage-snapshot https://example.com
```
Comment on lines +20 to +24

The command will:
1. Open a browser window
2. Navigate to the specified URL
3. Wait for the page to load
4. Capture a screenshot
5. Save it with a descriptive filename
6. Close the browser

## Examples

Capture a screenshot of a website:
```
/webpage-snapshot https://www.anthropic.com
```

## Requirements

- Claude Code with browser automation support
- Internet connection for accessing webpages

## Author

Created by 大粒子 for the Claude Code ecosystem.

## Version

1.0.0
24 changes: 24 additions & 0 deletions plugins/webpage-snapshot/commands/webpage-snapshot.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
---
allowed-tools: playwright-browser_navigate, playwright-browser_wait_for, playwright-browser_take_screenshot, playwright-browser_snapshot, playwright-browser_close
description: Capture a screenshot of a webpage
---
Comment on lines +1 to +4

## Your task

Capture a screenshot of the specified webpage URL.

## Steps

1. Navigate to the URL provided by the user
Comment on lines +8 to +12
2. Wait for the page to load completely using `playwright-browser_wait_for` (wait at least 2-3 seconds after navigation)
3. Take a screenshot of the page using `playwright-browser_take_screenshot`
4. Save the screenshot with an appropriate filename (e.g., including domain and timestamp)
5. Close the browser when done using `playwright-browser_close`

## Important notes

- Always wait for the page to fully load before taking a screenshot to ensure all content is rendered
- Use a descriptive filename for the screenshot that includes the domain name and timestamp
- Handle any errors gracefully and inform the user of any issues
- Always close the browser after capturing the screenshot to free up resources
- If the page fails to load, provide a clear error message to the user