# element-export

**Repository Path**: ns2250225/element-export

## Basic Information

- **Project Name**: element-export
- **Description**: divmagic免费开源平替
- **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 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. 双击打开该文件，即可查看完美还原的离线网页片段！

## 📂 项目结构

```text
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 ❤️*