A tool for designers to measure screen dimensions
Dimensions Extension
This extension measures the dimensions from your mouse pointer up/down and left/right until it hits a border. So if you want to measure distances between elements on a website this is perfect. It doesn't really work with images because there the colors change a lot pixel to pixel.
# Images & HTML Elements
Measure between the following elements: images, input-fields, buttons, videos, gifs, text, icons. You can measure everything you see in the browser.
# Mockups
Your designer handed you mockups as PNGs or JPEGs? Just drop them into Chrome, activate Dimensions and start measuring.
# Keyboard Shortcut
You can start and stop dimensions with the ALT + D shortcut.
# Area Boundaries
Wanna get the radius of a circle? Is text standing in your way? Press Alt to measure the dimensions of a connected area.
# Open Source
Dimensions is Open Source and hosted on Github. Want to port it to Firefox? Go ahead and fork it. Pull requests are welcome! https://github.com/mrflix/dimensions
Read more
# Images & HTML Elements
Measure between the following elements: images, input-fields, buttons, videos, gifs, text, icons. You can measure everything you see in the browser.
# Mockups
Your designer handed you mockups as PNGs or JPEGs? Just drop them into Chrome, activate Dimensions and start measuring.
# Keyboard Shortcut
You can start and stop dimensions with the ALT + D shortcut.
# Area Boundaries
Wanna get the radius of a circle? Is text standing in your way? Press Alt to measure the dimensions of a connected area.
# Open Source
Dimensions is Open Source and hosted on Github. Want to port it to Firefox? Go ahead and fork it. Pull requests are welcome! https://github.com/mrflix/dimensions
Source Manifest.json
{"update_url": "https://clients2.google.com/service/update2/crx", "name": "Dimensions", "description": "A tool for designers to measure screen dimensions", "version": "2.0.5", "manifest_version": 2, "author": "Felix Niklas", "icons": { "16": "images/icon16.png", "32": "images/[email protected]", "48": "images/icon48.png", "128": "images/icon128.png" }, "background": { "scripts": ["chrome.js"], "persistent": false }, "commands": { "_execute_browser_action": { "suggested_key": { "default": "Alt+D" } } }, "browser_action": { "default_icon": { "16": "images/icon16.png", "19": "images/icon19.png", "32": "images/[email protected]", "38": "images/[email protected]" }, "default_title": "Measure Dimensions" }, "permissions": [ "activeTab" ]}
Read more