网页元素离线提取器 (Web Element Exporter)

这是一款强大的 Chrome/Edge 浏览器扩展插件。它的核心功能是：让用户能够自由选择并高亮网页中的任意元素，将其包括所有层级结构、CSS样式、图片、背景图、SVG以及相关的 JS 脚本，一键打包导出为一个独立的、可离线访问的 HTML 文件。

✨ 核心特性

• 🎯 精准元素捕获：提供直观的鼠标悬停高亮选框，点击即可捕获指定范围的 DOM 结构。
• 🎨 完美样式还原：不仅保留元素的 HTML 结构，还会深度提取整个页面的真实 CSS 规则（包括 @keyframes 动画和 :hover 等伪类），并在根节点锁定绝对宽高，确保离线后布局不坍缩、样式不走样。
• 🖼️ 资源本地化 (Base64)：自动将页面中的 <img> 标签、CSS background-image 甚至 Canvas 动态画布内容转换为 Base64 编码内嵌到 HTML 中，实现真正的断网离线可用。
• 🚀 智能防跨域处理：内置 Background Service Worker，自动突破页面 CORS（跨域资源共享）限制，强力抓取外部 CDN 上的图片并进行编码。
• 🎬 多媒体与脚本保留：对视频 (<video>) 和音频保留其绝对路径以防止文件过大，同时完整保留并转换页面中的 <script>，最大限度还原网页的原始交互和动画效果。
• ⚡ 性能优化：针对包含海量 DOM 节点的复杂网页，采用分块异步处理机制（Chunk Processing），有效防止提取时导致浏览器主线程卡死。

🛠️ 安装指南

由于本插件目前未上架扩展商店，请通过“开发者模式”进行本地安装：

1. 下载或克隆本项目到本地文件夹。
2. 打开您的浏览器（Chrome 或 Edge）的扩展程序管理页面：
   • Chrome 用户在地址栏输入：chrome://extensions/
   • Edge 用户在地址栏输入：edge://extensions/
3. 在页面右上角（或左下角）开启 “开发者模式” (Developer mode) 开关。
4. 点击 “加载已解压的扩展程序” (Load unpacked) 按钮。
5. 在弹出的文件选择窗口中，选中您刚刚下载的本项目文件夹即可完成安装。
6. (可选) 为了方便使用，建议点击浏览器右上角的拼图图标，将该插件固定 (Pin) 到工具栏。

📖 使用说明

1. 打开您想要提取内容的任意普通网页（注意：插件无法在 chrome:// 或 edge:// 等系统内置页面运行）。
2. 首次安装后，请务必先按 F5 刷新一下当前网页，以确保插件脚本成功注入。
3. 点击浏览器右上角该插件的“冰淇淋”图标，在弹出的面板中点击 “开始选择元素”。
4. 移动鼠标，您会看到页面上的元素被蓝色的虚线框高亮显示。
5. 将高亮框对准您想要提取的区域，点击鼠标左键。
6. 页面右上角会出现“正在提取...”的提示，请耐心等待几秒钟（耗时取决于元素的复杂度）。
7. 提取完成后，浏览器会自动下载一个名为 exported_element_时间戳.html 的文件。
8. 双击打开该文件，即可查看完美还原的离线网页片段！

📂 项目结构

element-export/
├── manifest.json      # 插件的核心配置文件 (V3 版本)
├── popup.html         # 点击插件图标弹出的用户交互界面
├── popup.js           # 弹窗界面的交互逻辑，负责向页面发送启动指令
├── content.js         # 注入到目标网页的核心脚本，负责高亮选择、DOM 克隆、样式提取和 Base64 转换
├── content.css        # 提供鼠标悬停高亮框的 CSS 样式
├── background.js      # 后台服务脚本，主要用于处理跨域网络请求
└── image.jpg          # 插件的默认图标

⚠️ 注意事项与已知局限性

• 懒加载图片：插件已内置对常见懒加载属性（如 data-src）的兼容，但某些使用特殊私有逻辑的懒加载图片可能无法完美抓取。
• 重度框架依赖：对于使用 React/Vue 等现代前端框架构建的强交互组件，虽然能保留静态外观和部分 CSS 动画，但脱离了原始的 JS 运行上下文，复杂的点击交互（如打开模态框、发送请求等）在离线 HTML 中将失效。
• 字体文件：由于版权和体积原因，插件默认不将外部 Web Font 转为 Base64。离线访问时如果断网，可能会回退为系统默认字体。

---

Developed with ❤️