Media
5 items
Description
Pro tools for designers & developers. Inspect, exact, extract. Webstractor is an all-in-one browser toolkit built for designers, developers, and QA engineers who demand precision, speed, and depth. Inspect pixels, dissect layouts, test responsive views across multiple devices, extract assets, and audit accessibility - all from a single privacy-first extension. No paywalls. No tracking. No limits. Completely free and built for efficiency. -------------------------------------------------- KEY MODULES AT A GLANCE -------------------------------------------------- 🔍 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 12-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 or outside the browser page. 🖼️ 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 using Canvas and WebAssembly. • 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. -------------------------------------------------- PRIVACY FIRST BY DESIGN -------------------------------------------------- • 100% Local Processing: All conversions, audits, and extractions happen strictly inside your browser. • Zero Analytics & Telemetry: No tracking, no data collection, no external servers. Why did I build Webstractor? To get basic visual inspection, responsive previews, and asset extraction, I had to install multiple separate extensions - most of them cluttered with aggressive paywalls, monthly subscriptions, ad-redirects, and cloud-processing that compromises privacy. Paying a monthly fee for a single minor feature was a dealbreaker. I built Webstractor out of frustration to bring everything into one fast, privacy-first, and completely free toolkit. Designed for my own daily workflow, I hope it brings as much value and freedom to yours as it does to mine! Support the project via Ko-fi! Share your feedback by email or write a review in Webstore. Thank you.