Extension Basics

🎯 Interface Overview

Popup Window Interface

After clicking the extension icon, you'll see the main interface:

┌─────────────────────────────────┐
│  📸 FullPageScreenshot          │
├─────────────────────────────────┤
│  🌐 Current Page: example.com   │
├─────────────────────────────────┤
│  📸 Visible Area    📄 Full Page │
│  🎯 Element Select 📐 Area Select │
├─────────────────────────────────┤
│  ⚙️ Settings                     │
├─────────────────────────────────┤
│          [Start Screenshot]     │
└─────────────────────────────────┘

Function Button Descriptions

🔧 Basic Settings

First Configuration

1. Open Settings Panel

   • Click ⚙️ button in extension popup window
   • Or right-click extension icon → Options

2. Basic Settings

   {
     "defaultCaptureMode": "visible",  // Default screenshot mode
     "imageFormat": "png",           // Image format
     "quality": 90,                  // Image quality
     "autoDownload": true            // Auto download
   }

3. Keyboard Shortcut Settings

   • Configure preferred shortcut combinations
   • Avoid conflicts with browser shortcuts

Screenshot Mode Settings

Set default modes for different scenarios:

• Daily Browsing: Visible Area mode
• Article Collection: Full Page mode
• Design Reference: Element Selection mode
• Precise Screenshot: Area Selection mode

🎨 Screenshot Mode Details

Visible Area Mode

Applicable scenarios:

• Quick recording of current page
• Share webpage status
• Error screenshot reports

Operation Steps:

1. Ensure page displays correctly
2. Adjust scroll position
3. Click "Visible Area"
4. Wait for screenshot completion

Tips:

• Press F11 to enter fullscreen for larger area
• Use browser zoom to adjust display ratio
• Close unnecessary toolbars

Full Page Mode

Applicable scenarios:

• Save complete articles
• Webpage archiving
• Long page recording

Operation Steps:

1. Ensure page is fully loaded
2. Scroll to page top
3. Select "Full Page" mode
4. Wait for auto-scroll completion

Notes:

• Ensure stable network connection
• Some dynamic content may require additional wait time
• Long pages take longer to process

Element Selection Mode

Applicable scenarios:

• Capture specific components
• Design element collection
• UI reference screenshots

Operation Tips:

1. Hover Preview: Move mouse to see highlight effects
2. Precise Selection: Use Tab key to switch elements
3. Adjust Selection: Drag edges to adjust selection

Supported Element Types:

• Images and videos
• Text and paragraphs
• Buttons and links
• Form elements
• Entire components

Area Selection Mode

Applicable scenarios:

• Custom screenshot areas
• Precise size control
• Multi-screenshot stitching preparation

Operation Method:

1. Drag to Create: Hold left mouse button and drag
2. Precise Adjustment: Use arrow keys for fine-tuning
3. Maintain Ratio: Hold Shift key to maintain aspect ratio

Display Information:

• Real-time size display
• Aspect ratio information
• Coordinate position
• Grid alignment assistance

💾 Save and Manage

Local Save Options

File Format Selection

File Naming Rules

// Auto-naming template
{
  "template": "screenshot_{date}_{time}_{mode}",
  "dateFormat": "YYYYMMDD",
  "timeFormat": "HHmmss",
  "modeNames": {
    "visible": "visible",
    "fullpage": "fullpage",
    "element": "element",
    "region": "region"
  }
}

Example Filenames:

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

Local Folder Management

Folder Organization Suggestions

Recommend creating a simple folder structure by purpose:

📁 Screenshots/
├── 📁 Work/              # Work-related screenshots
├── 📁 Personal/          # Personal life screenshots
├── 📁 Reference/         # Reference materials
└── 📁 Archive/           # Archive files

File Management Tips

• Regular Organization: Organize immediately after screenshots
• Unified Naming: Maintain consistent naming conventions
• Backup Important: Regularly backup important screenshots to other locations
• Clean Up Unused: Regularly delete temporary and duplicate screenshots

⚡ Complete Keyboard Shortcuts

Global Shortcuts

Mode-specific Shortcuts

Edit Shortcuts

🔧 Basic Settings

Image Quality Settings

Adjust screenshot quality according to needs:

Privacy Settings

• Local Storage: All screenshots only saved locally
• No Data Upload: No data uploaded to servers
• Privacy Mode: Optional privacy protection mode

Permission Management

Ensure extension has necessary permissions:

• Read Permission: View webpage content
• Write Permission: Save screenshot files
• Storage Permission: Access local storage

🚨 Basic Troubleshooting

Common Issues

Extension Won't Start

Symptom: Clicking icon has no response

Solution:

1. Check if extension is enabled
2. Restart browser
3. Reinstall extension

Screenshot Shows Blank

Symptom: Screenshot result is white or black

Solution:

1. Check if webpage uses special technology
2. Try different screenshot modes
3. Check browser permission settings

Screenshot Failed

Symptom: Error occurs during screenshot process

Solution:

1. Refresh page and retry
2. Check if webpage is fully loaded
3. Try using Visible Area mode

Permission Issues

Ensure extension has correct permission settings:

1. Open browser extension management page
2. Find FullPageScreenshot extension
3. Check if permission settings are correct
4. Re-enable necessary permissions

🎯 Master these basic functions, and you can efficiently use FullPageScreenshot for screenshot operations!