在任意网页上绘图、标注、截图，支持对象级编辑与旋转
WebSketch 是一款功能强大的 Chrome 浏览器扩展，让你能够在任何网页上进行自由绘图、标注和截图。无论是教学演示、设计评审还是内容标注，都能轻松胜任。
- 画笔工具 - 自由绘制，流畅的线条体验
- 橡皮擦 - 精确擦除不需要的内容
- 矩形/圆形 - 支持填充和描边模式，Shift 约束正方形/正圆
- 直线/箭头 - 清晰的指向标注，Shift 约束 45° 角度
- 文字输入 - 支持中文输入法，即时编辑
- 计数圆圈 - 自动递增数字标注，flameshot 风格
- 对象级选择 - 每个元素独立可选，精准编辑
- 拖拽移动 - 手形工具轻松调整位置
- 旋转功能 - 按住 Shift 键旋转任意对象
- 撤销/重做 - 50 步历史记录，随时回退
- 预设颜色面板 - 10 种常用颜色一键选择
- 自定义颜色 - 支持任意颜色选择
- 取色器 - 从网页任意位置取色
- 线条粗细 - 多种笔触宽度可选
- 虚线模式 - 所有工具支持虚线样式
- 填充模式 - 矩形/圆形可选填充或描边
- 先绘图后截图 - 在网页上绘制内容后，选择区域截图
- 包含绘图内容 - 截图自动合成网页背景和绘图内容
- 区域选择 - 拖拽选择任意矩形区域，实时显示尺寸
- 自动保存 - 选择区域后自动下载 PNG 图片
- 网格辅助线 - 50px 间距网格，自适应对比度，任何背景可见
- 端点吸附 - 自动吸附到图形端点和网格交叉点，精准定位
- 快捷键支持 - 提升操作效率
即将上线，敬请期待！
-
下载源码
git clone https://github.com/fslong520/WebSketch.git cd WebSketch -
可选：生成可直接安装的目录和 ZIP Windows PowerShell:
.\build.ps1
macOS / Linux:
./build.sh
构建完成后会生成：
dist/chrome-extension/：给 Chrome 的“加载已解压的扩展程序”直接选这个目录dist/websketch-v版本号.zip：打包好的发布文件
-
加载扩展
- 打开 Chrome 浏览器
- 访问
chrome://extensions/ - 开启右上角的「开发者模式」
- 点击「加载已解压的扩展程序」
- 选择项目根目录，或者选择
dist/chrome-extension/
-
开始使用
- 打开任意网页
- 点击工具栏中的 WebSketch 图标
- 在弹出的面板里点击「开启绘图」
- 开始绘图
| 操作 | 说明 |
|---|---|
| 点击图标 | 打开插件面板 |
| 选择工具 | 点击工具栏图标切换工具 |
| 调整颜色 | 点击颜色选择器或预设色块 |
| 调整粗细 | 使用滑块调整线条宽度 |
| 撤销操作 | 点击撤销按钮或按 Ctrl+Z |
| 清空画布 | 点击清空按钮 |
| 快捷键 | 功能 |
|---|---|
B |
画笔工具 |
E |
橡皮擦 |
R |
矩形工具 |
C |
圆形工具 |
L |
直线工具 |
A |
箭头工具 |
T |
文字工具 |
H |
手形工具（选择/移动/旋转） |
S |
截图工具 |
G |
切换网格显示 |
Ctrl+Z |
撤销 |
Ctrl+Y |
重做 |
Delete |
删除选中对象 |
ESC |
取消当前操作 |
- 选择手形工具（
H） - 点击要旋转的对象
- 按住 Shift 键
- 水平拖拽鼠标即可旋转
- 松开 Shift 键切换回拖拽模式
- 选择矩形或圆形工具
- 点击工具栏的「填充」按钮
- 绘制时会自动填充颜色
- 点击工具栏的「虚线」按钮
- 所有后续绘制都会使用虚线样式
- 先使用绘图工具在网页上绘制内容
- 点击截图按钮（
S） - 画布保持可见，拖拽选择要截图的区域
- 松开鼠标自动保存截图（包含网页背景和绘图内容）
- 按
ESC取消截图
websketch/
├── manifest.json # 扩展配置文件
├── background/
│ └── background.js # 后台服务（截图等 API 调用）
├── content/
│ ├── content.js # 内容脚本（主要逻辑）
│ └── content.css # 工具栏样式
├── popup/
│ ├── popup.html # 弹出界面
│ ├── popup.css # 弹出界面样式
│ └── popup.js # 弹出界面逻辑
└── assets/
└── icons/ # 扩展图标
- Chrome Extension Manifest V3 - 最新的扩展标准
- Canvas 2D API - 高性能绘图引擎
- 对象系统设计 - 统一的对象管理和编辑
- 消息传递机制 - Content Script 与 Background 通信
- 事件处理优化 - 解决输入框焦点、事件冒泡等问题
- 📚 教育教学 - 在线课程标注、板书演示
- 💼 工作汇报 - 设计评审、需求标注
- 🎨 设计草图 - 快速原型、概念验证
- 📝 内容批注 - 网页截图标注、反馈收集
- 🖼️ 图片编辑 - 简单绘图和标注
欢迎提交 Issue 和 Pull Request！
- Fork 本仓库
- 创建你的特性分支 (
git checkout -b feature/AmazingFeature) - 提交你的修改 (
git commit -m 'Add some AmazingFeature') - 推送到分支 (
git push origin feature/AmazingFeature) - 开启一个 Pull Request
- 📸 重构截图功能：改为先绘图后截图，截图自动包含绘图内容
- 🎨 优化工具栏 UX 和视觉样式，重构 CSS 代码
- 🔧 改进内容脚本逻辑，提升交互体验
- 📦 新增 Windows 构建脚本
build.ps1 - 🧹 清理冗余文件，简化项目结构
- 📝 更新安装说明和文档
- 🧩 插件图标接入标准弹窗入口，安装后可直接从面板开启绘图
- 📦 新增
build.ps1，Windows 下可一键生成 Chrome 可安装目录和 ZIP - 🧹 清理未使用权限，更新安装说明和仓库地址
- ✨ 初始版本发布
- 🖌️ 支持画笔、橡皮擦、矩形、圆形、直线、箭头、文字工具
- 🎯 对象级编辑系统（选择、拖拽、删除）
- 🔄 旋转功能（Shift + 拖拽）
- 🎨 预设颜色面板和自定义颜色
- 📸 区域截图功能
- 📐 网格辅助线
- ⋯ 虚线和填充模式
- ⌨️ 完整快捷键支持
本项目采用 MIT License 开源协议。
- 🐛 报告问题：GitHub Issues
- 💡 功能建议：通过 Issues 提交想法和使用场景
如果你觉得 WebSketch 有用，请给我们一个 ⭐ Star！这将是对我们最大的鼓励。
Made with ❤️ by WebSketch Team