Page Ruler Extension Chrome

Use the Page Ruler to measure the web for width, height of any section of your choice

Latest Version

Version

1.0

Update

April 15, 2023

Size

10.19KiB

Developer

Page Ruler Extension

The Web Page Ruler extension allows you to measure web page elements with a draggable ruler, giving you the dimensions, coordinates, and other relevant details in a matter of seconds. It's an invaluable tool for web designers, developers, and anyone who needs precise measurements on a web page.

Features:

1. Easily activate the ruler by clicking on the extension icon.
2. Draw a rectangular ruler by clicking and dragging your mouse over the web page.
3. Get accurate width, height, start and end measurements in pixels.
4. See X and Y axis details for precise positioning.
5. Works on clickable elements, buttons, and banners.
6. Only one ruler active at a time - clicking elsewhere or drawing a new ruler will close the current one.
7. Deactivate the ruler by clicking the extension icon, the cross mark on the
8. \"Ruler Mode\" button, or pressing the ESC key.

Compatible with both mouse clicks and touch input on touch-enabled devices.
Whether you're a web designer working on a new layout or a developer debugging your site, the Web Page Ruler extension will make your job easier by providing a quick and convenient way to measure elements on any web page.

To get started with the Web Page Ruler extension, simply install it and click on the extension icon to activate the ruler. Measure any element on the web page by clicking and dragging your mouse, and see the dimensions, coordinates, and other details in real-time. Deactivate the ruler when you're done by clicking the extension icon, the cross mark on the \"Ruler Mode\" button, or pressing the ESC key.

Source Manifest.json

{"update_url": "https://clients2.google.com/service/update2/crx", "manifest_version": 3, "name": "Page Ruler", "version": "1.0", "description": "Use the Page Ruler to measure the web for width, height of any section of your choice", "permissions": ["activeTab", "scripting"], "action": { "default_icon": { "16": "icon16.png", "48": "icon48.png", "128": "icon128.png" } }, "content_scripts": [ { "matches": [""], "js": ["content.js"], "css": ["styles.css"] } ], "background": { "service_worker": "background.js" }}