Click Target Enlarger

WHAT IT DOES

This script identifies and highlights click targets on any webpage that are smaller than a user-defined minimum size, making them easier to see and click. It scans for interactive elements—links, buttons, form controls, and elements with ARIA roles—and checks their dimensions. Targets smaller than the minimum size (default 44x44 pixels, based on WCAG success criterion 2.5.5) are highlighted with a colored border or other visual indicator. You can choose from three enlarge modes: "Highlight" (border only), "Enlarge" (scale up the element), or "Zoom" (highlight plus zoom on click). When you click on a small target, it temporarily enlarges or zooms in for easier interaction. This is especially useful for people with motor control difficulties, low vision, or anyone who struggles with small links and buttons.

WHERE IT RUNS

The script runs on all websites (*://*/*), making it truly universal. It works on any page with interactive elements—navigation menus, forms, buttons, links, and custom UI components. It supports both desktop and mobile views.

HOW TO USE

After installation, the settings panel appears on the left side of the screen with the gear emoji (⚙️). Open the panel to configure the script:

- The "Enable click target enlarger" toggle enables or disables the script.

- Adjust the "Minimum target size" slider to set the size threshold (20-80px). Targets smaller than this will be highlighted.

- Choose the "Enlarge mode" from the dropdown: "Highlight (border only)," "Enlarge (scale up)," or "Zoom (highlight + zoom on click)."

- Click "Refresh targets" to manually re-scan the page.

- Click "Clear all indicators" to remove all highlights.

The script works automatically—small targets are highlighted with a red border. Click any highlighted target to zoom or enlarge it temporarily.

TECHNICAL SECTION — REAL MECHANISM

The script detects interactive elements using a comprehensive set of selectors: a[href], button, input[type="submit"], input[type="button"], input[type="checkbox"], input[type="radio"], select, textarea, and elements with ARIA roles like button, link, checkbox, radio, tab, menuitem, option, switch, and elements with tabindex. For each element, it calculates the actual clickable area using getBoundingClientRect and adds padding values (from computed styles) to account for the full click target size. If the width or height is below the minimum size, the element is flagged as small. The enlarge mode determines the visual treatment: "highlight" adds a 3px colored outline with offset; "enlarge" applies transform: scale(1.2) with padding; "zoom" combines a colored outline with a click handler that scales the element to 1.5x for 800ms. The script uses a WeakSet to track processed elements and avoid duplicate work. A MutationObserver watches for DOM changes and processes new interactive elements as they load.

THE PANEL

The settings panel is built with BotGentz's BGPanel component. It is draggable via its header, allowing you to reposition it anywhere on the screen. The panel snaps to the left edge by default but can be moved freely. Click the gear emoji to collapse the panel into a small bubble, and click the bubble to expand it again. The panel remembers its position per page session. Press the Escape key to quickly close or minimize the panel. The panel includes a status flash bar that provides visual feedback when settings are changed or actions are performed. All settings save automatically via GM_setValue.

PLEASE NOTE

This script requires the free BotGentz browser extension to run. It does not function as a standalone Chrome extension and does not use chrome.* APIs. The script modifies the appearance of interactive elements by applying styles—this may affect the visual layout of some pages. The enlarge modes use CSS transforms and may cause overlapping with adjacent elements. The minimum size threshold is based on WCAG 2.5.5 (44x44px), but you can adjust it to your preference. The script stores only your preferences via GM_setValue. No data is sent externally—all data is stored locally in your browser. The script never reads or writes password fields, hidden inputs, or file inputs. All DOM operations use safe methods (style properties, textContent, appendChild) and never use innerHTML.