chrome-plugin-transform-v3/docs/M2.md

M2 划词核心模块 (v0.1.1-0.1.9)

模块概述

• 版本范围: 0.1.1 ~ 0.1.9
• 任务数: 9
• 目标: 实现网页文本选择检测和沙拉图标/面板交互功能

关键产出

• 文本选择检测系统（selection.js）
• 沙拉图标组件（Shadow DOM 封装）
• 词典结果面板组件（DictPanel.js）
• 智能位置计算和视口适配
• Popup 中的划词总开关

任务列表

M2.1 文本选择检测 [目标版本: 0.1.1]

任务: 监听网页文本选择事件
验收标准:

• src/content/selection.js 存在
• 监听 mouseup 事件
• 当选中文本长度 > 0 时，打印选中文本到控制台
• 在任意网页划词，Console 能看到选中的文本

M2.2 获取选中文本坐标 [目标版本: 0.1.2]

任务: 计算选中文本的位置信息
验收标准:

• 函数 getSelectionCoords() 返回 {x, y, width, height}
• 支持单行文本选择
• 支持多行文本选择（返回首行或整个选区的矩形）
• 坐标值正确（相对于视口）

M2.3 沙拉图标组件（基础） [目标版本: 0.1.3]

任务: 创建浮动图标元素
验收标准:

• src/content/components/SaladIcon.js 存在
• 图标为 24x24px 的 div，背景色为绿色（先不用真实Logo）
• 使用 Shadow DOM 封装，样式不泄露到页面
• 图标 position: fixed，可定位到任意坐标

M2.4 图标定位显示 [目标版本: 0.1.4]

任务: 划词后图标出现在选中文本附近
验收标准:

• 划词后，图标显示在选中文本右上角（x + width, y）
• 图标不随页面滚动而偏移（使用 fixed 定位）
• 再次划词时，先隐藏旧图标，再显示新图标
• 点击页面空白处，图标消失

M2.5 图标点击事件 [目标版本: 0.1.5]

任务: 点击图标触发回调
验收标准:

• 点击图标时，打印 "icon clicked" 到控制台
• 回调函数可配置（通过参数传入）
• 点击后图标不消失（后续再处理）

M2.6 基础面板组件 [目标版本: 0.1.6]

任务: 创建词典结果展示面板
验收标准:

• src/content/components/DictPanel.js 存在
• 面板尺寸 400x300px，白色背景，带阴影
• 使用 Shadow DOM 封装
• 面板内显示标题 "词典结果"
• 提供 show(x, y) 和 hide() 方法

M2.7 面板位置计算 [目标版本: 0.1.7]

任务: 面板智能定位，不超出视口
验收标准:

• 面板默认显示在图标右下方
• 如果右侧超出视口，显示在左侧
• 如果下方超出视口，显示在上方
• 面板边界与视口保留 10px 边距

M2.8 图标-面板联动 [目标版本: 0.1.8]

任务: 点击图标显示面板
验收标准:

• 点击图标，面板显示在图标附近
• 面板显示时，图标保持可见
• 点击面板外部区域，面板关闭
• 按 ESC 键，面板关闭

M2.9 图标显示开关 [目标版本: 0.1.9]

任务: Popup 中添加总开关
验收标准:

• Popup 中有一个 Toggle 开关，标签"启用划词"
• 开关状态保存到 chrome.storage.local
• 关闭开关后，网页划词不再显示图标
• 打开开关后，恢复划词显示图标

依赖

• 前置模块: M1 基础架构模块
• 后置模块: M3 词典系统模块, M5 设置系统模块

参考资料

• AGENTS.md - 规范文档
• QUICK_REF.md - 快速参考