QwQNT Snapshot

一个用于 QwQNT 框架的插件，可以将 QQ 页面完整保存到本地，方便使用浏览器原生 DevTools 进行调试和分析。

✨ 功能特性

• 🖼️ 完整快照：保存完整的 HTML 结构和所有资源文件（图片、CSS 等）
• 🎨 样式保留：保持原页面的所有样式和布局
• 🔧 DevTools 支持：保存的页面可以在任何浏览器中打开，使用原生 DevTools 进行调试
• 🎯 可拖拽按钮：页面右下角的"保存快照"按钮可以自由拖拽位置，不遮挡内容
• 📁 自动管理：快照文件自动保存到下载目录的 QQ Snapshot 文件夹，带时间戳便于管理
• 🌐 about:blank 支持：特别针对 QQ 中的弹窗页面（如点击头像弹出的账号信息）进行了适配

🔧 安装说明

1. 从 Releases 页面下载最新版本的压缩包
2. 解压缩下载的文件
3. 将解压后的 qwqnt-snapshot 文件夹复制到 QwQNT 插件目录
4. 重启 QQ 客户端

QwQNT 插件目录通常位于：QwQNT 目录/qwqnt-storage/plugins

🚀 使用方法

1. 启动 QQ 客户端后，你会在页面右下角看到一个粉色的"保存快照"按钮
2. 如果按钮位置不合适，可以拖拽到任意位置
3. 点击"保存快照"按钮，插件会自动：
   • 收集当前页面的所有资源
   • 重写所有 URL 为本地相对路径
   • 保存到 下载目录/QQ Snapshot/qq_snapshot_时间戳/ 目录
4. 保存完成后，按钮会显示"保存成功！"
5. 打开保存的目录，双击 index.html 即可在浏览器中查看

💡 技术说明

关于 about:blank 页面

QQ 的部分页面 URL 可能是 about:blank，这是因为这些页面是动态创建的 BrowserWindow。

由于 QwQNT 框架不会自动向 about:blank 页面注入插件代码，本插件通过监听 did-finish-load 事件，在主进程中手动注入 renderer.js 代码，确保快照功能在所有页面上都能正常工作。

资源处理

插件会智能处理以下内容：

• 外部和内联 CSS 样式
• 图片资源
• SVG 图标（包括 <use> 引用的 symbol）
• 行内样式中的 background-image
• Shadow DOM 内容

所有资源会被转换为 Base64 编码并保存到 resources/ 子目录，确保快照可以离线完整显示。

📝 项目结构

qwqnt-snapshot/
├── main.js          # 主进程逻辑，处理文件保存和 about:blank 注入
├── preload.js       # 预加载脚本，暴露安全的 IPC 通道
├── renderer.js      # 渲染进程脚本，实现快照生成和 UI
├── package.json     # 插件元数据
└── README.md        # 本文件

📄 许可证

MIT License - 详见 LICENSE 文件

👨‍💻 作者

MUKAPP

🐛 问题反馈

如果遇到问题或有建议，欢迎在 Issues 页面提出。