# SingleFile-Plus

**Repository Path**: ns2250225/SingleFile-Plus

## Basic Information

- **Project Name**: SingleFile-Plus
- **Description**: 一个效果比SingleFile好的网页单文件下载插件
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-03-19
- **Last Updated**: 2026-03-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 网页单文件下载器 (Web Page Downloader Extension)

一个强大的 Chrome/Edge 浏览器扩展程序，可以将完整的网页打包并下载为一个独立的单 HTML 文件。该扩展不仅能保存静态内容，还能完美处理动态加载的资源、复杂的 CSS 样式、SVG 动画以及 JavaScript 交互动画，为您提供极致的离线网页存档体验。

## ✨ 核心特性

- **一键打包单文件**：将 HTML、CSS、JavaScript、图片、字体等所有资源全部内联（Base64/代码化）到一个 `.html` 文件中，无需额外的资源文件夹。
- **现代前端框架支持**：深度提取 CSSOM（CSS 对象模型）规则，完美解决 React、Vue 等 SPA 应用在离线保存时容易出现的样式丢失、排版错乱问题。
- **高级动画与交互保留**：
  - **自动滚动触发**：以平缓的步长自动滚动到页面底部，确保所有懒加载资源（图片、数据）和滚动侦听动画（如 AOS, WOW.js）被充分触发和加载。
  - **JS 动画唤醒**：通过模拟 `scroll`、`resize` 和 `DOMContentLoaded` 事件，确保离线页面的 JS 动画库能正常初始化和运行。
  - **SVG 动画修复**：自动将 `<img>` 标签引入的 SVG 动态转换为内联 `<svg>` 标签，突破浏览器安全限制，让 SVG 动画在离线文件中依然栩栩如生。
- **动态状态快照**：
  - 自动将 `<canvas>` 元素转换为高质量图片。
  - 保留输入框 (`<input>`, `<textarea>`, `<select>`) 当前的用户输入状态。
- **响应式图片修复**：自动获取当前视口下最清晰的图片源 (`currentSrc`) 并清理 `srcset` 属性，防止离线页面图片比例失调。

## 📦 安装说明

1. 将本仓库下载或克隆到您的本地电脑。
2. 打开您的基于 Chromium 的浏览器（如 Chrome、Edge、Brave）：
   - Chrome 用户在地址栏输入：`chrome://extensions/`
   - Edge 用户在地址栏输入：`edge://extensions/`
3. 开启页面右上角的 **“开发者模式” (Developer mode)**。
4. 点击 **“加载已解压的扩展程序” (Load unpacked)**。
5. 选择本仓库所在的文件夹（即包含 `manifest.json` 的目录）。
6. 安装成功！您将在浏览器的扩展栏看到该插件的图标。

## 🚀 使用方法

1. 在浏览器中打开您想要保存的网页，并等待其初步加载完成。
2. 点击浏览器右上角的插件图标，打开面板。
3. 点击 **“下载当前页面”** 按钮。
4. 插件会自动接管页面，开始平滑滚动以加载底部内容和动画（请此时尽量**不要切换标签页**或干扰滚动）。
5. 处理完成后，浏览器会自动触发下载，保存名为 `网页标题.html` 的独立文件。
6. 双击打开下载好的 HTML 文件，即可在无网环境下完美预览！

## 📂 项目结构

```text
page-downloader-ext/
├── manifest.json      # 扩展程序的配置文件，声明权限与脚本注入规则
├── background.js      # 后台服务工作线程 (Service Worker)，处理跨域资源请求和下载触发
├── content.js         # 核心逻辑脚本：DOM 克隆、资源内联、动画状态修复、自动滚动等
├── popup.html         # 扩展点击后弹出的 UI 界面
└── popup.js           # 弹出界面的交互逻辑，负责向 content.js 发送开始指令
```

## 🛠️ 技术细节与注意事项

- **跨域资源 (CORS)**：为了绕过画布污染和图片跨域问题，资源抓取通过 `background.js` 代理请求并转换为 Base64。
- **大页面处理**：对于包含大量超清图片或复杂 DOM 结构的超长网页，生成的单文件体积可能会比较大，打包时间也会相应增加，请耐心等待页面顶部的进度提示。
- **隐藏元素处理**：为了保证离线文件的展示效果，插件会尝试清除一些因动画库初始化未完成而残留的隐藏状态（如 `opacity: 0`, `visibility: hidden`）。

## 📄 许可协议

MIT License