Extracting Page Content

Everything the Page tab surfaces about the whole webpage: SEO and Open Graph meta tags, an OG image preview, every image and SVG, the full colour palette, every typography style, and the frameworks powering the site.

The Page tab in the side panel collects page-level information that doesn’t belong to any single element. Activate Screen Ruler, switch the side panel to the Page tab, and everything below appears.

Meta Tags & OG Image

Screen Ruler reads <title>, window.location.href, and the page’s meta tags, then groups them into three sections in the side panel: SEO (description, canonical, robots, viewport), Open Graph (og:title, og:description, og:image, og:url, og:type, og:site_name), and Twitter (twitter:card, twitter:title, twitter:description, twitter:image, twitter:site).

Side panel showing OG image preview, download button, and meta tags grouped by SEO, Open Graph, and Twitter — If `og:image` is set, Screen Ruler resolves the URL and shows a preview with a one-click download.

The OG image preview includes a download button. Click it to grab the social-card image straight to your downloads. Useful when you’re reverse-engineering social-share cards from a competitor or need a copy of an image you can’t easily right-click.

A refresh button at the top of the Page tab re-fetches metadata, so if you change the URL or update the page’s meta tags you can see the new values without reactivating the extension.

Asset Extraction Pro

Asset extraction walks the DOM recursively and collects every visual asset on the page: <img> sources (PNG, JPG, WebP, GIF), CSS background-image URLs (including data URLs), and inline <svg> elements which are serialised via XMLSerializer so you get the raw markup. Tiny tracking pixels are filtered out by minimum size thresholds.

Asset grid showing extracted images and SVGs with format badges and dimensions — Assets render in a justified grid with rendered dimensions and format badges. Download individually or all at once.

Each thumbnail shows rendered dimensions overlaid and a format badge (PNG, JPG, WebP, GIF, SVG). Individual download buttons save with sensible filenames; “Download all” grabs the whole set sequentially.

Color Extraction Pro

Color extraction collects every unique colour on the page, categorised by where it’s used: text, background, or border. Modern colour spaces (oklch(), oklab(), lch(), lab(), hwb(), color()) are normalised through full conversion paths, and semi-transparent colours are properly composited.

Colour swatch list grouped by text, background, and border categories — Every unique colour on the page, grouped by usage. Click to copy in HEX, RGB, HSL, or HSB.

Hover any swatch to highlight every element on the page using that colour — the fastest way to find every place a stray legacy value still appears. The format dropdown switches all colours at once between HEX, RGB / RGBA, HSL / HSLA, and HSB / HSBA.

Typography Pro

Typography analysis samples the text-containing elements on the page and extracts the unique combinations of font-family, font-size, font-weight, letter-spacing, and text-transform in use. Each unique combination is shown as a card with a rendered specimen of the actual typeface.

Typography cards showing rendered specimens for each unique font style on the page — Every unique typography combination listed with a specimen rendered in the actual rendered font.

The renderer queries the actual rendered font (resolving the font-family fallback chain), so even when a stack like "Inter", system-ui, sans-serif resolves down to whatever is installed, the specimen reflects what visitors see — not just what the CSS hopes for.

Hover any typography card to highlight every element on the page using that style.

Technology Detection Pro

Screen Ruler detects 180+ frontend technologies via pattern matching and global variable inspection. Detection uses multiple layers: window object property checks (e.g. window.React, __NEXT_DATA__), DOM attribute scans (data-reactid, ng-version), <meta> tag parsing, script src patterns, and CSS custom properties (--tw-* for Tailwind). Versions are extracted where libraries expose them.

Detected technologies list showing framework names with version chips — Every detected framework, library, and tool listed with its version where available.

Detection covers frameworks (React, Vue, Angular, Svelte, Next.js, Nuxt, Astro, Remix, Qwik), UI toolkits (Tailwind, Bootstrap, Material UI, Chakra, Ant Design), CMS & commerce (WordPress, Shopify, Wix, Sanity, Contentful), build tools (Vite, Storybook), state management, charts (D3, Three.js, Chart.js), animation libraries (GSAP, Framer Motion), analytics (GA4, Plausible, PostHog, Sentry), and many more. Detection runs locally in the browser so it works on local development pages, intranet sites, and anything behind authentication.