# Cloner Web

> >-

- **Type:** Skill
- **Install:** `agentstack add skill-eamon3949-codecloner-cloner-web`
- **Verified:** Yes — security-reviewed for prompt injection and unsafe behavior
- **Seller:** [Eamon3949](https://agentstack.voostack.com/s/eamon3949)
- **Installs:** 0
- **Category:** [Agent Skills](https://agentstack.voostack.com/c/agent-skills)
- **Latest version:** 0.1.0
- **License:** MIT
- **Upstream author:** [Eamon3949](https://github.com/Eamon3949)
- **Source:** https://github.com/Eamon3949/CodeCloner/tree/master/cloner-web

## Install

```sh
agentstack add skill-eamon3949-codecloner-cloner-web
```

Requires the [AgentStack CLI](https://agentstack.voostack.com/docs/cli). Works with Claude Code, Cursor, and any MCP-compatible agent.

## About

# 抄网页 (Cloner Web) Skill

> 你是一个"网页克隆师"。你的任务是把一个网站完整地"抄"下来，变成一个离线也能打开的单文件 HTML。
> 记住：老板不懂技术。所有输出必须用大白话。
>
> **适用场景**：看到别人的网站设计好看、页面结构完整，想把它扒下来自己用。
> **核心优势**：目标网站的 CDN 可能有 403 防盗链，但浏览器能正常看 = 浏览器已经拿到了全部资源。
> 我们用 Playwright 在浏览器内存里直接拦截下来。

## 何时激活本 Skill

用户发送一个网站网址并输入以下关键词之一时激活：

- `[抄网页]`
- `抄网页`
- `克隆这个网站`
- `帮我复制这个页面`
- 任何表达"我要把这个网页抄下来"意图的消息

### 跟"抄袭者"的区别

| | 抄袭者 CodeCloner | 抄网页 Cloner Web |
|---|---|---|
| **目标** | GitHub/GitLab 代码仓库 | 任意网站 URL |
| **核心操作** | 改名换姓、品牌清洗、功能裁剪 | CSS 内联、图片 base64、离线打包 |
| **输出** | 一个可运行的自有代码项目 | 一个 单文件 HTML（浏览器直接打开） |
| **技术依赖** | git, 文本替换 | Playwright, Python |
| **说人话** | 把别人的代码项目"洗"成你自己的项目 | 把别人的网页"拍"下来变成离线文件 |

---

## 🚨 铁律

1. **老板不懂代码** —— 严禁直接扔 Python 脚本、HTML 代码。用大白话说清楚。
2. **所有操作由你来执行** —— 老板只给网址和需求，不改一行代码。
3. **每步都要问老板** —— 尤其是输出目录、是否需要截图等功能。
4. **跑完必须给老板看结果** —— 用 `start "" "output/full_clone.html"` 打开浏览器让老板看效果。

---

## 第 1 步：环境检查

> 目标：确保运行环境齐备。

在开始之前，检查以下依赖是否已安装：

```bash
# 检查 Python
python --version

# 检查 Playwright
python -c "from playwright.async_api import async_playwright; print('Playwright OK')"

# 如果 Playwright 没装浏览器内核
python -m playwright install chromium
```

如果缺少依赖，直接安装：

```bash
pip install playwright
python -m playwright install chromium
```

**检查结果用大白话告诉老板：**

```
✅ 环境就绪：Python 3.11 + Playwright + Chromium 浏览器内核
```

---

## 第 2 步：克隆网页

> 目标：生成 1:1 完整复刻的网页文件。

### 2.1 准备

1. 确认目标 URL（问老板要抄哪个页面）
2. 确认输出目录（默认当前工作目录的 `clone_output/`，老板有特殊要求再改）
3. 确认是否需要截图（默认全页面截图留存）

### 2.2 执行克隆

使用 `scripts/clone_intercept.py` 脚本：

```bash
cd cloner-web
python scripts/clone_intercept.py
```

脚本自动完成：
1. 用 Playwright 打开目标 URL（1440×900 视口）
2. 通过 `page.on("response")` 拦截所有 CSS 和图片响应
3. **滚动 5 次**触发懒加载图片
4. **CSSOM 捕获** — 从 `document.styleSheets[i].cssRules` 捞 styled-components 等运行时注入的样式
5. **httpx 替补** — 找出 DOM 中有但浏览器没拦截到的图片，直接 HTTP 下载
6. **DOM 级替换** — 在浏览器中直接替换 ``、``、CSS background-image、favicon 为 data URI
7. 删除外部 CDN CSS 链接（避免离线后 403 空白）
8. 输出单文件 HTML + 截图留档

### 2.3 关键参数说明

脚本顶部有两个变量可改：

```python
TARGET_URL = "https://example.com"    # ← 改这里为目标网页
OUTPUT_DIR = Path("./clone_output")   # ← 输出目录
```

---

## 第 3 步：验证和交付

> 目标：确保老板看到的效果和原站一致。

### 3.1 本地打开验证

```bash
# Windows
start "" "clone_output/full_clone.html"

# macOS
open clone_output/full_clone.html

# Linux
xdg-open clone_output/full_clone.html
```

### 3.2 对比原站

让老板在浏览器中同时打开：
- 原站（目标 URL）
- 本地 `full_clone.html`

对比以下维度：

| 维度 | 自包含文件 | 原站 |
|:----:|:----------:|:----:|
| 布局结构 | ✅ 完全一致（CSS 全部内联） | — |
| 图片显示 | ✅ 全部 base64 内嵌 | — |
| 文字内容 | ✅ 完全一致 | — |
| 交互元素 | ⚠️ 链接可点，动态功能可能受限 | 完整 |
| 离线可用 | ✅ **完全离线** | ❌ 需要网络 |

### 3.3 交付物清单

```
clone_output/
├── full_clone.html    ← 单文件完整网页（~5-15MB）
└── screenshot.png     ← 全页面截图（留档用）
```

---

## 第 4 步：常见问题处理

### 4.1 图片替换失败（replaced ` 元素用 `` 而正则没匹配到。

**解决方案**（脚本已内置）：
- ✅ 使用 **DOM 级替换** — 在浏览器中通过 `querySelectorAll('img', 'source', 'link[rel*="icon"]')` 直接替换属性
- ✅ 不再用正则匹配 HTML 文本，避免 `srcset`、`href`、裸 base64 漏网
- ✅ 如果 page.on("response") 没拦截到某些图片，还有 **httpx 替补下载**
- 如果还是丢图，检查控制台看 `需要 httpx 补抓: X/Y` 行，看是哪个 URL 失败了

### 4.2 页面有弹窗/遮罩层

某些网站首次访问会弹 Cookie 横幅或地区选择弹窗。

**解决方案**：在脚本的 `page.on("response")` 前注入 JS 移除弹窗：

```python
# 加载页面后等待并关闭弹窗
await page.goto(TARGET_URL, wait_until="networkidle", timeout=60000)
await page.evaluate("""
    document.querySelectorAll('[class*="cookie"], [class*="popup"], [class*="modal"], [class*="overlay"]')
        .forEach(el => el.remove());
""")
```

### 4.3 页面需要登录

如果目标页面需要登录，有两种方式：
1. 手动登录后导出 Cookie，在 Playwright 中注入：`await context.add_cookies(cookies)`
2. 让老板提供登录态即可

### 4.4 懒加载图片没出来

`wait_until="networkidle"` 通常能等到大部分懒加载图片触发，但如果页面用 IntersectionObserver 且图片不在视口内：

```python
# 强制滚动到底部触发懒加载
await page.evaluate("window.scrollTo(0, document.body.scrollHeight)")
await asyncio.sleep(2)
```

### 4.5 页面是 React SPA（styled-components / emotion），样式不全

**原因**：CSS-in-JS 框架（styled-components, emotion 等）在运行时由 JS 动态注入样式，
不在外部 CSS 文件里。只拦截 HTTP response 拿不到它们。
而且 styled-components v6 不再创建带 `.textContent` 的 `` 标签——
它用 `document.styleSheets.insertRule()` 直接操作浏览器 CSSOM，`` 标签是空的！

**解决方案**：脚本已内置修复 — 从 `document.styleSheets[i].cssRules` 读取运行时样式：

```
🎯 CSSOM: 341,257 chars   ← 出现这行说明捞到了
```

如果还是漏样式，检查控制台看 CSSOM 是否为空，或加长等待时间：
```python
await asyncio.sleep(5)  # 给 styled-components 更多时间水合
```

图片 base64 会让文件膨胀约 33%。如果太大：
1. 只在 `page.on("response")` 中拦截小于 500KB 的图片（改 `len(body)  2MB），默认不内联。页面字体会回退到系统字体 |
| **视频** | 视频流无法内联，只保留 `` 标签结构 |

## Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

- **Author:** [Eamon3949](https://github.com/Eamon3949)
- **Source:** [Eamon3949/CodeCloner](https://github.com/Eamon3949/CodeCloner)
- **License:** MIT

Install and usage instructions live in the source repository linked above.

## Pricing

- **Free** — Free

## Security capabilities

Automated source analysis of v0.1.0 — what this tool can access:

- **Network access:** yes
- **Filesystem access:** no
- **Shell / process execution:** no
- **Environment & secrets:** no
- **Dynamic code execution:** no

*"Yes" means the capability is present in the source — more access means more to trust, not that it is unsafe.*


## Versions

- **0.1.0** — security scan: passed — Imported from the upstream source.

## Links

- Listing page: https://agentstack.voostack.com/l/skill-eamon3949-codecloner-cloner-web
- Seller: https://agentstack.voostack.com/s/eamon3949
- Browse the marketplace: https://agentstack.voostack.com/browse

---
Listed on AgentStack — the marketplace for AI agent skills and MCP servers. Every listing is security-reviewed. Creators keep 70%.