ElemClip - 文本提取浏览器扩展

一个简单易用的浏览器扩展，可以选择页面元素并提取其中的文本内容。

功能特性

• ✅ 元素选择：鼠标悬停高亮显示元素
• ✅ 文本提取：点击元素即可提取文本内容
• ✅ 自动复制：提取的文本自动复制到剪贴板
• ✅ 历史记录：保存最近 50 条提取记录
• ✅ 快捷键支持：Ctrl+B (Mac: Command+B)
• ✅ 父元素选择：按 Shift 键选择父元素

安装步骤

1. 打开 Chrome 浏览器，进入扩展程序管理页面：

   • 地址栏输入 chrome://extensions/
   • 或：菜单 → 更多工具 → 扩展程序

2. 启用"开发者模式"（右上角开关）

3. 点击"加载已解压的扩展程序"

4. 选择 ElemClip 文件夹

5. 安装完成！

使用方法

方法一：使用 Popup

1. 点击浏览器工具栏中的扩展图标
2. 点击"激活选择模式"按钮
3. 在页面上移动鼠标，元素会被高亮显示
4. 点击要提取文本的元素
5. 文本会自动复制到剪贴板

方法二：使用快捷键

1. 按 Ctrl+B (Mac: Command+B)
2. 在页面上移动鼠标选择元素
3. 点击元素提取文本

高级操作

• 选择父元素：在悬停元素时按 Shift 键
• 取消选择：按 Esc 键退出选择模式
• 查看历史：打开扩展 popup 查看提取历史

图标文件

需要创建以下图标文件（放在 icons 目录下）：

• icon16.png (16x16)
• icon32.png (32x32)
• icon48.png (48x48)
• icon128.png (128x128)

可以使用在线工具生成图标，或使用任何图片编辑软件创建。

文件结构

ElemClip/
├── manifest.json       # 扩展配置文件
├── background.js       # 后台脚本
├── content.js          # 内容脚本（元素选择逻辑）
├── content.css         # 内容脚本样式
├── popup.html          # Popup 界面
├── popup.js            # Popup 脚本
├── popup.css           # Popup 样式
├── icons/              # 图标文件目录
│   ├── icon16.png
│   ├── icon32.png
│   ├── icon48.png
│   └── icon128.png
└── README.md           # 说明文件

技术实现

元素选择逻辑

1. 监听 mouseover 事件
2. 从目标元素向上遍历 DOM 树
3. 构建 CSS 选择器路径（使用 nth-of-type 处理同类型元素）
4. 使用 document.querySelector 定位元素
5. 获取元素位置和尺寸，更新高亮层

文本提取

• 使用 innerText 或 textContent 获取文本
• 自动清理多余空白字符
• 保留文本的换行结构

开发说明

修改快捷键

编辑 manifest.json 中的 commands 部分。

修改历史记录数量

编辑 background.js 中的 textHistory.length > 50。

自定义样式

• 高亮颜色：修改 content.js 中的 rgba(33, 150, 243, 0.3)
• Popup 样式：修改 popup.css

许可证

MIT License