Website Pickpocket_IT运维与安全 skill-PHP中文网

Website Pickpocket

Polar Sponsor

爱发电赞助

.NET 9.0

立即下载

网站扒手——完美复刻任意网站。支持静态/动态页面抓取、资源下载及多框架输出（HTML/React/Vue/Angular）。适用场景：生成静态副本、转换为React/Vue项目、离线浏览、网站备份迁移

网站扒手 (Website Pickpocket)

功能概述

网站扒手 (Website Pickpocket)是一项面向实际任务的技能，主要用于一键复刻任意网站，生成可离线运行的静态版本或多框架项目；交互式引导；

核心要点

1. 智能爬取；
静态页面 : 使用Cheerio快速解析；
动态页面(SPA) : Playwright等待DOM稳定后抓取；

使用与执行

深度控制 : 0-5层递归爬取；去重机制 : URL规范化 + 已访问记录；2. 资源处理；解析DOM、。它将相关步骤、工具调用和结果整理方式集中到统一流程中，帮助使用者更快完成目标并减少重复操作。从功能定位来看，该技能强调把分散的操作要求整理成清晰、可复用的处理流程，使用户能够围绕既定目标快速准备输入、选择执行方式并获得结构化结果。

结果检查与注意事项

实际使用前应先确认任务范围、数据来源、运行环境、必要权限和关键参数，再依据技能说明逐步执行；若输入条件不完整，应先补齐信息或采用保守配置，避免因错误假设导致结果偏离需求。执行过程中需要关注工具调用是否成功、接口或依赖是否可用、输出格式是否符合预期，并对异常提示、缺失字段和边界情况进行处理；涉及批量任务时，还应保存进度，避免中断后重复操作。该技能适合用于一次性任务，也可以接入自动化工作流，与其他技能或上层代理配合完成更完整的业务链路；在组合使用时，应明确每一步的输入输出关系，并避免不同步骤之间出现参数冲突。

网站扒手 (Website Pickpocket)

一键复刻任意网站，生成可离线运行的静态版本或多框架项目。

快速开始

基础用法

# 原生HTML输出（默认）
pickpocket https://example.com

# 指定输出目录
pickpocket https://example.com -o my-project

# React项目输出
pickpocket https://example.com --framework react

# Vue项目输出
pickpocket https://example.com --framework vue

交互式引导

pickpocket
? 请输入要抓取的网站URL: https://example.com
? 选择输出框架: [原生HTML/React/Vue/Angular/Svelte]
? 爬取深度: [0=仅首页/1=首页+链接/2=递归2层/...]

核心功能

1. 智能爬取

静态页面: 使用Cheerio快速解析
动态页面(SPA): Playwright等待DOM稳定后抓取
深度控制: 0-5层递归爬取
去重机制: URL规范化 + 已访问记录

2. 资源处理

资源类型	处理方式
HTML	解析DOM、提取结构
CSS	下载、提取内联样式
JS	下载、提取内联脚本
图片	下载、压缩(可选)
字体	下载、Webfont处理
媒体	音视频资源下载

3. 框架输出

原生HTML          → 直接保存，资源本地化
React (Vite)      → .jsx组件 + react-router
Vue 3 (Vite)     → .vue单文件组件 + vue-router
Angular           → 模块化结构
Svelte            → .svelte组件
Tailwind CSS      → 原生HTML + Tailwind CSS (默认)

配置详解

命令行参数

pickpocket  [options]

# 必选参数
                  # 要抓取的网站URL

# 输出选项
-o, --output     # 输出目录 (默认: ./output/[域名])
--framework     # 输出框架: html|react|vue|vue3|angular|svelte|tailwind (默认: tailwind)
--name         # 项目名称 (默认: 从域名提取)

# 爬取选项
-d, --depth       # 爬取深度 0-5 (默认: 1)
-l, --limit       # 最大页面数 (默认: 50)
--concurrency     # 并发数 1-20 (默认: 5)

# 资源选项
--no-images          # 不下载图片
--no-css             # 不下载CSS
--no-js              # 不下载JavaScript
--optimize           # 压缩图片
--quality         # 图片质量 1-100 (默认: 80)

# 其他
-c, --config   # 配置文件路径
--verbose            # 详细输出
-h, --help           # 显示帮助

配置文件

创建 pickpocket.yaml:

startUrl: https://example.com
framework: react

crawl:
  depth: 2
  maxPages: 100
  concurrency: 10
  waitStrategy: domstable

resources:
  download: true
  maxFileSize: 10485760  # 10MB
  imageQuality: 80
  optimizeImages: true

output:
  name: my-project
  directory: ./output
  overwrite: false

工作流程

1. 验证URL → 检查格式和网络连通性
2. 加载配置 → 合并CLI参数和配置文件
3. 爬取页面 → 按深度递归抓取
4. 下载资源 → 并发下载，本地化存储
5. 路径重写 → 修正HTML中的资源引用
6. 框架转换 → 转换为目标框架结构
7. 输出完成 → 生成可运行的项目

输出结构

React项目

output/
├── src/
│   ├── components/
│   │   ├── Header.jsx
│   │   ├── Footer.jsx
│   │   └── ...
│   ├── pages/
│   │   ├── Home.jsx
│   │   └── ...
│   ├── styles/
│   ├── App.jsx
│   └── main.jsx
├── public/
│   ├── images/
│   ├── fonts/
│   └── ...
├── package.json
└── vite.config.js

Vue项目

output/
├── src/
│   ├── components/
│   ├── views/
│   ├── assets/
│   ├── App.vue
│   └── main.js
├── public/
├── package.json
└── vite.config.js

Tailwind CSS项目

output/
├── src/
│   └── css/
│       └── main.css
├── index.html
├── package.json
├── vite.config.js
├── tailwind.config.js
└── postcss.config.js

高级用法

登录态保持

session:
  cookies:
    - name: session_id
      value: "xxx"
  localStorage:
    - key: user
      value: '{"id": 1}'

自定义等待条件

crawl:
  waitStrategy: custom
  waitForSelector: "#app.loaded"
  waitTimeout: 30000

URL过滤规则

filter:
  allowedDomains:
    - example.com
    - api.example.com
  blockedDomains:
    - admin.example.com
  allowedPaths:
    - /blog/*
    - /docs/*
  blockedPaths:
    - /admin/*
    - /api/*