English (United States)
See more
A Chrome extension that measures the size of elements when hovering over them.
Latest Version
Version
1.0
Update
September 16, 2024
Size
29.65KiB
Developer
Category
Users
1,000+ 
Rating
4.2 ★
Manifest Version
3
Web Store Status
Extension ID
Languages Support
Permissions
ActiveTab
See more
Element Size Measurement Extension
After clicking on the extension icon in the top right, it will activate.
Then, when you hover over any element on the screen a little popup will display:
Width in px
Hight in px
Area - Total area of the block you hovering over in px squared, and total percentage this block would take up of your screen (it can go above 100% which means more than one screen)
Visible Area - Area taken up in the viewport (your browser screen) in px squared and in percent of the viewport
Note: It doesn't work on absolutely all pages just yet, pages like settings and some google account pages and such require additional permissions, hence - doesn't work on those.
Read more
Then, when you hover over any element on the screen a little popup will display:
Width in px
Hight in px
Area - Total area of the block you hovering over in px squared, and total percentage this block would take up of your screen (it can go above 100% which means more than one screen)
Visible Area - Area taken up in the viewport (your browser screen) in px squared and in percent of the viewport
Note: It doesn't work on absolutely all pages just yet, pages like settings and some google account pages and such require additional permissions, hence - doesn't work on those.
Source Manifest.json
{"update_url": "https://clients2.google.com/service/update2/crx", "manifest_version": 3, "name": "Element Size Measurement", "version": "1.0", "description": "A Chrome extension that measures the size of elements when hovering over them.", "permissions": ["activeTab"], "action": { "default_icon": "icon.png", "default_title": "Toggle Element Size Measurement" }, "background": { "service_worker": "background.js" }, "content_scripts": [ { "matches": ["http://*/*", "https://*/*"], "css": ["content.css"], "js": ["content.js"] } ], "icons": { "16": "icon16.png", "32": "icon32.png", "48": "icon.png", "128": "128.png" }}
Read more
