This extension displays Chrome’s viewport dimensions when resizing the browser window.

Latest Version

Version
0.0.7
Update
September 17, 2016
Size
48.58KiB
Developer
www.cswapps.com
Category
Users
20,000+
Rating
2.84177 ★
Manifest Version
2
Web Store Status
Languages Support
English (United States)
See more
Permissions
Storage
See more

Viewport Dimensions Extension

This extension displays Chrome’s viewport dimensions in the lower right corner of the browser window when resizing the browser. Very handy when you want to make the browser window a specific size for testing websites or if like me you want to make the viewport precisely 1920x1080 when recording screencasts at 1080p.

*** NOTE: Chrome requires you to RESTART Chrome before this extension is fully loaded.

*** UPDATED v0.0.7 ***
With the release of 0.0.7 I have added some new features, you can now set the amount of time the dimensions should remain visible for, the location on the screen the dimensions should appear, the background color, the text color, and size, and you now have the option to enable/disable both the inner/outer dimensions.

*** UPDATED v0.0.6 ***
FIX: I fixed an issue where sometimes the viewport details panel would hide
behind website elements, to fix this I have increased the z-index to
the maximum number.

*** UPDATED v0.0.5 ***
FIX: I fixed the error that would show up in the Chrome console.
NEW: I upgraded jQuery to v1.11.1

*** UPDATED v0.0.4 ***
NEW: The extension now displays Chrome’s inner and outer sizes.
NEW: The extension now works in offline mode, or with URLs \"file:///\".

If you find any issues or if this extension is not working correctly please post a comment on our GitHub page before leaving a review so I have a chance to fix it, thanks ;O)
https://github.com/CSWilson/Viewport-Dimensions/issues

You can view the code within this extension over at GitHub:
https://github.com/CSWilson/Viewport-Dimensions
Read more

Source Manifest.json

{"update_url": "https://clients2.google.com/service/update2/crx", "manifest_version": 2, "name": "Viewport Dimensions", "description": "This extension displays Chrome\u2019s viewport dimensions when resizing the browser window.", "version": "0.0.7", "options_ui": { "page": "options.html", "chrome_style": true }, "permissions": [ "storage" ], "background": { "persistent": false, "scripts": ["js/jquery-1.11.1.min.js","js/scripts.js"] }, "icons": { "128": "img/icon128.png" }, "content_scripts": [ { "matches": ["http://*/*","https://*/*","http://localhost/*","https://localhost/*","http://127.0.0.1/*","file:///*/*"], "css": ["css/styles.css"], "js": ["js/jquery-1.11.1.min.js","js/scripts.js"], "run_at": "document_end" } ]}
Read more

Similar Extensions

icon

Width and Height Display Extension · Developer Tools 20,000+ 34 ★ 17.87KiB

icon

Screen Size Extension · Productivity 20,000+ 15 ★ 19.14KiB

icon

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

icon

ViewportDimension Extension · Developer Tools 20,000+ 8 ★ 11.66KiB

icon

Breakpoint media-queries Extension · Developer Tools 20,000+ 1 ★ 15.03KiB

icon

Window Dimensions Extension · Developer Tools 20,000+ 13 ★ 52.19KiB

icon

Viewport Resizer: Ultimate Device Emulator & Website Testing Tool Extension · Developer Tools 20,000+ 277 ★ 143KiB

icon

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

icon

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

icon

WAVE Evaluation Tool Extension · Accessibility 20,000+ 143 ★ 344KiB

icon

Viewport Detector Extension · Developer Tools 20,000+ 3 ★ 153KiB

icon

Bootstrap Viewport Extension · Developer Tools 20,000+ 22 ★ 118KiB

icon

Browser resize Extension · Developer Tools 20,000+ 12 ★ 16.94KiB

icon

LiveReload Extension · Developer Tools 20,000+ 808 ★ 60.78KiB

icon

Window Resizer Extension · Developer Tools 20,000+ 30 ★ 125KiB

icon

Easy Window Resize Extension · Developer Tools 20,000+ 37 ★ 46.42KiB

icon

axe DevTools - Web Accessibility Testing Extension · Accessibility 20,000+ 114 ★ 2.89MiB

icon

CSSViewer Extension · Developer Tools 20,000+ 371 ★ 301KiB

icon

Web Developer Checklist Extension · Developer Tools 20,000+ 54 ★ 32.65KiB

icon

BrowserStack Extension · Developer Tools 20,000+ 95 ★ 805KiB

icon

Window Resizer Extension · Productivity 20,000+ 6 ★ 50.75KiB

icon

Emmet LiveStyle Extension · Developer Tools 20,000+ 351 ★ 356KiB

icon

Window Resizer Extension · Developer Tools 20,000+ 2278 ★ 503KiB

icon

PerfectPixel by WellDoneCode (pixel perfect) Extension · Developer Tools 20,000+ 605 ★ 732KiB

User reviews

icon

Heather Hauenstein (ID: 000000a85fc21bb6) Voted 1 ★ - Updated 08/17/2023 Pure garbage, doesn't work even after restarting Chrome. Tried everything. Trash!

icon

Jacob van Akin (ID: 00000055ec1d9d69) Voted 2 ★ - Updated 09/15/2022 It's great when it works. Lightweight and simple. But it randomly decides not to work at times so you can't depend on it.

icon

Marinos Georgiou (ID: 0000005b3ea662af) Voted 5 ★ - Updated 09/07/2022 Works great as of version 105.0.5195.102

icon

Michael Soza (ID: 000000bc09e2eb51) Voted 1 ★ - Updated 01/21/2022 Works randomly. When it does it is what I expected, but most of the time doesn't works.

icon

Dmitriy Slinkov (ID: 0000002533c14b2b) Voted 1 ★ - Updated 10/19/2021 Just doesn't work. Yes, I've restarted Chrome...