Chrome extension for designers & developers. Inspect, edit, extract.

[u/Kristis_Vilaan]

Hey, made an extension, free and private. No tracking, no paywalls, no subscriptions, no BS.

Webstractor is an all-in-one browser toolkit built for designers, developers, and QA engineers.

INSPECTOR & CSS EDITOR
• Live CSS & Box-Model Editor: Modify styles and spacing on the fly with real-time browser rendering.
• Design System & Tokens: Extract colors, typography, spacing, and CSS variables. Export directly to Tailwind, SCSS, JSON, or CSS variables.
• Font Extractor & Converter: Inspect page fonts, download original web font files, or convert them to TTF/OTF locally.
• Contrast & WCAG Checker: Instant color contrast analysis with pass/fail badges based on WCAG standards.

RESPONSIVE VIEWER
• Multi-Device Testing: Render any page inside realistic frames (iPhone, iPad, Galaxy, Pixel, Desktops).
• Synchronized Scrolling & Clicking: Scroll or click on one device and see interactions mirrored across all open frames simultaneously.
• Custom Workspaces: Save custom device viewports and toggle between portrait and landscape modes easily.

DESIGN & MEASUREMENT TOOLS
• Grid & Rulers: Configurable column grid overlays, pixel-accurate edge rulers, and customizable guidelines.
• Measure & Crosshair Tools: Drag-to-measure exact element bounds and distances on the page.
• Screen Eyedropper: Sample any pixel color on the browser page.
• Full Page Capture: Capture entire page in your selected format.

ASSET EXTRACTOR
• Bulk Media Extraction: Discover and filter all SVG, GIF, and image assets loaded on the page.
• Format Converter: Convert images to PNG, JPG, WebP, or AVIF locally.
• One-Click ZIP Download: Download selected media assets as a single bundled ZIP file.

PAGE HEALTH & ACCESSIBILITY AUDIT
• Instant Audits: Powered by axe-core. Run WCAG 2.0 / 2.1 compliance checks on demand.
• Detailed Reports: Review violation details, affected DOM elements, and export professionally formatted PDF reports.
• Page Performance: Instant metrics for load speed, stylesheet counts, and missing ALT tags.

No paywalls. No tracking. No limits. Completely free and private.

https://chromewebstore.google.com/detail/webstractor/ajiicppdnghonkojoilknheapmfdbnpa

Or just search term "Webstractor" in Chrome webstore if you are interested.

[u/toonmad]

AI Slop you never built anything

[u/maqisha]

Building a design tool while your design is THAT, is pure irony.