Add Chrome magnifier extension

chrome-magnifier/README.md

@@ -0,0 +1,193 @@
+# 网页放大镜 Chrome 扩展
+
+一个简单实用的 Chrome 浏览器扩展，提供网页内容放大镜功能。鼠标移动即可实时放大查看网页内容，帮助你更清晰地查看网页细节。
+
+## 功能特点
+
+- 🔍 **圆形放大镜**: 跟随鼠标移动的圆形放大区域
+- 🎯 **实时放大**: 鼠标移动即可实时查看放大内容
+- ⚙️ **可调节设置**:
+  - 放大倍数: 1.5x - 5x
+  - 放大镜大小: 100px - 400px
+- ⌨️ **快捷键支持**: 按 `Alt + M` 快速切换放大镜
+- 🎨 **美观界面**: 现代化的渐变色设计
+- 💡 **轻量级**: 不影响网页性能
+
+## 安装方法
+
+### 方法一：开发者模式安装（推荐）
+
+1. 打开 Chrome 浏览器
+2. 在地址栏输入 `chrome://extensions/` 并回车
+3. 打开右上角的「开发者模式」开关
+4. 点击「加载已解压的扩展程序」按钮
+5. 选择本项目的 `chrome-magnifier` 文件夹
+6. 扩展安装完成！你会在浏览器工具栏看到放大镜图标
+
+### 方法二：打包安装
+
+1. 在 Chrome 扩展管理页面（`chrome://extensions/`）
+2. 开启「开发者模式」
+3. 点击「打包扩展程序」
+4. 选择 `chrome-magnifier` 文件夹
+5. 生成的 `.crx` 文件可以分享给其他人安装
+
+## 使用方法
+
+### 基本使用
+
+1. **启动放大镜**:
+   - 点击浏览器工具栏的放大镜图标
+   - 在弹出窗口中点击「启动放大镜」按钮
+   - 或者使用快捷键 `Alt + M`
+
+2. **使用放大镜**:
+   - 启动后，移动鼠标即可看到圆形放大镜跟随
+   - 放大镜会实时显示鼠标位置的放大内容
+
+3. **关闭放大镜**:
+   - 再次点击「关闭放大镜」按钮
+   - 或使用快捷键 `Alt + M`
+
+### 自定义设置
+
+在扩展弹出窗口中，你可以调整：
+
+- **放大倍数**: 拖动滑块调整 1.5x 到 5x 的放大倍数
+- **放大镜大小**: 调整放大镜的直径（100px - 400px）
+
+所有设置会实时生效，无需重启浏览器。
+
+## 文件结构
+
+```
+chrome-magnifier/
+├── manifest.json           # 扩展配置文件
+├── popup.html              # 扩展弹出界面
+├── README.md               # 使用说明文档
+├── generate_icons.py       # 图标生成脚本
+├── icons/                  # 图标文件夹
+│   ├── icon16.png         # 16x16 图标
+│   ├── icon48.png         # 48x48 图标
+│   └── icon128.png        # 128x128 图标
+├── js/                     # JavaScript 文件
+│   ├── magnifier.js       # 放大镜核心功能
+│   └── popup.js           # 弹出窗口控制脚本
+└── css/                    # 样式文件
+    └── magnifier.css      # 放大镜样式
+```
+
+## 技术实现
+
+- **Manifest V3**: 使用最新的 Chrome 扩展 API
+- **Content Script**: 注入到所有网页，实现放大镜功能
+- **Canvas API**: 使用 HTML5 Canvas 绘制放大内容
+- **消息传递**: 使用 Chrome 消息 API 实现弹出窗口与内容脚本的通信
+
+## 快捷键
+
+- `Alt + M`: 切换放大镜开关
+
+## 兼容性
+
+- Chrome 88+
+- Edge 88+（基于 Chromium）
+- 其他基于 Chromium 的浏览器
+
+## 开发与自定义
+
+### 修改图标
+
+如果你想自定义图标，可以：
+
+1. 替换 `icons/` 文件夹中的图标文件
+2. 或者修改 `generate_icons.py` 脚本并运行：
+   ```bash
+   python3 generate_icons.py
+   ```
+
+### 修改样式
+
+编辑以下文件来自定义外观：
+
+- `css/magnifier.css` - 放大镜样式
+- `popup.html` - 弹出窗口的样式（内联 CSS）
+
+### 修改功能
+
+编辑以下文件来修改功能：
+
+- `js/magnifier.js` - 放大镜核心逻辑
+- `js/popup.js` - 弹出窗口交互逻辑
+
+## 常见问题
+
+### Q: 显示「请刷新页面后重试」或「此页面不支持扩展」？
+A: 这种情况通常有以下几种原因：
+
+1. **需要刷新页面**：如果你是在安装扩展后第一次使用，需要刷新网页才能加载扩展脚本
+   - 按 `F5` 或 `Ctrl/Cmd + R` 刷新页面
+   - 刷新后再点击扩展图标启动放大镜
+
+2. **特殊页面不支持**：扩展无法在以下类型的页面运行：
+   - Chrome 内部页面（`chrome://`）
+   - 扩展管理页面（`chrome://extensions/`）
+   - Chrome 网上应用店
+   - 新标签页（某些版本）
+   - 解决方案：切换到普通网页（如 `google.com`、`github.com` 等）
+
+3. **扩展需要重新加载**：如果刚修改过扩展文件
+   - 前往 `chrome://extensions/`
+   - 找到「网页放大镜」扩展
+   - 点击刷新图标 🔄
+
+### Q: 放大镜显示的内容不清晰？
+A: 可以尝试调整放大倍数，较小的倍数（2x-3x）通常效果更好。
+
+### Q: 放大镜没有显示？
+A: 请检查：
+1. 是否已经点击「启动放大镜」按钮
+2. 状态是否显示「已激活」
+3. 尝试刷新页面后重新启动
+4. 检查浏览器控制台是否有错误信息
+
+### Q: 如何在特定网站禁用？
+A: 在 Chrome 扩展管理页面，点击扩展详情，在「网站访问权限」中设置。
+
+### Q: 快捷键不起作用？
+A: 可能与其他扩展或系统快捷键冲突，可以尝试关闭其他扩展测试。
+
+## 版本历史
+
+### v1.1.0 (2025-11-05)
+- ✨ **重大更新**：实现真正的网页内容放大功能
+- 放大镜内现在显示实际的网页内容（文字、图片、CSS样式等）
+- 使用DOM克隆和CSS transform技术实现高效放大
+- 添加MutationObserver监听页面变化，自动更新放大内容
+- 性能优化：使用requestAnimationFrame减少重绘
+- 改进圆形遮罩效果和阴影
+
+### v1.0.1 (2025-11-05)
+- 修复消息通信错误（"Could not establish connection" 错误）
+- 添加页面类型检测，提示不支持的页面
+- 改进错误处理和用户提示
+- 添加自动重试机制
+
+### v1.0.0 (2025-11-05)
+- 首次发布
+- 基本放大镜功能
+- 可调节放大倍数和大小
+- 快捷键支持
+- 美观的弹出界面
+
+## 许可证
+
+本项目为开源项目，仅供学习和个人使用。
+
+## 反馈与贡献
+
+如有问题或建议，欢迎提出 Issue 或 Pull Request。
+
+---
+
+**享受使用网页放大镜！** 🔍✨

chrome-magnifier/TESTING.md

@@ -0,0 +1,167 @@
+# 测试说明
+
+## 如何正确测试网页放大镜扩展
+
+### 第一步：加载扩展
+
+1. 打开 Chrome 浏览器
+2. 在地址栏输入 `chrome://extensions/` 并回车
+3. 打开右上角的「开发者模式」开关
+4. 点击「加载已解压的扩展程序」
+5. 选择 `chrome-magnifier` 文件夹
+6. 确认扩展已加载，图标显示在工具栏
+
+### 第二步：打开测试页面
+
+**重要**：不要在 `chrome://` 页面测试！
+
+推荐测试页面：
+- https://www.google.com
+- https://www.github.com
+- https://www.wikipedia.org
+- 任何普通网页
+
+**不支持的页面**：
+- ❌ `chrome://extensions/`
+- ❌ `chrome://settings/`
+- ❌ `chrome://newtab/`
+- ❌ Chrome 网上应用店
+
+### 第三步：首次使用
+
+1. 打开一个测试网页（例如 google.com）
+2. **刷新页面**（按 F5 或 Ctrl/Cmd + R）
+   - 这一步很重要！首次安装扩展后必须刷新页面
+3. 点击工具栏的放大镜图标
+4. 应该看到弹出窗口
+
+### 第四步：测试放大镜
+
+#### 方法一：使用弹出窗口
+
+1. 在弹出窗口中点击「启动放大镜」按钮
+2. 状态应该变为「已激活」
+3. 移动鼠标，应该看到圆形放大镜跟随鼠标移动
+4. 调整放大倍数和大小滑块测试
+
+#### 方法二：使用快捷键
+
+1. 在网页上按 `Alt + M`
+2. 放大镜应该立即启动
+3. 再按一次 `Alt + M` 关闭
+
+### 预期行为
+
+✅ **正常情况**：
+- 弹出窗口显示「状态：未激活」
+- 点击启动后显示「状态：已激活」
+- 圆形放大镜跟随鼠标移动
+- 可以调整设置
+
+✅ **需要刷新的情况**：
+- 弹出窗口显示「等待页面加载...」
+- 然后显示「请刷新页面后重试」
+- 按 F5 刷新页面后即可正常使用
+
+✅ **不支持的页面**：
+- 弹出窗口显示「此页面不支持扩展」
+- 切换到普通网页即可
+
+### 常见测试问题
+
+#### 问题 1：点击启动没反应
+
+**解决方案**：
+1. 按 F5 刷新当前页面
+2. 再次点击扩展图标
+3. 点击「启动放大镜」
+
+#### 问题 2：一直显示「请刷新页面后重试」
+
+**解决方案**：
+1. 确认不是在 `chrome://` 页面
+2. 确实刷新了页面（F5）
+3. 尝试重新加载扩展：
+   - 前往 `chrome://extensions/`
+   - 找到「网页放大镜」
+   - 点击刷新图标 🔄
+   - 回到测试页面并刷新
+
+#### 问题 3：扩展图标是灰色的
+
+这是正常的，点击图标就会显示弹出窗口。
+
+### 测试检查清单
+
+- [ ] 扩展已加载到 Chrome
+- [ ] 在普通网页（不是 chrome:// 页面）上测试
+- [ ] 已刷新页面
+- [ ] 弹出窗口显示正确
+- [ ] 可以启动放大镜
+- [ ] 放大镜跟随鼠标移动
+- [ ] 可以调整放大倍数
+- [ ] 可以调整放大镜大小
+- [ ] 快捷键 Alt+M 工作正常
+- [ ] 可以正常关闭放大镜
+
+### 调试技巧
+
+如果遇到问题，可以打开控制台查看错误信息：
+
+1. **查看页面控制台**：
+   - 在网页上按 F12
+   - 切换到 Console 标签
+   - 查看是否有错误信息
+
+2. **查看扩展控制台**（popup）：
+   - 在 `chrome://extensions/` 页面
+   - 找到「网页放大镜」
+   - 点击「检查视图」下的「弹出内容」
+   - 查看控制台错误
+
+3. **查看背景页控制台**：
+   - 同样在扩展详情页
+   - 如果有「背景页」选项，点击查看
+
+### 成功标志
+
+如果你看到：
+- ✅ 控制台输出：「网页放大镜已加载！按 Alt+M 或点击扩展图标来切换放大镜。」
+- ✅ 弹出窗口状态从「未激活」变为「已激活」
+- ✅ 圆形放大镜跟随鼠标移动
+- ✅ **放大镜内显示网页的真实内容（文字、图片等）**
+
+恭喜！扩展工作正常！
+
+### 验证真实内容放大
+
+v1.1.0 版本的主要改进是显示真实的网页内容。测试方法：
+
+1. 在任何网页上启动放大镜
+2. 移动鼠标到有文字的地方
+3. 应该能在放大镜圆圈内看到放大的文字
+4. 移动到图片上，应该能看到放大的图片
+5. 移动到按钮、链接等元素上，应该能看到放大的元素
+
+**注意**：
+- 第一次启动可能需要1-2秒加载页面内容
+- 非常复杂的页面可能加载稍慢
+- 放大镜内的内容是页面的克隆，所以不可交互（这是正常的）
+
+### 修改代码后
+
+如果你修改了扩展代码：
+
+1. 前往 `chrome://extensions/`
+2. 找到「网页放大镜」扩展
+3. 点击刷新图标 🔄（而不是重新加载）
+4. 刷新测试页面（F5）
+5. 重新测试
+
+---
+
+**如果按照以上步骤操作后仍有问题，请提供：**
+1. 使用的浏览器版本
+2. 测试的具体网址
+3. 控制台的错误信息
+4. 问题的详细描述

chrome-magnifier/css/magnifier.css

@@ -0,0 +1,25 @@
+/* 网页放大镜样式 */
+
+#page-magnifier {
+  /* 所有样式都在 JS 中内联设置，以确保优先级 */
+  /* 这个文件用于任何额外的全局样式 */
+}
+
+/* 确保放大镜在所有元素之上 */
+#page-magnifier {
+  position: fixed !important;
+  z-index: 2147483647 !important;
+  pointer-events: none !important;
+}
+
+/* 平滑过渡效果 */
+#page-magnifier canvas {
+  transition: none;
+  image-rendering: -webkit-optimize-contrast;
+  image-rendering: crisp-edges;
+}
+
+/* 防止页面元素干扰放大镜 */
+body.magnifier-active {
+  cursor: crosshair;
+}