{"product_id":"caliper-page-ruler","title":"Caliper - Page Ruler","description":"\u003cp style=\"text-align: center; margin-top: 16px; margin-bottom: 24px;\"\u003e\n  \u003ca href=\"https:\/\/demo.projetostack.com\/extensions\/page-ruler\" _blank style=\"display: inline-block; background-color: #0A0A0A; color: #FFFFFF; font-weight: bold; text-decoration: none; padding: 12px 24px; border-radius: 4px; font-size: 14px; text-transform: uppercase; letter-spacing: 1px;\"\u003e\n    Live Demo ↗\n  \u003c\/a\u003e\n\u003c\/p\u003e\n\u003cp\u003eMeasure webpage elements, distances, and custom areas directly inside your browser.\u003c\/p\u003e\n\u003cp\u003eCaliper is a React and TypeScript page-ruler extension featuring box, line, and element measurement modes, CSS and device-pixel values, angle calculations, edge rulers, crosshair guides, and copyable results. It provides a complete source-code foundation for developer tools, design utilities, testing products, and client extension projects.\u003c\/p\u003e\n\u003ch2\u003ePerfect For\u003c\/h2\u003e\n\u003cp\u003e✓ Web Designers\u003c\/p\u003e\n\u003cp\u003e✓ UI \u0026amp; UX Designers\u003c\/p\u003e\n\u003cp\u003e✓ Frontend Developers\u003c\/p\u003e\n\u003cp\u003e✓ Quality Assurance Teams\u003c\/p\u003e\n\u003cp\u003e✓ Website Auditors\u003c\/p\u003e\n\u003cp\u003e✓ Design Agencies\u003c\/p\u003e\n\u003cp\u003e✓ Browser Productivity Tools\u003c\/p\u003e\n\u003cp\u003e✓ Developer Utilities\u003c\/p\u003e\n\u003cp\u003e✓ Internal Business Applications\u003c\/p\u003e\n\u003cp\u003e✓ Agency Client Projects\u003c\/p\u003e\n\u003ch2\u003eWhy Choose Caliper?\u003c\/h2\u003e\n\u003cp\u003e✓ Measure custom areas directly on webpages\u003c\/p\u003e\n\u003cp\u003e✓ Inspect element width and height\u003c\/p\u003e\n\u003cp\u003e✓ Measure straight-line distances\u003c\/p\u003e\n\u003cp\u003e✓ Calculate horizontal and vertical differences\u003c\/p\u003e\n\u003cp\u003e✓ Display line angles\u003c\/p\u003e\n\u003cp\u003e✓ View CSS and device-pixel values\u003c\/p\u003e\n\u003cp\u003e✓ Use built-in horizontal and vertical rulers\u003c\/p\u003e\n\u003cp\u003e✓ Copy measurement results instantly\u003c\/p\u003e\n\u003cp\u003e✓ Switch modes with keyboard shortcuts\u003c\/p\u003e\n\u003cp\u003e✓ High-DPI canvas rendering\u003c\/p\u003e\n\u003cp\u003e✓ Lightweight browser permissions\u003c\/p\u003e\n\u003cp\u003e✓ Clean and organised source code\u003c\/p\u003e\n\u003cp\u003e✓ Easy to customise and extend\u003c\/p\u003e\n\u003cp\u003e✓ No recurring subscription fees\u003c\/p\u003e\n\u003ch2\u003eWhat’s Included\u003c\/h2\u003e\n\u003cp\u003eYour download includes:\u003c\/p\u003e\n\u003cp\u003e\u003cstrong\u003e📦 Complete React \u0026amp; TypeScript Source Code\u003c\/strong\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cstrong\u003e📦 Chrome Manifest V3 Production Build\u003c\/strong\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cstrong\u003e📦 Microsoft Edge-Compatible Build\u003c\/strong\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cstrong\u003e📦 Page Ruler Popup Interface\u003c\/strong\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cstrong\u003e📦 On-Page Measurement Overlay\u003c\/strong\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cstrong\u003e📦 Box Measurement Mode\u003c\/strong\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cstrong\u003e📦 Line Measurement Mode\u003c\/strong\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cstrong\u003e📦 Element Measurement Mode\u003c\/strong\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cstrong\u003e📦 CSS Pixel Calculations\u003c\/strong\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cstrong\u003e📦 Device Pixel Calculations\u003c\/strong\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cstrong\u003e📦 Device Pixel Ratio Detection\u003c\/strong\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cstrong\u003e📦 Width \u0026amp; Height Measurement\u003c\/strong\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cstrong\u003e📦 Diagonal Measurement\u003c\/strong\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cstrong\u003e📦 X \u0026amp; Y Origin Coordinates\u003c\/strong\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cstrong\u003e📦 Horizontal \u0026amp; Vertical Distance Values\u003c\/strong\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cstrong\u003e📦 Line Angle Calculation\u003c\/strong\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cstrong\u003e📦 Horizontal Edge Ruler\u003c\/strong\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cstrong\u003e📦 Vertical Edge Ruler\u003c\/strong\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cstrong\u003e📦 Measurement Crosshair Guides\u003c\/strong\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cstrong\u003e📦 On-Page Measurement HUD\u003c\/strong\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cstrong\u003e📦 Copy Measurement Action\u003c\/strong\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cstrong\u003e📦 Keyboard Shortcut Controls\u003c\/strong\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cstrong\u003e📦 Background Service Worker\u003c\/strong\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cstrong\u003e📦 Runtime Content Script\u003c\/strong\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cstrong\u003e📦 Geometry Utilities\u003c\/strong\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cstrong\u003e📦 Extension Icons \u0026amp; Assets\u003c\/strong\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cstrong\u003e📦 WXT Configuration\u003c\/strong\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cstrong\u003e📦 TypeScript Configuration\u003c\/strong\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cstrong\u003e📦 Package Configuration\u003c\/strong\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cstrong\u003e📄 Documentation (README.md)\u003c\/strong\u003e\u003c\/p\u003e\n\u003ch2\u003eKey Features\u003c\/h2\u003e\n\u003cp\u003e✓ Box Measurement Mode\u003c\/p\u003e\n\u003cp\u003e✓ Line Measurement Mode\u003c\/p\u003e\n\u003cp\u003e✓ Element Measurement Mode\u003c\/p\u003e\n\u003cp\u003e✓ Drag-to-Measure Interface\u003c\/p\u003e\n\u003cp\u003e✓ Live Width Measurement\u003c\/p\u003e\n\u003cp\u003e✓ Live Height Measurement\u003c\/p\u003e\n\u003cp\u003e✓ Diagonal Measurement\u003c\/p\u003e\n\u003cp\u003e✓ Element Bounding-Box Detection\u003c\/p\u003e\n\u003cp\u003e✓ Line Length Measurement\u003c\/p\u003e\n\u003cp\u003e✓ Horizontal Delta\u003c\/p\u003e\n\u003cp\u003e✓ Vertical Delta\u003c\/p\u003e\n\u003cp\u003e✓ Line Angle Calculation\u003c\/p\u003e\n\u003cp\u003e✓ CSS Pixel Results\u003c\/p\u003e\n\u003cp\u003e✓ Device Pixel Results\u003c\/p\u003e\n\u003cp\u003e✓ Device Pixel Ratio Display\u003c\/p\u003e\n\u003cp\u003e✓ Measurement Origin Coordinates\u003c\/p\u003e\n\u003cp\u003e✓ Horizontal Edge Ruler\u003c\/p\u003e\n\u003cp\u003e✓ Vertical Edge Ruler\u003c\/p\u003e\n\u003cp\u003e✓ Fifty-Pixel Ruler Markers\u003c\/p\u003e\n\u003cp\u003e✓ One-Hundred-Pixel Major Markers\u003c\/p\u003e\n\u003cp\u003e✓ Crosshair Measurement Guides\u003c\/p\u003e\n\u003cp\u003e✓ High-DPI Canvas Scaling\u003c\/p\u003e\n\u003cp\u003e✓ Copy Measurement Results\u003c\/p\u003e\n\u003cp\u003e✓ On-Page Control Panel\u003c\/p\u003e\n\u003cp\u003e✓ Keyboard Mode Switching\u003c\/p\u003e\n\u003cp\u003e✓ Keyboard Extension Toggle\u003c\/p\u003e\n\u003cp\u003e✓ Escape-to-Close Action\u003c\/p\u003e\n\u003cp\u003e✓ Runtime Script Injection\u003c\/p\u003e\n\u003cp\u003e✓ Shadow DOM Style Isolation\u003c\/p\u003e\n\u003cp\u003e✓ Responsive Measurement HUD\u003c\/p\u003e\n\u003ch2\u003eTechnology Stack\u003c\/h2\u003e\n\u003cp\u003eBuilt using modern browser-extension technologies:\u003c\/p\u003e\n\u003cp\u003e✓ React 19\u003c\/p\u003e\n\u003cp\u003e✓ TypeScript\u003c\/p\u003e\n\u003cp\u003e✓ WXT\u003c\/p\u003e\n\u003cp\u003e✓ Manifest V3\u003c\/p\u003e\n\u003cp\u003e✓ Canvas API\u003c\/p\u003e\n\u003cp\u003e✓ Pointer Events API\u003c\/p\u003e\n\u003cp\u003e✓ Clipboard API\u003c\/p\u003e\n\u003cp\u003e✓ Browser Tabs API\u003c\/p\u003e\n\u003cp\u003e✓ Browser Scripting API\u003c\/p\u003e\n\u003cp\u003e✓ Browser Commands API\u003c\/p\u003e\n\u003cp\u003e✓ Shadow DOM\u003c\/p\u003e\n\u003cp\u003e✓ \u003ccode\u003egetBoundingClientRect()\u003c\/code\u003e\u003c\/p\u003e\n\u003cp\u003e✓ Device Pixel Ratio API\u003c\/p\u003e\n\u003cp\u003e✓ Component-Based Architecture\u003c\/p\u003e\n\u003cp\u003e✓ Modern CSS\u003c\/p\u003e\n\u003cp\u003e✓ Modern Folder Structure\u003c\/p\u003e\n\u003ch2\u003ePerformance Features\u003c\/h2\u003e\n\u003cp\u003eDesigned for responsive webpage measurements:\u003c\/p\u003e\n\u003cp\u003e✓ Client-Side Measurement Processing\u003c\/p\u003e\n\u003cp\u003e✓ No External API Requests\u003c\/p\u003e\n\u003cp\u003e✓ No Remote Measurement Service\u003c\/p\u003e\n\u003cp\u003e✓ Runtime Content-Script Injection\u003c\/p\u003e\n\u003cp\u003e✓ High-DPI Canvas Rendering\u003c\/p\u003e\n\u003cp\u003e✓ CSS Viewport Coordinate Calculations\u003c\/p\u003e\n\u003cp\u003e✓ Lightweight Overlay Interface\u003c\/p\u003e\n\u003cp\u003e✓ Immediate Measurement Updates\u003c\/p\u003e\n\u003cp\u003e✓ Efficient Pointer Event Handling\u003c\/p\u003e\n\u003cp\u003e✓ Responsive Canvas Resizing\u003c\/p\u003e\n\u003cp\u003e✓ Scroll and Resize Recalculation\u003c\/p\u003e\n\u003cp\u003e✓ Shadow DOM Style Isolation\u003c\/p\u003e\n\u003cp\u003e✓ Reusable TypeScript Utilities\u003c\/p\u003e\n\u003cp\u003e✓ Clean React Implementation\u003c\/p\u003e\n\u003cp\u003e✓ Modern Manifest V3 Architecture\u003c\/p\u003e\n\u003cp\u003e✓ Easy Branding Customisation\u003c\/p\u003e\n\u003cp\u003e✓ Scalable Source-Code Structure\u003c\/p\u003e\n\u003ch2\u003eHow It Works\u003c\/h2\u003e\n\u003col\u003e\n\u003cli\u003eDownload and extract the project files.\u003c\/li\u003e\n\u003cli\u003eInstall the project dependencies.\u003c\/li\u003e\n\u003cli\u003eRun the development environment or generate a production build.\u003c\/li\u003e\n\u003cli\u003eLoad the generated extension folder into your browser.\u003c\/li\u003e\n\u003cli\u003eOpen a standard webpage.\u003c\/li\u003e\n\u003cli\u003eOpen Caliper from the toolbar or press \u003ccode\u003eAlt + M\u003c\/code\u003e.\u003c\/li\u003e\n\u003cli\u003eSelect Box, Line, or Element mode.\u003c\/li\u003e\n\u003cli\u003eDrag across the page or hover over an element to measure it.\u003c\/li\u003e\n\u003cli\u003eReview the results in CSS pixels and device pixels.\u003c\/li\u003e\n\u003cli\u003eCopy the current measurement from the on-page control panel.\u003c\/li\u003e\n\u003cli\u003eCustomise the branding, colours, icons, shortcuts, interface, and functionality.\u003c\/li\u003e\n\u003cli\u003eBuild and publish the completed extension when ready.\u003c\/li\u003e\n\u003c\/ol\u003e\n\u003ch2\u003eBrowser Compatibility\u003c\/h2\u003e\n\u003cp\u003eWorks with:\u003c\/p\u003e\n\u003cp\u003e✓ Google Chrome\u003c\/p\u003e\n\u003cp\u003e✓ Microsoft Edge\u003c\/p\u003e\n\u003cp\u003e✓ Brave\u003c\/p\u003e\n\u003cp\u003e✓ Opera\u003c\/p\u003e\n\u003cp\u003eCompatibility with other Chromium-based browsers may be possible but should be tested before production use.\u003c\/p\u003e\n\u003ch2\u003eLicense\u003c\/h2\u003e\n\u003cp\u003eYour purchase includes:\u003c\/p\u003e\n\u003cp\u003e✓ Lifetime access to the purchased source code\u003c\/p\u003e\n\u003cp\u003e✓ Commercial use for personal and client projects\u003c\/p\u003e\n\u003cp\u003e✓ Full customisation rights\u003c\/p\u003e\n\u003cp\u003e✓ Unlimited personal and client projects\u003c\/p\u003e\n\u003cp\u003eYou may not:\u003c\/p\u003e\n\u003cp\u003e✗ Resell the original source code\u003c\/p\u003e\n\u003cp\u003e✗ Redistribute the files\u003c\/p\u003e\n\u003cp\u003e✗ Share the files publicly\u003c\/p\u003e\n\u003cp\u003e✗ Repackage the source code as a competing digital product for resale\u003c\/p\u003e\n\u003ch2\u003eInstant Digital Download\u003c\/h2\u003e\n\u003cp\u003eNo physical product will be shipped.\u003c\/p\u003e\n\u003cp\u003eImmediately after purchase, you’ll receive instant access to download the complete page-ruler source code, production build, and documentation so you can begin creating your own browser measurement tool.\u003c\/p\u003e\n\u003ch2\u003eImportant Note\u003c\/h2\u003e\n\u003cp\u003e\u003cem\u003eCaliper measures using browser CSS viewport coordinates.\u003c\/em\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cem\u003eThe displayed device-pixel value is calculated by multiplying the CSS measurement by the current \u003ccode\u003edevicePixelRatio\u003c\/code\u003e. It should not be treated as a physical measurement in centimetres, inches, or real-world screen dimensions\u003c\/em\u003e.\u003c\/p\u003e\n\u003cp\u003eElement mode measures the rendered element bounds returned by \u003ccode\u003egetBoundingClientRect()\u003c\/code\u003e and does not separately calculate:\u003c\/p\u003e\n\u003cp\u003e✗ Margins\u003c\/p\u003e\n\u003cp\u003e✗ Padding\u003c\/p\u003e\n\u003cp\u003e✗ Border Thickness\u003c\/p\u003e\n\u003cp\u003e✗ Content-Box Dimensions\u003c\/p\u003e\n\u003cp\u003e\u003cem\u003eCaliper may not operate on restricted browser pages such as settings pages, extension marketplaces, internal browser URLs, and some built-in document viewers.\u003c\/em\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cem\u003eBrowser zoom, page transforms, embedded frames, and operating-system scaling may affect how browser coordinates relate to physical display pixels.\u003c\/em\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cstrong\u003ePROJETO STACK - Premium software templates and digital products built for modern businesses.\u003c\/strong\u003e\u003c\/p\u003e","brand":"PROJETO STACK","offers":[{"title":"Default Title","offer_id":65440548585821,"sku":null,"price":14.0,"currency_code":"USD","in_stock":true}],"thumbnail_url":"\/\/cdn.shopify.com\/s\/files\/1\/1089\/3633\/1613\/files\/BD8EBABC-CCF7-4091-A228-9FCE8D7CA489.png?v=1786284819","url":"https:\/\/szhvzk-gz.myshopify.com\/products\/caliper-page-ruler","provider":"PROJETO STACK","version":"1.0","type":"link"}