Universal Broken Image Highlighter

WHAT IT DOES

Universal Broken Image Highlighter automatically detects broken images on any webpage by checking the loading status of each image. Broken images are highlighted with a red border and a warning overlay icon, making them easy to spot. A compact counter badge in the top-right corner shows the number of broken images at a glance. Click the badge to open a detailed list of all broken image URLs with copy functionality for debugging. This is an essential tool for web developers, QA testers, and content managers who need to identify and fix broken image links quickly.

WHERE IT RUNS

This extension works on any website across the entire web. It functions on blogs, e-commerce sites, news articles, documentation pages, and any page with images. The tool works across all domains and adapts to dynamically loaded content and single-page applications.

HOW TO USE

Install the extension and navigate to any webpage. The tool automatically scans for broken images and highlights them with a red border. A counter badge shows the number of broken images found. Click the badge to open a detailed list of all broken image URLs with copy and clear options. Use the overlay panel to customize the experience: toggle the broken image counter on or off, toggle image highlighting on or off, toggle the overlay icon on or off, toggle auto-scan on or off, click "Scan for Broken Images" to manually scan, click "Show Broken Images List" to open the list, or click "Clear Highlights" to remove all highlights. The status area shows how many broken images were found.

TECHNICAL SECTION — IMAGE LOADING STATUS DETECTION

The extension uses multiple strategies to detect broken images. It checks naturalWidth and naturalHeight properties — both being 0 indicates a broken image. It also listens for error events on images, which fire when an image fails to load. The tool processes all images on the page using a MutationObserver that watches for new images added to the DOM. Each detected broken image is wrapped in a relative container, and a red border and overlay icon are applied using inline CSS. The counter badge updates in real-time, and the detailed list shows the alt text and URL for each broken image. The tool also monitors load events to catch images that fail after initial processing, ensuring comprehensive detection even for images loaded via JavaScript.

THE PANEL — DRAG / PER-SITE POSITION / SNAP / COLLAPSE / RESIZE / ESCAPE

The overlay panel is fully interactive and designed for seamless multitasking. Drag it anywhere on the screen using the handle at the top of the panel; the position is saved per site so it stays where you left it across sessions. The panel includes a snap-to-edge feature that gently anchors the overlay to the nearest screen edge when released. Click the collapse button to minimize the panel to a compact pill showing the current broken image count; expand it again with a single click. Resize the panel vertically by dragging the bottom-right corner to view more controls. Press the Escape key at any time to instantly close the overlay; it reappears on the next page navigation or refresh.

PLEASE NOTE

This extension requires the free BotGentz companion extension to function, as it provides the underlying content script injection and cross-origin communication framework. No personal data, browsing history, or image data is stored, transmitted, or shared. Settings are stored locally in your browser using GM_setValue and are never sent to any external server. The extension does not access or store login credentials, financial data, or personally identifiable information. The tool reads image loading status from the DOM and does not access any private data. Images that are loaded lazily or via JavaScript may not be detected until they attempt to load. The tool is for debugging and testing purposes and should be used in conjunction with proper image optimization practices.