一款帮助开发者与AI更精准沟通的Chrome插件。通过在页面上框选元素，自动提取元素信息并生成结构化Markdown，让你能够准确地向AI描述需要修改的页面元素。
- 🎯 可视化框选 - 在页面上直接点击选择元素，直观易用
- 📋 信息提取 - 自动提取元素的CSS选择器、类名、文本内容等信息
- 📝 实时反馈编辑 - 选择元素后直接在页面上输入反馈，支持回车快速保存
- 🗑️ 便捷删除 - 每个元素标记旁都有删除按钮，方便移除不需要的元素
- 📄 Markdown生成 - 一键生成结构化Markdown，直接复制给AI使用
- 📊 列表查看 - 在覆盖层中查看所有已选择元素的详细信息
- 💾 数据持久化 - 选择的数据会自动保存，刷新页面不丢失
-
打开Chrome扩展管理页面
- 在地址栏输入
chrome://extensions/ - 或者：菜单 → 更多工具 → 扩展程序
- 在地址栏输入
-
开启开发者模式
- 点击页面右上角的"开发者模式"开关
-
加载扩展
- 点击"加载已解压的扩展程序"按钮
- 选择本项目的文件夹（
ai_mark）
-
完成安装
- 插件会出现在扩展列表中
- 浏览器工具栏会显示插件图标
- 点击浏览器工具栏中的插件图标
- 在弹出的窗口中点击"开始框选"按钮
- 页面会进入框选模式，鼠标变为十字光标
- 右上角会显示提示："点击选择元素 | ESC退出 | 已选择: 0"
- 选择元素：将鼠标悬停在元素上，元素会被蓝色高亮显示，点击即可选中
- 元素标记：选中的元素会显示数字标记（1, 2, 3...）和删除按钮（×）
- 取消选择：
- 再次点击已选中的元素可以取消选择
- 或点击元素标记旁的红色删除按钮（×）
- 自动弹出输入框：选择元素后，会在元素下方自动弹出反馈输入框
- 输入反馈：
- 在输入框中描述该元素的问题或需要修改的内容
- 按 Enter 键快速保存（Shift+Enter 换行）
- 或点击"保存"按钮保存
- 关闭输入框：
- 点击输入框右上角的"×"按钮
- 或点击输入框外部区域
- 点击右上角的"📝 已选择列表"按钮
- 会在页面中央弹出列表面板，显示所有已选择元素的详细信息
- 包括：CSS选择器、类名、文本内容、反馈信息等
- 点击右上角的"×"或点击外部区域关闭列表
有两种方式可以生成Markdown：
方式一：使用右上角的生成按钮
- 当至少选择1个元素后，右上角会显示"📋 生成反馈意见并复制"按钮
- 点击按钮后，Markdown会自动复制到剪贴板
- 复制成功后会自动清空列表并退出框选模式
方式二：使用列表面板的复制按钮
- 打开列表面板后，点击面板头部的"📋 复制"按钮
- Markdown会自动复制到剪贴板
- 复制成功后会自动清空列表并退出框选模式
- 方式一：按 ESC 键（会自动清空所有选择）
- 方式二：点击插件弹窗中的"停止框选"按钮
- 方式三：点击生成按钮后自动退出
- ESC - 退出框选模式并清空所有选择
- Enter - 在反馈输入框中快速保存（不换行）
- Shift + Enter - 在反馈输入框中换行
- 提示框（右上角）：显示当前状态和已选择元素数量
- 已选择列表按钮（右上角）：打开列表面板
- 生成反馈按钮（右上角）：生成并复制Markdown
- 数字标记：显示在选中元素的上方，表示元素序号
- 删除按钮：数字标记旁的红色"×"按钮，用于删除该元素
- 反馈输入框：选择元素后弹出的输入框，用于输入反馈信息
插件会生成结构化的Markdown文档，格式如下：
# 页面反馈报告
## 页面信息
- **页面路径:** `/`
- **完整URL:** https://example.com/
- **视口尺寸:** 1728×997
- **反馈时间:** 2026/1/26 14:30:00
---
## 需要修改的元素
共选择了 **2** 个元素，具体信息如下：
### 元素 1: BUTTON "Primary Button"
**CSS选择器:**
```css
.demo-section > .demo-elements > .button-group > .demo-buttonCSS类名:
.demo-button
反馈/需要修改的内容:
按钮颜色需要改为蓝色
CSS选择器:
.demo-section > .demo-elements > .demo-card > h3反馈/需要修改的内容:
标题文字太小，需要增大字体
请根据上述信息，对页面中的指定元素进行修改。每个元素都提供了：
- CSS选择器 - 用于精确定位元素
- 反馈内容 - 用户对该元素的具体修改需求
请按照反馈内容对相应元素进行修改。
## 📋 提取的元素信息
插件会自动提取以下信息：
- **标签名** (tagName) - HTML元素标签（如 button, div, h3）
- **CSS选择器** (selector) - 元素的完整CSS选择器路径，用于精确定位
- **CSS类名** (classes) - 元素的CSS类名（如果有）
- **文本内容** (textContent) - 元素的文本内容（前100字符）
- **反馈信息** (feedback) - 用户输入的修改需求或问题描述
## 🎯 使用场景
### 场景1：与AI对话修改页面
1. 打开需要修改的网页
2. 使用插件框选需要修改的元素
3. 为每个元素输入修改需求
4. 生成Markdown并复制
5. 粘贴给AI（如ChatGPT、Claude等）
6. AI根据CSS选择器和反馈内容进行修改
### 场景2：记录页面问题
1. 发现页面问题
2. 框选问题元素
3. 输入问题描述
4. 生成报告保存或发送给开发团队
### 场景3：批量反馈
1. 一次性选择多个需要修改的元素
2. 逐个输入反馈
3. 生成完整的反馈报告
4. 一次性提交所有修改需求
## ⚙️ 技术细节
### 项目结构
ai_work/ ├── manifest.json # 插件配置文件（Manifest V3） ├── background.js # Service Worker后台脚本 ├── content.js # 内容脚本（页面交互逻辑） ├── content.css # 内容脚本样式 ├── popup.html # 弹窗HTML ├── popup.js # 弹窗逻辑 ├── popup.css # 弹窗样式 ├── icons/ # 图标文件夹 │ ├── icon16.png │ ├── icon48.png │ └── icon128.png ├── generate-icons.html # 图标生成工具 └── README.md # 说明文档
### 技术栈
- **Chrome Extension Manifest V3** - 最新版本的Chrome扩展API
- **Vanilla JavaScript** - 无框架依赖，纯原生JS
- **Chrome Storage API** - 数据持久化存储
- **Chrome Tabs API** - 标签页交互
- **Chrome Scripting API** - 动态脚本注入
### 权限说明
插件需要以下权限：
- `activeTab` - 访问当前活动标签页
- `storage` - 保存选择的数据
- `scripting` - 动态注入脚本
- `windows` - 创建新窗口（用于列表面板）
## ⚠️ 注意事项
1. **页面兼容性**
- 某些特殊页面（如 `chrome://` 页面）不支持框选功能
- 动态加载的内容可能需要等待加载完成后再选择
2. **数据保存**
- 选择的数据会保存在浏览器本地存储中
- 刷新页面后数据会恢复（如果URL相同）
- 清空浏览器数据会清除保存的选择
3. **性能考虑**
- 选择大量元素时可能影响页面性能
- 建议每次选择不超过20个元素
4. **浏览器支持**
- 支持 Chrome 88+ 版本
- 支持基于Chromium的浏览器（Edge、Brave等）
## 🔧 常见问题
### Q: 为什么点击元素没有反应？
A: 请确保：
- 已点击"开始框选"按钮
- 页面不是特殊页面（如chrome://页面）
- 元素没有被其他元素遮挡
### Q: 生成的Markdown格式不对？
A: 确保：
- 已为每个元素输入了反馈信息
- 浏览器支持复制到剪贴板功能
- 检查控制台是否有错误信息
### Q: 刷新页面后选择丢失了？
A: 这是正常行为。如果需要在刷新后保留选择，可以：
- 在退出框选模式前不要刷新页面
- 或者使用列表面板查看已保存的选择
### Q: 如何清除所有选择？
A: 有以下方式：
- 按ESC键（会清空并退出）
- 点击生成按钮后自动清空
- 点击列表面板的复制按钮后自动清空
## 📝 更新日志
### v1.0.0 (2026-01-26)
- ✨ 初始版本发布
- 🎯 实现可视化框选功能
- 📝 支持实时反馈编辑
- 📄 生成结构化Markdown
- 🗑️ 支持删除单个元素
- 📊 列表面板查看功能
- 💾 数据持久化存储
## 📄 许可证
MIT License
## 🤝 贡献
欢迎提交Issue和Pull Request！
## 📮 反馈
如有问题或建议，请通过GitHub Issues反馈。