📸 iCode 关卡自动截图 · Edge 浏览器扩展
专为 iCode 平台设计的自动截图工具
监测关卡变化时自动截图，支持手动截图，标题水印自动叠加。
适用平台：ide.icode.org.cn
✨ 功能特性
🔄
自动监测
监听 levelInfo 元素变化，关卡切换时自动触发截图
⏱️
鼠标延迟
检测到鼠标移动时，自动延迟 3 秒再截图，避免截到操作中的画面
👆
手动截图
点击按钮立即截图，强制刷新最新关卡信息
🎯
双模式截图
支持「题面 + 答案」双区域自动截图（question / answer）
🏷️
标题水印
自动叠加课程标题和当前关卡，固定布局，字宽加大
🔒
版权水印
隐蔽水印 + PNG 元数据注入
💻
OS 自适应
Windows 使用 blob 下载确保文件名正确，macOS 使用原生 API
📦 安装方法
方式一：加载已解压扩展（开发/测试）
1
打开 Edge 浏览器，地址栏输入：edge://extensions/
2
右上角开启开发者模式
3
点击加载解压缩的扩展
4
选择 edge-screenshot-extension 目录
5
安装完成，工具栏出现图标
方式二：安装 .crx 文件
1
将 .crx 文件拖拽到 edge://extensions/ 页面
2
确认安装
🚀 使用方法
1
打开 iCode 平台：ide.icode.org.cn
2
点击工具栏扩展图标，打开控制面板
3
选择截图模式：题面(question) / 答案(answer) / 全屏(fullscreen)
4
点击「开始监测」：自动监听关卡变化并截图
5
或点击「立即截图」：手动触发当前关卡截图
6
图片自动保存到浏览器下载目录，文件名格式：level_1_10_q.png
📷 截图区域说明
| 模式 | 截图目标 | 适用场景 |
|---|---|---|
question | 左侧题面区域 (#boxide_lefts) | 查看题目要求 |
answer | 右侧答案区域 (#boxide_right) | 查看参考答案 |
fullscreen | 整个页面 (document.body) | 完整页面存档 |
🔧 技术栈
| 层级 | 技术 |
|---|---|
| Manifest | MV3 (Manifest V3) |
| 核心 API | chrome.tabs.captureVisibleTab + Canvas 裁剪 |
| 截图库 | html2canvas v1.4.1（备用方案） |
| 下载方案 | Windows: Blob + <a download> / macOS: chrome.downloads |
| OS 检测 | navigator.userAgentData.platform (Chrome 89+) |
| 水印 | Canvas 动态绘制 + PNG tEXt 元数据注入 |
📥 获取插件
插件仓库：gitcode.com/hnai/edge-screenshot-extension
版权：椰程工人智能教育 | symo.chan <symo@88.com>