Browser Extension

Ruler v1.0

Draw lines and boxes directly on any webpage to measure pixel dimensions — no dev tools, no screenshots, no guessing. Toggle it on from the toolbar and drag to measure.

What it does
▭

Box measurements

Drag to draw a rectangle and see its width and height in pixels, live.

📏

Line measurements

Hold Shift while dragging to draw a straight line and see its length in pixels.

â—ŧ

Square constraint

Hold Ctrl while dragging a box to force equal width and height.

ðŸ–ąïļ

One-click toggle

Click the toolbar icon to turn the ruler on or off — no menus, no setup.

ðŸŠķ

Nothing saved

Measurements exist only on screen while you're drawing. Nothing is stored or recorded.

âŒĻïļ

Keyboard escape

Press Esc to cancel a drag in progress, or press it again to turn the ruler off entirely.

Installation
1

Install from the Chrome Web Store

Visit Ruler — Pixel Measurement Tool on the Chrome Web Store and click Add to Chrome.

(Placeholder link — swap in the real listing URL once it's live.)

2

Confirm the permissions

Chrome will ask you to confirm the permissions. Click Add extension — Ruler only uses these to draw its measurement overlay on the page you're currently viewing.

3

Pin it to your toolbar

Click the puzzle-piece icon in the Chrome toolbar, find Ruler, and click the pin icon so it's always one click away.

Taking a measurement
1

Turn the ruler on

Click the Ruler icon in the toolbar. A "📐 Ruler active" notification appears briefly, and the page cursor switches to a crosshair — you're now in measuring mode.

2

Drag to measure a box

Click and drag anywhere on the page. A yellow-bordered box follows your cursor, with a live width label above it, a height label to the right, and a combined W × H px label near your cursor.

3

Or hold Shift for a line

Hold Shift while dragging to switch to a straight-line measurement instead. The line shows an arrowhead and a length label in pixels at its midpoint.

4

Release to finish

Let go of the mouse to leave the measurement on screen. Start a new drag at any time to replace it — only one measurement is shown at a time.

5

Turn the ruler off

Click the toolbar icon again, or press Esc while not mid-drag. A "Ruler off" notification confirms it, and the overlay and cursor return to normal.

Keyboard shortcuts
Drag

Draw a box measurement (default mode).

Shift

Hold while dragging to draw a straight line measurement instead of a box.

Ctrl

Hold while dragging a box to constrain it to a perfect square.

Esc

Cancel the current drag, or turn the ruler off if nothing is being drawn.

Tip: The same hint text is shown in a small bar at the bottom of the screen the whole time the ruler is active, so you don't need to remember these shortcuts.
How it handles data

Ruler doesn't save, store or transmit anything. Measurements only ever exist as a temporary drawing on top of the page and disappear the moment you start a new one or turn the ruler off. There's no right-click menu, no popup, and no background tracking — the extension only acts on the page you're viewing, and only while it's switched on.

Troubleshooting
?

Clicking the icon does nothing

Chrome blocks extensions from running on internal pages such as chrome://, the Chrome Web Store, and the extensions page itself. Try it on a regular website instead.

?

The ruler doesn't appear after installing

Refresh the page once after installing or updating the extension, then click the toolbar icon again — the content script needs a fresh page load to attach.

?

My measurement disappeared

Starting a new drag always clears the previous measurement — only one is shown at a time. If you need to compare two, take a screenshot of the first before drawing the second.

?

Esc turned the ruler off instead of cancelling my drag

Esc only cancels a drag if you press it while still holding the mouse button down. If you've already released the mouse, the measurement has finished and Esc will deactivate the ruler instead.