edmhkpbhhejkoipmfajpnmlpmpamfhfc
Ui validate will help you in creating and testing pixel perfect design implementation. At the moment extension is free to use and is in first stage. All that needs to be done is to be on tab where site or application is located, take design image (png or jpg format) and upload it to the extension. After clicking preview image design will be shown over design implementation and you will be able to see if it is accurate or not, and what are deviations. One note as it is first version it only works on screen sizes for which design is made (i.e. if design is made for screen width of 1920px when testing it application needs to be opened in that dimensions, use responsive view if screen size doesn't fit design width), on next versions there will be work in adjusting those things to be more fluid.
SVG Clipper
The SVG Downloader Chrome Extension allows users to effortlessly select and download SVG files from any web page. With a simple… The SVG Downloader Chrome Extension allows users to effortlessly select and download SVG files from any web page. With a simple click, users can save high-quality scalable vector graphics for use in design projects, presentations, or personalization. Streamline your workflow and enhance your creative projects by downloading the Chrome Extension today. Steps to use: 1) Click on the SVG grabber extension 2) Click and drag over all SVGs you wish to download 3) Let go, they will be downloaded!
Dimensions
A tool for designers to measure screen dimensions This extension measures the dimensions from your mouse pointer up/down and left/right until it hits a border. So if you want to measure distances between elements on a website this is perfect. It doesn't really work with images because there the colors change a lot pixel to pixel. Measure between the following elements: images, input-fields, buttons, videos, gifs, text, icons. You can measure everything you see in the browser. Your designer handed you mockups as PNGs or JPEGs? Just drop them into Chrome, activate Dimensions and start measuring. You can start and stop dimensions with the ALT + D shortcut. Wanna get the radius of a circle? Is text standing in your way? Press Alt to measure the dimensions of a connected area. Dimensions is Open Source and hosted on Github. Want to port it to Firefox? Go ahead and fork it. Pull requests are welcome! https://github.com/mrflix/dimensions
Measuremate — Pixel Ruler for Web Design
Measure distances, inspect the box model, drop guides on any live page. A pixel ruler for the web — no DevTools. Measure distances between any elements on any website. Pixel ruler, CSS inspector, and alignment guides — everything you need for pixel-perfect design handoff, right in your browser. Measuremate is a measuring tool built for frontend developers, web designers, and QA engineers who need precise pixel measurements without leaving the browser. Lightweight, private, and fast. 🔍 INSPECTOR MODE — Click any element to inspect it. See dimensions, distances to neighboring elements, and full CSS details. Hover to preview before selecting. 📐 GUIDES MODE — Place vertical and horizontal ruler guides anywhere on the page. Snap to element edges, measure between guides, and verify alignment like in Figma. Switch between modes with a single keystroke. ━━━━━━━━━━━━━━━━━━━━━━━━ WHAT YOU CAN DO ━━━━━━━━━━━━━━━━━━━━━━━━ 📏 MEASURE DISTANCES between any two elements — spacing, gaps, padding, margins. On-page dimension lines show exact pixel values. 🎯 INSPECT THE CSS BOX MODEL with visual breakdown of content, padding, border, and margin (including negative margins). 🔬 VIEW DETAILED CSS by category — Layout (display, position, flex, grid, z-index), Text (font, color, line-height, letter-spacing), and Attributes. 🌳 NAVIGATE THE DOM TREE — browse from root to any element, hover to preview, click to inspect. 📐 DROP VERTICAL OR HORIZONTAL GUIDES on any page with a single keystroke. Use arrow keys for 1px precision, Shift+arrows for 10px jumps. 🧲 SNAP TO ELEMENTS — guides and cursor automatically snap to element edges and centers. Cmd+Shift+M (Mac) / Ctrl+Shift+M (Win) — Toggle Measuremate on/off 1 — Switch to Inspector mode 2 — Switch to Guides mode M — Show/hide the control panel V — Drop a vertical guide at cursor H — Drop a horizontal guide at cursor S — Toggle snap-to-alignment Q — Clear all guides Arrow keys — Move cursor/guides 1px (Shift for 10px) Esc — Clear selection ━━━━━━━━━━━━━━━━━━━━━━━━ WHO IT'S FOR ━━━━━━━━━━━━━━━━━━━━━━━━ • Frontend developers verifying pixel-perfect implementation against designs • Web designers checking spacing, alignment, and typography on live sites • QA engineers validating responsive layouts across breakpoints • Teams doing design handoff from Figma, Sketch, or other design tools • Anyone who needs a fast, clean ruler for the web ✓ Clean UI — does nothing until you activate it. No interference with the pages you browse. ✓ Lightweight — under 500 KiB, no bloat, no telemetry. ✓ Privacy-first — zero tracking, zero data collection. ✓ Works on any website, including SPAs and iframes. ✓ Figma-like distance measurements you already know how to read. ✓ Keyboard-first workflow for power users. 1. Click the Measuremate icon in your toolbar (or press Cmd/Ctrl+Shift+M) to activate 2. Hover over any element to preview its dimensions 3. Click to select — see distances to nearby elements appear on the page 4. Open the Main Panel with M to see full CSS, box model, and DOM tree 5. Press 2 to switch to Guides mode and drop alignment rulers ━━━━━━━━━━━━━━━━━━━━━━━━ FREE AND PRO ━━━━━━━━━━━━━━━━━━━━━━━━ We ship updates regularly. Feature requests and bug reports are always welcome.
TestCraft
Introducing TestCraft, a free and open-source browser extension with the power OpenAI LLMs, designed to be a companion to your software testing. AI-Powered Test Idea Generation: Leverage the power of OpenAI to generate comprehensive test ideas based on webpage elements. Automated Test Creation: Generate ready-to-run test scripts for popular automation frameworks, Playwright, Selenium, and Cypress, in your preferred programming language: JavaScript, TypeScript, Python, C#, and Java. TestCraft eases your test creation process and saves time. Accessibility Checks: Empower your web applications to be inclusive for all users. TestCraft identifies accessibility issues and provides actionable insights to improve. Test Idea to Automated Tests: Seamlessly convert your AI-generated test ideas into automated test scripts. Additionally, you can edit the test ideas to improve them before generating automation tests. Unlock the full potential of your testing process with TestCraft. Download it now and experience the future of software testing!
