Image Link Previewer

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

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

• 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

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

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

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

• 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

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

• 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

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

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

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

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

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

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

• 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

• 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