Drag and resize a ruler overlay to quickly measure pixel dimensions, positioning, and alignment of elements on any webpage.
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
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
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