Screen Ruler - Pixel Ruler with History

A screen ruler (pixel ruler) extension that measures pixel distances and sizes by dragging on any webpage, with saveable and…

Screen Ruler - Pixel Ruler with History lets you measure pixel-perfect distances and sizes on any webpage just by dragging. ■ Key Features 【Two measurement modes】 ・Line mode: measure the distance between two points in "Free," "Horizontal only," or "Vertical only." In Free mode, holding Shift while dragging temporarily locks the line to whichever direction (horizontal or vertical) you've moved further in. ・Rectangle mode: measure width and height at the same time by dragging over an area, with the value shown on each of the four edges. 【Display unit (px / px + vw)】 ・Show measurements as vw (percentage of the viewport width) alongside px, e.g. 120px (30.8vw). ・vw is calculated based on the viewport width including the scrollbar. Handy for checking proportions in responsive design. 【Measurement history】 ・Every measurement is automatically added to a history list. ・Click any history item to redraw the same measurement line at its original position. Simply hovering over an item also shows a live preview before you click. ・Hold Ctrl (⌘ on Mac) while clicking to display multiple history items at once for comparison. Ctrl+click again to remove one, or use the "Clear all shown" button to reset them all at once. ・History stays temporary until you press "Save" — only then is it kept after closing the browser, so you're free to experiment without cluttering your saved data. ・Delete individual entries, or clear the whole history at once. 【Line color + presets】 ・Choose any color for your measurement lines. ・Save your favorite colors as presets for quick reuse. 【Snap to elements (Beta)】 ・When enabled, dragging near the edge of a page element automatically snaps to it (top, bottom, left, or right). ・Off by default. Since this is a beta feature, you can turn it off at any time if it behaves unexpectedly on a particular page. 【A panel that works even on narrow screens】 ・Use the "Minimize" button to temporarily hide just the panel while keeping measurement mode active. Bring it back anytime from the tab at the edge of the screen. ・On narrow screens (such as DevTools' mobile view), the panel automatically switches to a horizontal bar at the bottom of the screen, with "Settings" and "History" tabs to switch between. This keeps the measurement area spacious. 【Sync history across Google accounts (optional)】 ・Sync your measurement history across Chrome browsers signed in to the same Google account. ・Off by default — sync only happens via chrome.storage.sync if you turn it on. 【Japanese and English support】 ・The panel automatically displays in Japanese or English depending on your Chrome display language setting. ■ Who it's for ・Web designers and front-end engineers ・Anyone checking a live implementation against a design comp ・Anyone who needs to quickly confirm spacing or sizing between elements ■ How to use 1. Click the toolbar icon to open the panel 2. Choose "Line" or "Rectangle" 3. Drag on the page to measure 4. Review or replay past measurements from the history list — hold Ctrl to compare several at once ■ Privacy This extension does not collect any personally identifiable information. Measurement history is stored locally in your browser, or — only if you explicitly enable it — synced via your Google account. No data is ever sent to an external server. This extension uses the scripting permission to inject the measurement script and stylesheet into a tab only at the moment the user clicks the toolbar icon. Specifically, it uses chrome.scripting.executeScript() and chrome.scripting.insertCSS() to build the measurement panel and overlay UI, limited strictly to the tab the user has explicitly clicked on (the tab temporarily granted access via the activeTab permission). The extension does not use content_scripts to auto-inject into every page via the manifest. As a result, no extension code or DOM elements exist on any page the user has not actively invoked the extension on. This design respects user privacy by limiting the extension's footprint to only the tabs where it is actually being used.