扩展基础使用

🎯 界面概览

弹出窗口界面

点击扩展图标后，你会看到主界面：

┌─────────────────────────────────┐
│  📸 FullPageScreenshot          │
├─────────────────────────────────┤
│  🌐 当前页面：example.com       │
├─────────────────────────────────┤
│  📸 可见区域     📄 全页面      │
│  🎯 元素选择     📐 区域选择    │
├─────────────────────────────────┤
│  ⚙️ 设置                         │
├─────────────────────────────────┤
│          [开始截图]            │
└─────────────────────────────────┘

功能按钮说明

🔧 基础设置

首次配置

1. 打开设置面板

   • 点击扩展弹出窗口的 ⚙️ 按钮
   • 或右键点击扩展图标 → 选项

2. 基本设置

   {
     "defaultCaptureMode": "visible",  // 默认截图模式
     "imageFormat": "png",           // 图片格式
     "quality": 90,                  // 图片质量
     "autoDownload": true            // 自动下载
   }

3. 快捷键设置

   • 配置个人喜好的快捷键组合
   • 避免与浏览器快捷键冲突

截图模式设置

为不同场景设置默认模式：

• 日常浏览：可见区域模式
• 文章收集：全页面模式
• 设计参考：元素选择模式
• 精确截图：区域选择模式

🎨 截图模式详解

可见区域模式

适用场景：

• 快速记录当前页面
• 分享网页状态
• 错误截图报告

操作步骤：

1. 确保页面显示正确
2. 调整滚动位置
3. 点击"可见区域"
4. 等待截图完成

技巧：

• 按 F11 进入全屏模式获得更大区域
• 使用浏览器缩放功能调整显示比例
• 关闭不必要的工具栏

全页面模式

适用场景：

• 保存完整文章
• 网页归档
• 长页面记录

操作步骤：

1. 确保页面完全加载
2. 滚动到页面顶部
3. 选择"全页面"模式
4. 等待自动滚动完成

注意事项：

• 确保网络连接稳定
• 某些动态内容可能需要额外等待时间
• 长页面处理时间会更长

元素选择模式

适用场景：

• 捕获特定组件
• 设计元素收集
• UI 参考截图

操作技巧：

1. 悬停预览：移动鼠标查看高亮效果
2. 精确选择：使用 Tab 键切换元素
3. 调整选择：拖拽边缘调整选区

支持的元素类型：

• 图片和视频
• 文本和段落
• 按钮和链接
• 表单元素
• 整个组件

区域选择模式

适用场景：

• 自定义截图区域
• 精确尺寸控制
• 多截图拼接准备

操作方法：

1. 拖拽创建：按住鼠标左键拖拽
2. 精确调整：使用方向键微调
3. 保持比例：按住 Shift 键保持宽高比

显示信息：

• 实时尺寸显示
• 宽高比信息
• 坐标位置
• 网格对齐辅助

💾 保存和管理

本地保存选项

文件格式选择

文件命名规则

// 自动命名模板
{
  "template": "screenshot_{date}_{time}_{mode}",
  "dateFormat": "YYYYMMDD",
  "timeFormat": "HHmmss",
  "modeNames": {
    "visible": "visible",
    "fullpage": "fullpage",
    "element": "element",
    "region": "region"
  }
}

示例文件名：

• screenshot_20240925_143022_visible.png
• screenshot_20240925_143544_fullpage.png
• screenshot_20240925_144015_element.png

本地文件夹管理

文件夹组织建议

建议按照用途创建简单的文件夹结构：

📁 Screenshots/
├── 📁 Work/              # 工作相关截图
├── 📁 Personal/          # 个人生活截图
├── 📁 Reference/         # 参考资料
└── 📁 Archive/           # 归档文件

文件管理技巧

• 定期整理：截图后立即分类整理
• 统一命名：保持一致的命名规范
• 备份重要：重要截图定期备份到其他位置
• 清理无用：定期删除临时和重复截图

⚡ 快捷键大全

全局快捷键

模式内快捷键

编辑快捷键

🔧 基础设置

图片质量设置

根据需求调整截图质量：

隐私设置

• 本地存储：所有截图仅保存在本地
• 无数据上传：不会上传任何数据到服务器
• 隐私模式：可选的隐私保护模式

权限管理

确保扩展有必要的权限：

• 读取权限：查看网页内容
• 写入权限：保存截图文件
• 存储权限：访问本地存储

🚨 基础故障排除

常见问题

扩展无法启动

症状：点击图标无响应

解决方案：

1. 检查扩展是否已启用
2. 重启浏览器
3. 重新安装扩展

截图显示空白

症状：截图结果为白色或黑色

解决方案：

1. 检查网页是否使用了特殊技术
2. 尝试不同的截图模式
3. 检查浏览器权限设置

截图失败

症状：截图过程中出现错误

解决方案：

1. 刷新页面后重试
2. 检查网页是否完全加载
3. 尝试使用可见区域模式

权限问题

确保扩展有正确的权限设置：

1. 打开浏览器扩展管理页面
2. 找到 FullPageScreenshot 扩展
3. 检查权限设置是否正确
4. 重新启用必要的权限

🎯 掌握这些基础功能，你已经能够高效使用 FullPageScreenshot 进行截图操作了！