Drag and resize a ruler overlay to quickly measure pixel dimensions, positioning, and alignment of elements on any webpage.

Latest Version

Version
1.0.1
Update
July 2, 2014
Size
39.33KiB
Developer
billdami.com
Category
Users
2,000+
Rating
4.7037 ★
Manifest Version
2
Web Store Status
Languages Support
English
See more
Permissions
ActiveTab
See more

Reticle Extension

Report issues and submit suggestions on github (pull requests are also welcome!):

https://github.com/billdami/reticle

FEATURES
----------------------------------------
* Inspired by the excellent Mac app, Crosshairs (http://giantcomet.com/crosshairs)
* Super quick and easy to use, just click and drag anywhere on the page to draw an overlay, then move and resize it to your heart's content.
* Lightweight and minimalistic UI
* Use keyboard shortcuts to interact with the extension (see below for full list)
* Toggle between a primary and alternate overlay color
* Customize the overlay colors and opacity/transparency

AVAILABLE SETTINGS (Right-click extension button > Options)
----------------------------------------
* Primary overlay color (hex color value)
* Alternate overlay color
* Overlay opacity/transparency level

KEYBOARD SHORTCUTS
----------------------------------------
* Ctrl/Cmd+Shift+X - Toggle extension (This can be customized in Extensions > Keyboard shortcuts)
* Esc - Deactivate extension
* Arrow keys - Move overlay
* Shift+Arrow keys - Move overlay by 10px
* Alt+Arrow keys - Resize overlay
* Shift+Alt+Arrow keys - Resize overlay by 10px
* Ctrl/Cmd+Up/Down - Increase/decrease overlay opacity
* Tab - Toggle between primary and alternate overlay color
* Delete / Backspace - Clear the current overlay

CHANGELOG
----------------------------------------
v1.0.1 (June 14, 2014)
* BUGFIX: Overlay resize handles were not being hidden when dragging a newly drawn overlay
Read more

Source Manifest.json

{"update_url": "https://clients2.google.com/service/update2/crx", "name": "Reticle", "version": "1.0.1", "manifest_version": 2, "description": "Drag and resize a ruler overlay to quickly measure pixel dimensions, positioning, and alignment of elements on any webpage.", "options_page": "settings.html", "icons": { "16": "images/icon-16.png", "48": "images/icon-48.png", "128": "images/icon-128.png" }, "background": { "scripts": ["js/background.js"], "persistent": false }, "permissions": [ "activeTab" ], "browser_action": { "default_icon": { "19": "images/browser-action-19.png", "38": "images/browser-action-38.png" }, "default_title": "Enable Reticle" }, "commands": { "_execute_browser_action" : { "suggested_key": { "default": "Ctrl+Shift+X", "windows": "Ctrl+Shift+X", "mac": "Command+Shift+X", "chromeos": "Ctrl+Shift+X", "linux": "Ctrl+Shift+X" } } }}
Read more

Similar Extensions

icon

Line Pointer Extension · Productivity 2,000+ 10 ★ 33.17KiB

icon

Crosshair Extension · Fun 2,000+ 7 ★ 275KiB

icon

Emmet Re:view Extension · Developer Tools 2,000+ 162 ★ 74.65KiB

icon

AIM Extension · Productivity 2,000+ 3 ★ 109KiB

icon

Dimensions Extension · Developer Tools 2,000+ 454 ★ 17.28KiB

icon

Grid Ruler Extension · Developer Tools 2,000+ 335 ★ 288KiB

icon

Tape Extension · Developer Tools 2,000+ 155 ★ 12.68KiB

icon

Baseliner Extension · Developer Tools 2,000+ 45 ★ 205KiB

icon

Simple Ringed Reticle | Shell Shockers Theme Extension · Fun 2,000+ 6 ★ 16.9KiB

icon

SnapGuide Extension · Developer Tools 2,000+ 14 ★ 194KiB

icon

Blue Button | the webpage X-ray Extension · Developer Tools 2,000+ 21 ★ 82.66KiB

icon

Catchpoint User Experience Extension · Developer Tools 2,000+ 32 ★ 662KiB

icon

CSS3 Generator Extension · Developer Tools 2,000+ 60 ★ 346KiB

icon

Guides Extension · Developer Tools 2,000+ 10 ★ 14.65KiB

icon

guideLinr Extension · Developer Tools 2,000+ 25 ★ 53.25KiB

icon

Grid Builder Extension · Developer Tools 2,000+ 11 ★ 43.28KiB

icon

45to75 Extension · Developer Tools 2,000+ 7 ★ 5.22KiB

icon

Crosshair Plus Extension · Fun 2,000+ 18 ★ 47.01KiB

icon

Web Maker Extension · Developer Tools 2,000+ 1002 ★ 5.76MiB

icon

Quick Color Extension · Developer Tools 2,000+ 5 ★ 94.49KiB

icon

CSS Shapes Editor Extension · Developer Tools 2,000+ 101 ★ 84.76KiB

icon

Code Cola Extension · Developer Tools 2,000+ 188 ★ 189KiB

icon

PixelParallel by htmlBurger Extension · Developer Tools 2,000+ 65 ★ 223KiB

icon

Designer Tools Extension · Developer Tools 2,000+ 227 ★ 987KiB

User reviews

icon

Stanislav (ID: 000000ce13c99b47) Voted 5 ★ - Updated 02/15/2023 Simple and does its job perfectly!

icon

Maksym Shapoval (ID: 0000000c38d03c78) Voted 5 ★ - Updated 07/05/2019 Best in class!

icon

Rom Filippini (ID: 00000047d239d749) Voted 1 ★ - Updated 05/09/2019 Does not work

icon

neo (ID: 0000009fb61564fc) Voted 4 ★ - Updated 11/30/2017 I NEED TO ROTATE PLEASE IF YOU CAN MAKE IT ROTATE I WILL MAKE IT 5 STARS

icon

Kirill Nikolaev (ID: 000000bbd2dda32e) Voted 5 ★ - Updated 03/14/2017 Simple and useful.