Image Link Previewer bởi ShikamaruBH

Image Link Previewer Firefox Extension

A Firefox extension that shows image previews when hovering over links. The extension includes a resizable preview window for better user control and domain-based access control for privacy and performance.

Features

• Image Preview: Hover over any link to see a preview of images from the destination URL
• Smart Filtering: Automatically filters images based on size and aspect ratio criteria
• Configurable Hover Delay: Customizable delay before showing preview (100ms to 2000ms)
• Resizable Preview Window: Drag the bottom-right corner to resize the preview area
• Flexible Sizing: Preview window can be resized from 300x200px to 800x600px
• Domain Control: Choose which websites the extension runs on for privacy and performance

Hover Delay System

How It Works

The extension now includes a configurable hover delay system that prevents accidental previews:

1. Default Delay: 500ms delay before showing preview
2. Configurable Range: Adjustable from 100ms to 2000ms
3. Smart Cancellation: Delay is cancelled if mouse leaves link before timeout
4. User Control: Set your preferred delay in the extension popup menu

Benefits

• Prevents Accidental Previews: No more unwanted previews from quick mouse movements
• Better User Experience: Gives users time to decide if they want to see preview
• Customizable: Each user can set their preferred delay time
• Performance: Reduces unnecessary image fetching from accidental hovers

Configuration

1. Click extension icon to open control panel
2. Adjust slider to set desired hover delay (100ms - 2000ms)
3. Click "Save Settings" to apply changes
4. Settings persist across browser sessions

Domain Control System

How It Works

The extension now includes a domain control system that allows you to choose exactly which websites the extension will run on:

1. Default State: Extension is disabled on all domains by default
2. Selective Activation: Click the extension icon to open the control panel
3. Domain Management: Enable/disable the extension for specific domains
4. Privacy Control: Extension only runs where you explicitly allow it
5. Performance: Reduces unnecessary processing on unwanted sites

Using Domain Control

1. Click the extension icon in your browser toolbar
2. See current domain displayed in the popup
3. Toggle the switch to enable/disable for current domain
4. Click "Reload Page" to activate changes immediately
5. Manage all domains from the enabled domains list

Benefits

• Privacy: Extension only runs on websites you trust
• Performance: No unnecessary processing on unwanted sites
• Control: Full control over where the extension operates
• Security: Prevents extension from running on suspicious sites
• Battery Life: Reduces resource usage on mobile devices

Resizable Preview Window

How to Use

1. Hover over a link to show the preview window
2. Look for the resize handle in the bottom-right corner (diagonal lines)
3. Click and drag the bottom-right corner to resize the window
4. Release to set the new size

Visual Feedback

• Resize Handle: Diagonal lines in bottom-right corner
• Cursor Change: Changes to resize cursor when hovering over handle
• Active State: Visual feedback during resize operation
• Smooth Resizing: Real-time size updates as you drag

Smart Vertical Positioning

The preview window now intelligently chooses its vertical position:

• Below Cursor: Default position when sufficient space is available below
• Above Cursor: Automatically switches to above when more space is available above
• Space Analysis: Compares available space above vs. below cursor
• Optimal Placement: Always chooses the position with more available space
• Height Optimization: Adjusts height constraints based on chosen position

Usage

Basic Usage

1. Navigate to any webpage with links
2. Enable the extension for the current domain using the popup menu
3. Reload the page to activate the extension
4. Hover over any link that points to an external website
5. Wait for the configured delay (default: 500ms) before preview appears
6. A preview box will appear showing filtered images from the destination
7. Resize the preview window by dragging the bottom-right corner

Domain Management

1. Click extension icon to open control panel
2. Toggle domain switch to enable/disable for current site
3. Click "Reload Page" to activate changes
4. View all enabled domains in the list below
5. Remove domains by clicking the "Remove" button next to each domain

Hover Delay Configuration

1. Click extension icon to open control panel
2. Adjust the slider to set your preferred hover delay (100ms - 2000ms)
3. Click "Save Settings" to apply the new delay
4. Settings are saved and will persist across browser sessions
5. Test the delay by hovering over links on enabled domains

Domain Control Implementation

The domain control system includes:

• Storage Management: Uses browser.storage.local for persistence
• Domain Validation: Checks current hostname against enabled list
• UI Management: Popup interface for easy domain control
• Page Reload: Automatic activation after domain changes

Resize Implementation

The resizing system includes:

• Mouse Event Handling: Mousedown, mousemove, and mouseup events
• Size Constraints: Enforced minimum and maximum dimensions
• Visual Feedback: CSS classes and cursor changes during resize
• Position Awareness: Preview positioning adapts to new sizes

Troubleshooting

• Extension Not Working: Check if domain is enabled in the popup menu
• Memory Issues: Extension automatically manages resources efficiently
• Performance: Extension only runs on enabled domains
• Resize Not Working: Ensure you're clicking on the bottom-right corner area
• Preview Positioning: The preview automatically repositions to stay within viewport bounds
• Domain Control Issues: Check browser console for storage errors
• Popup Not Working: Ensure all popup files are properly loaded

Privacy & Security

• Domain Isolation: Extension only runs on explicitly enabled domains
• Local Storage: All preferences stored locally in your browser
• No Data Collection: Extension doesn't send data to external servers
• Transparent Operation: All functionality visible in browser console
• User Control: Full control over where and when the extension operates