Welcome to Webstractor
Webstractor is the ultimate all-in-one browser toolkit built for designers and developers who demand precision, speed, and depth.
Inspect every pixel, dissect any layout, preview across dozens of devices, extract every visual asset, audit accessibility in seconds, and export production-ready design tokens - all from a single extension that respects your privacy.
Zero paywalls. Zero tracking. Zero compromises.
As an independent developer, I built Webstractor to be completely free, fast, and privacy-first forever. If this tool brings value to your daily workflow and you'd like to support my work, you can support me on Ko-fi.
Thank you for using Webstractor!
Core Features at a Glance
Click any feature below to jump to its detailed documentation.
Inspector
Element Inspection
Live CSS Editor
Color Picker
Contrast Checker
Design Tokens
Font Download & Converter
Accessibility Audit
Page Health
Responsive Mode
Viewer
Device Presets
Custom Presets
Device Frames
Scroll & Click Sync
Rotate & Zoom
Inspector & Ruler
Full Page Capture
Designer
Grid Overlay
Rulers
Guidelines
Measure Tool
Crosshair
Eyedropper
Full Page Capture
Extractor
Image Extraction
SVG Extraction
GIF Extraction
Format Converter
Size Filter
ZIP Download
Panel Controls
The floating panel can be dragged by its header bar to reposition it anywhere on screen. Use the header buttons to access this Help & Guide, support the developer via Ko-Fi, or close the panel. The panel resets its position each time it is opened.
Inspector
The Inspector is the largest and most feature-rich tab. It provides deep element inspection, live CSS editing, color analysis, typography tools, design token extraction, performance metrics, and accessibility auditing - all in one place.
Element Inspector
Activating the Inspector
Toggle the inspector by clicking the toggle button in the Inspector tab, or press Alt + I. When active, hover over any element on the page - a highlight overlay shows its boundaries, tag name, and dimensions (width x height) in real time.
Selecting & Inspecting Elements
Click any highlighted element to select it. The panel instantly displays its full computed CSS properties, box model dimensions (content, padding, border, margin), typography details, and color information.
Live CSS Editor
Once an element is selected, a Live CSS Editor appears showing the element's key computed styles as editable CSS. Modify any property directly - changes apply to the live page in real time. Click "Copy" to copy the CSS to clipboard.
Editable Properties
Specific properties like font family, font weight, font style, text decoration, font size, and line height are presented as editable fields with datalist dropdowns. Change a font family and see it applied instantly on the page. Font family suggestions include popular Google Fonts. Box-model values - margin, padding, border width, border radius, and border color - are also editable directly on the Structural Outline diagram.
Structural Outline
When an element is selected, a structural outline view shows the DOM hierarchy of the selected element - its parent chain and children - for quick understanding of the page structure. The interactive box-model diagram above it is fully editable: click any value to adjust margin, padding, border width, border radius, and border color live on the page, with a sync toggle to apply a value to all sides at once.
Responsive Mode
Viewport Testing
Toggle Responsive Mode directly within the Inspector tab using the desktop, tablet, and mobile icons. Switching between modes instantly resizes the page layout to simulate standard desktop, tablet, or mobile screens, allowing you to test responsive layouts effortlessly while retaining all Inspector features, including live CSS editing, color contrast checks, and element analysis.
Color Contrast Checker
WCAG Contrast Ratio
When you select an element, the Inspector automatically calculates and displays the contrast ratio between the element's text color and background color. The result is shown with a color-coded badge - green for passing WCAG standards and red for failing. Click the color swatches to copy values.
Image Download & Conversion
Download Images from Inspector
When inspecting an image element, the Inspector provides a direct download option. You can download the image in its original format or convert it to PNG, JPG, WebP, or AVIF before downloading - all conversion happens locally in the browser.
Colors
Page Colors & Background Colors
The Colors section automatically extracts all unique text colors and background colors used across the page. Colors are displayed as clickable swatches - click any swatch to copy its value.
Color Grouping & Shades
Extracted colors are intelligently grouped by similarity - Webstractor clusters similar shades together and auto-names each group (e.g., "Midnight Blue", "Coral Red"). This gives you a clear picture of the page's color palette, with each group showing its variations and shades.
Color Format Switching
Toggle between HEX, RGB, and HSL color formats by clicking the format label. Your preferred format is remembered across sessions.
Design Tokens
Token Extraction
The Design Tokens section scans the page and extracts all visual design values - colors, fonts, font sizes, spacing values, and CSS gradients - organized into categories. These tokens represent the page's complete design system.
Export Formats
Export extracted tokens as CSS Custom Properties, SCSS Variables, JSON, Tailwind Config, or JavaScript/TypeScript objects. Generated code can be copied with one click and dropped directly into your project.
Fonts
Font Discovery
The Fonts section lists every font family used on the page, along with the specific weights and styles detected. This makes it easy to identify which fonts a website uses.
Font Download
Download the original web font files directly from the page's stylesheet. Click the download button next to any font to save the original font file.
Font Format Converter
Convert downloaded fonts to TTF or OTF format. The converter handles WOFF, WOFF2, TTF, and OTF source formats, with all processing done locally in the browser.
Page Health & Performance
Performance Metrics
Displays quick page health indicators: page load time, total stylesheet count, total element count, average contrast ratio, and number of images missing alt attributes.
Accessibility Checker
Running an Accessibility Audit
Click "Run Accessibility Check" to run a full axe-core audit against the current page. Choose the WCAG standard (2.0 A, 2.0 AA, 2.1 AA, etc.) before running. Results show violations, passes, and incomplete checks with severity levels.
Detailed Report & PDF Export
Click "View Detailed Report" to open a full-screen results viewer. The report can be exported as a professionally formatted PDF document with violation details, affected elements, and fix suggestions.
Viewer
The Viewer provides responsive design testing by rendering the current page inside multiple device frames simultaneously. Perfect for checking how a website looks and behaves across phones, tablets, and desktops.
Device Presets
Built-in Device Library
Choose from a wide range of built-in device presets: iPhones, iPads, Samsung Galaxy phones and tablets, Google Pixel, desktops, and more. Each preset uses the device's real screen dimensions for accurate responsive testing.
Custom Presets
Create Your Own Devices
Define custom device viewports by specifying a name, width, and height. Custom presets are saved and available alongside the built-in devices.
Preset Workspaces
Save Device Combinations
Save your current selection of active devices as a workspace. Switch between workspaces to quickly load different sets of devices - for example, a "Mobile" workspace with phones only, or a "Full Review" workspace with all sizes.
Device Frames & UI
Realistic Device Frames
Devices are rendered with realistic frame bezels that match the actual hardware appearance. Each device shows its name and dimensions in a label header.
Device Sync
Synchronized Scrolling & Clicking
All active device previews are synchronized - scroll one device and all others follow, click on one device and the same interaction is mirrored across all. This makes it easy to compare the same content section and interaction across different screen sizes simultaneously.
Rotate
Portrait / Landscape Toggle
Toggle individual devices between portrait and landscape orientation. The viewport dimensions swap accordingly, and the page re-renders to show how the layout adapts.
Layout
Viewer Layout Options
Choose how devices are arranged on screen - side by side horizontally, stacked vertically, or in a grid layout. Adjust the layout to fit your screen and workflow.
Zoom
Viewer Zoom Control
Zoom the entire Viewer canvas in or out to fit more devices on screen, or zoom in to focus on details. The zoom level controls the scale of all device frames simultaneously.
Inspector & Ruler
Inspector Inside the Viewer
The Viewer includes a built-in Inspector that works directly on the device previews. Activate it to inspect elements within any device frame, see their CSS properties, and compare how they render at different viewport widths.
Ruler in the Viewer
A Ruler mode is available inside the Viewer to measure and verify exact pixel distances within device frames. This helps ensure responsive layouts match design specifications.
Full Page Capture
Capture Device Previews
Each device frame has its own Full Page Capture button for capturing the full scrollable content of that specific device. The output format (PNG, JPG, WebP, AVIF) is selected from the Viewer header menu and applies to all devices.
Designer
The Designer tab provides pixel-perfect precision tools for layout analysis and visual measurement. All tools are toggleable and can be used simultaneously.
Grid Overlay
Column Grid System
Toggle a column grid overlay on top of the page. The grid is fully configurable: set the number of columns (default 12), gutter width (default 20px), and max width (default 1200px). The grid auto-centers on the page.
Grid Customization
Adjust grid color and opacity to match your needs. The grid overlay is rendered as an SVG pattern for crisp lines at any zoom level.
Rulers
Pixel Rulers
Toggle horizontal and vertical rulers along the top and left edges of the viewport. Rulers display accurate page coordinates with major tick marks every 100px, minor marks every 50px, and fine marks every 10px. The rulers update in real time as you scroll.
Guidelines
Creating Guidelines
When rulers are active, enable guideline mode and click anywhere on a ruler to place a guideline at that position. Click the horizontal ruler to place vertical guidelines, and the vertical ruler to place horizontal guidelines. Each guideline shows its exact pixel coordinate.
Measure Tool
Precision Measurement
Activate the Measure tool and click-drag anywhere on the page to measure a rectangular area. The overlay displays the width and height in pixels in real time. Click the dimensions to copy them to clipboard.
Crosshair
Crosshair Cursor
Enable the crosshair to display full-width and full-height guide lines that follow your cursor. This helps with visual alignment when comparing element positions across the page.
Eyedropper
Color Sampling
The eyedropper uses the browser's native EyeDropper API to pick any color from the screen - including colors outside the browser window. Each picked color is saved to a palette strip that persists during the session. Click any saved swatch to copy it.
Full Page Capture
Capturing the Entire Page
Click the capture button in the Designer tab to take a Full Page Capture. Webstractor scrolls through the entire page, takes viewport-sized screenshots at each position, and stitches them into one tall image. Choose the output format (PNG, JPG, WebP, AVIF) before capturing.
Extractor
The Extractor automatically discovers and lists all visual assets on the current page. Browse, filter, convert, and download images, SVGs, and GIFs individually or as a ZIP bundle.
Asset Types
Images
Detects all raster images on the page - from
<img> elements, <picture>/<source> elements, and CSS background-image properties. Displays each image as a thumbnail with dimensions (width x height) and source URL.SVG
Finds all inline SVG elements in the page DOM. SVGs can be downloaded as .svg files directly. The original SVG markup is preserved.
GIF
Animated GIF images are detected and categorized separately from static images, making it easy to find and download animations.
Type Filter
Filter by Asset Type
Filter the asset list by type - All, Image, GIF, or SVG. The filter buttons show the count of each asset type found on the page.
Size Filter
Filter by Image Dimensions
Filter assets by their pixel dimensions using five size categories. Each category can be toggled on/off independently:
Tiny: ≤150pxSmall: 151-360pxMedium: 361-720pxLarge: 721-1200pxXL: >1200px
Image Format Converter
Convert Before Downloading
Before downloading, select a target format from the Image Format dropdown: Original (keep as-is), PNG (lossless), JPG (compressed), WebP (modern, smaller), or AVIF (next-gen, smallest). All conversion is done locally in the browser using Canvas API and WebAssembly - no files are uploaded to any server.
Selection & Download
Select & Download Individually
Click any asset thumbnail to select it. Use "Select All" and "Deselect" buttons for bulk operations. Click the download button to download selected assets.
ZIP Download
When multiple assets are selected and the ZIP toggle is enabled, all selected assets are bundled into a single ZIP file and downloaded at once. The ZIP is created locally in the browser.
Frequently Asked Questions
Is Webstractor free? Is there a paywall?
Yes, Webstractor is completely free. There are no paywalls, no premium tiers, no subscription plans, and no feature gating. Every tool is fully available from the moment you install the extension.
Why doesn't Webstractor work on some pages?
Chrome prevents extensions from injecting content scripts on internal pages like
chrome://, chrome-extension://, the Chrome Web Store, and the New Tab page. This is a browser security restriction, not a Webstractor limitation.How do I remove a guideline?
Click directly on the guideline itself. It will be removed instantly.
Why does the Full Page Capture have visible seams?
Some pages with complex CSS animations, parallax effects, or lazy-loaded content may show minor artifacts at segment boundaries. Disabling animations before capturing can help. Sticky headers are automatically hidden after the first segment, but elements that change appearance during scroll may cause inconsistencies.
Can I use Webstractor in Incognito mode?
Yes. Go to
chrome://extensions, find Webstractor, click "Details", and enable "Allow in Incognito".What image formats are supported for conversion?
Webstractor supports conversion between PNG (lossless, best for UI screenshots), JPG (lossy, smaller files), WebP (modern format, significantly smaller than PNG/JPG), and AVIF (next-generation format, smallest files). AVIF encoding uses a WebAssembly module and may take a few seconds for large images. All conversion is done locally - no images are ever uploaded to any server.
Where are exported files saved?
All downloads - screenshots, assets, PDFs, fonts, and ZIP bundles - go to your browser's default download folder. Filenames are automatically generated based on the page title and timestamp.
Does Webstractor collect any data?
No. Webstractor has zero tracking, zero analytics, and zero server-side components. Everything runs locally in your browser. There is no telemetry and no usage data collection. The only time any network request is made is when you actively download or preview a font or image - in that case your browser fetches the file directly from its original source (e.g., Google Fonts), with no intermediary and nothing stored by Webstractor.
How do I update Webstractor?
If installed from the Chrome Web Store, updates are delivered automatically. If installed manually in developer mode, download the latest version, go to
chrome://extensions, remove the old version, and load the new one.The extension panel is off-screen - how do I reset its position?
Close and reopen the panel by clicking the Webstractor toolbar icon twice. The panel resets to the top-right corner each time it opens.
Can I use Webstractor on mobile or Android?
No, Webstractor is a desktop browser extension. It requires a Chromium-based desktop browser to run.
Does Webstractor work on browsers other than Chrome?
Yes. Webstractor works on any Chromium-based browser: Google Chrome, Microsoft Edge, Brave, Opera, Vivaldi, and Arc.
Why are some images not showing in the Extractor?
Some images are loaded lazily or rendered dynamically via JavaScript. Scroll through the entire page first to trigger lazy-loaded content, then open the Extractor tab to re-scan.
Can I inspect elements inside iframes?
Cross-origin iframes are protected by the browser's same-origin policy. The Inspector can only access elements in the main document and same-origin iframes.
Why do I see font errors (like 'Failed to decode downloaded font' or OTS errors) in the extension manager?
These errors come from the website itself, not Webstractor. Some sites serve broken, corrupted, or anti-hotlink-protected font files that the browser cannot decode. Webstractor never loads fonts on its own - it only reads the fonts the page has already loaded. Because the extension runs on that page, Chrome attributes these page-level font errors to the extension's error console. They are harmless, don't affect Webstractor's functionality, and can be safely ignored.
Why can't I download some fonts (like Arial or Verdana)?
System fonts (Arial, Verdana, Times New Roman, and similar) are built into the operating system and have no downloadable web source - they are not hosted on Google Fonts, and most pages use them as a fallback rather than loading them as web fonts. Webstractor shows these as "System" fonts, which cannot be downloaded. Fonts that a page actually loads as web fonts (from Google Fonts or the site's own CDN) can be downloaded normally.
Why is some font marked as protected or not downloadable?
Some fonts are protected by their provider and can only be served to that website, so a direct download is blocked. Nothing is wrong with the extension - those fonts simply cannot be downloaded.
Webstractor stopped working or glitched - what should I do?
Reload the page first - and if that does not help, restart your browser or reload the extension from chrome://extensions. Every website is different: they use different frameworks, scripts, and code that can conflict with each other, so from time to time something may glitch, break, or not render as expected. This is completely normal and to be expected. A simple page reload fixes it in most cases. If the issue keeps happening on one specific site, you can report it and mention which site it was - but usually a reload is all you need.
Why are my live edits not saved after I reload the page?
Webstractor's live editing works directly on the page in real time - it does not modify the website's source files or its server. The changes are applied only to the rendered page in your browser, so they are temporary and disappear when you reload, navigate away, or close the tab. This is how a browser extension works: it cannot permanently rewrite a website's code for every visitor. If you want to keep your work, you can always copy the updated CSS (via the "Copy CSS" button) while the element is still edited, and save it yourself, for example in your own stylesheet or project.
Why does the Accessibility audit show so many fails?
An accessibility audit checks a page against a large set of WCAG rules, so it is completely normal for real websites - especially busy ones - to report many fails. It does not mean the site is broken; it simply highlights areas (contrast, missing labels, headings, and similar) that are worth improving. Use the report as a list of suggestions rather than a pass/fail judgement.
Why does Webstractor ask for so many permissions?
Webstractor is a full inspection toolkit, so each permission maps to one real feature and nothing is used for tracking. "Read and change all your data" (
<all_urls>) lets you inspect and capture any site you open. tabs + scripting run the inspector, webRequest / declarativeNetRequest make the multi-device preview work on frame-blocking sites, downloads saves your exports, and storage keeps only your local preferences. All of it stays on your device.Privacy Policy
Effective Date: August 14, 2026 · Developer: Kristijonas G. (Vilaan) · Website: https://vilaan.com · Contact Email: [email protected]
1. Overview & Privacy Philosophy
Webstractor is built with a strict privacy-first architecture. I believe that developer and design tools should respect your privacy entirely.
Webstractor does NOT collect, store, transmit, or process any personal data, usage analytics, or tracking metrics. Extension operations happen strictly within your local web browser instance.
2. Network Requests & Third-Party Services
Webstractor does not use any developer-owned backend servers, analytics tools, or telemetry frameworks. However, to provide specific features, your browser will make direct client-side requests:
Direct Media & Font Downloads
When you actively choose to preview or download a font (e.g., from Google Fonts via
fonts.googleapis.com or fonts.gstatic.com) or an image, your browser makes a direct HTTP GET request to the original source server.No Intermediaries
I do not route these requests through any of my own servers, nor do I intercept, process, or store them.
Standard Browser Data
As with any standard web connection, the target server (e.g., Google or the website's CDN) will receive your standard technical information, such as your IP address and User-Agent string. This data exchange is governed by the respective privacy policies of those third-party servers.
3. Local Storage and Permissions
Webstractor requires certain browser permissions to function as a design and developer inspection toolkit. Here is how these permissions are used locally:
Active Tab & Web Page Inspection
Used exclusively to read DOM elements, computed CSS styles, and media assets on the page you explicitly choose to inspect.
Storage Permission (chrome.storage.local)
Used solely to persist your local user preferences (such as your chosen default image format, custom device presets, active color format preferences, and workspace layouts). This data never leaves your device.
Downloads Permission
Used exclusively to save exported files (screenshots, converted images, SVG files, font files, accessibility reports, or ZIP archives) directly to your local default downloads directory.
Native EyeDropper API
Used locally to sample color values from your screen when requested.
4. Voluntary Support (Donations)
Webstractor is 100% free with zero paywalls. The extension includes an optional support link (e.g., to Ko-fi) allowing you to support my work. Clicking this link opens a third-party website in a new browser tab. I do not send any user identifiers or session data to these platforms.
5. Changes & Contact
If I update this Privacy Policy in the future, the revised document will be published at https://vilaan.com with an updated effective date. My core commitment to zero data collection will remain unchanged.
If you have any questions regarding this Privacy Policy, please contact me:
Terms of Service & Legal Disclaimer
Effective Date: August 14, 2026 · Developer & Owner: Kristijonas G. (Vilaan) · Website: https://vilaan.com · Contact Email: [email protected]
1. Acceptance of Terms
By downloading, installing, accessing, or using the Webstractor Chrome extension ("the Extension"), you agree to be legally bound by these Terms of Service ("Terms"). If you do not agree to these Terms, you must uninstall and discontinue use of the Extension immediately.
2. Intellectual Property Rights & Ownership
Webstractor is proprietary software. It is provided as free-to-use software (Freeware), but it is NOT open-source software.
All rights, titles, and interests in and to Webstractor - including but not limited to its source code, user interface, features, algorithms, and documentation - are and will remain my exclusive property (Kristijonas G. / Vilaan). The Extension is protected by copyright and other applicable intellectual property laws.
3. Proprietary License Restrictions
You are granted a limited, non-exclusive, non-transferable, revocable license to install and use Webstractor solely for your personal or commercial workflow.
Strict Restrictions: You explicitly agree that you shall NOT:
1. Resell or Monetize
Sell, rent, lease, distribute, or otherwise commercially exploit the Extension or its source code.
2. Copy or Clone
Copy, duplicate, clone, or create derivative works based on the Extension.
3. Reverse Engineer
Decompile, disassemble, or attempt to derive the source code of Webstractor, except as permitted by mandatory law.
4. Redistribute
Re-upload or re-publish Webstractor (or modified versions) to the Chrome Web Store, GitHub, or any other platform without my prior written permission.
4. Third-Party Content & Network Requests
Webstractor provides local tools to inspect, convert, and download assets (such as images, SVGs, and web fonts) from third-party websites or CDNs (such as Google Fonts).
Direct Connections
When previewing or downloading these assets, your browser connects directly to the third-party servers. Your use of those assets is subject to the terms of service and privacy policies of their respective owners.
Respect for Third-Party Rights
You acknowledge that third-party assets may be protected by copyright or licensing agreements. You are solely responsible for ensuring your use or redistribution of any extracted media complies with applicable laws and the original owner's terms.
5. Disclaimer of Warranties ("AS IS")
WEBSTRACTOR IS PROVIDED ON AN "AS IS" AND "AS AVAILABLE" BASIS, WITHOUT WARRANTIES OF ANY KIND.
I DO NOT WARRANT THAT:
1. THE EXTENSION WILL BE BUG-FREE, SECURE, OR COMPATIBLE WITH EVERY WEBSITE OR FUTURE BROWSER UPDATE.
2. FULL-PAGE CAPTURES, FILE CONVERSIONS, OR ACCESSIBILITY AUDITS WILL ALWAYS BE 100% ACCURATE.
I DO NOT WARRANT THAT:
1. THE EXTENSION WILL BE BUG-FREE, SECURE, OR COMPATIBLE WITH EVERY WEBSITE OR FUTURE BROWSER UPDATE.
2. FULL-PAGE CAPTURES, FILE CONVERSIONS, OR ACCESSIBILITY AUDITS WILL ALWAYS BE 100% ACCURATE.
6. Limitation of Liability
TO THE MAXIMUM EXTENT PERMITTED BY APPLICABLE LAW, IN NO EVENT SHALL I (KRISTIJONAS G. / VILAAN) BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, CONSEQUENTIAL, OR PUNITIVE DAMAGES, OR ANY LOSS OF PROFITS, DATA, OR BUSINESS INTERRUPTIONS ARISING OUT OF:
Your Use of the Extension
Your use of or inability to use the Extension.
Unanticipated Behavior
Unanticipated behavior or data loss resulting from local file conversions.
Third-Party Media
Your use or misuse of third-party media and assets extracted using the Extension.
7. Termination
This license is effective until terminated. Your rights under this license will terminate automatically if you fail to comply with these Terms. Upon termination, you must cease all use of Webstractor.
8. Contact Information
For questions regarding these Terms of Service, please contact me: