Media
2 items
Description
A minimal Chrome extension (MV3) with popup, content script and service worker. Extension to calculate distance between html elements. Basic Measurement 1. Click the extension icon to open the popup 2. Click "Start measuring" to activate measurement mode 3. Click on the first element (green outline appears) 4. Click on the second element (yellow outline appears) 5. Horizontal and vertical distance lines appear with pixel measurements Keyboard Shortcuts 1. r : Restart measurement(clears all previous measurements and starts fresh) 2. ESC: Stop measuring and clear all overlays Visual Elements 1. Blue highlight: Hover preview of target element 2. Green outline: First selected element 3. Yellow outline: Second selected element 4. Red line: Horizontal distance measurement 5. Green line: Vertical distance measurement 6. Black labels: Distance values in pixels 7. Small crosshair: Follows cursor for precise targeting