Files

T

robonen 32ed0b45f0 feat: add element-inspector

- Implemented Rulers component for zoom/pan-aware rulers on canvas.
- Created Stage component to serve as a zoomable and pannable viewport for the device frame.
- Developed Toolbar component for responsive controls, including device presets and zoom functionalities.
- Introduced useFrame composable to manage iframe interactions and inspections.
- Established a reactive store to manage application state, including guides and viewport dimensions.
- Added utility functions for color parsing and box model calculations.
- Integrated Tailwind CSS for styling and improved scrollbar aesthetics.
- Implemented unit tests for color utilities and rectangle calculations.
- Configured TypeScript and Vite for the project setup.

2026-06-05 02:45:54 +07:00

3.3 KiB

Raw Blame History

Element Inspector

A Chrome (MV3) browser extension that lets you pick any element on a live page and study it on a clean canvas — its real dimensions, colors (resolved to CSS variables), spacing, radius, typography, plus rulers and live responsive resizing.

It's like the DevTools "inspect" cursor, but instead of staying buried in the page it lifts the selected block out onto an isolated stage where you can measure and stress-test it.

Features

Activate — click the toolbar icon or press Alt+Shift+E.
Pick — a DevTools-style cursor highlights elements on hover; click to select one.
Isolate — the page is hidden and the selected block is rendered, centered, on a canvas.
Inspect — hover any part to see its box model (margin/border/padding/content), dimensions, colors (shown as var(--name) when they match a CSS custom property, with the hex), border radius, spacing and typography.
Measure — zoom/pan the canvas, toggle rulers, and click a ruler to drop a guide.
Responsive — resize the frame with the drag handles, the W×H inputs, or the device presets. Because the block is rendered in a real iframe carrying the page's stylesheets, resizing re-fires the site's actual media queries. "Fit" resets it.

Press Esc (or "Close") to dismiss and return to the page — nothing on the page is modified.

How it works

The background worker relays the toolbar click / shortcut to the active tab.
The content script mounts the UI into a Shadow DOM so the page can't style it and it can't leak styles into the page. The UI is built with Vue (Vapor mode) authored in JSX/TSX via vue-jsx-vapor, styled with Tailwind v4 (compiled CSS is adopted into the shadow root).
The isolated block is rendered in a same-origin srcdoc iframe that copies the page's <style>/<link> tags, <base href>, :root custom properties and the element's ancestor chain (as display:contents wrappers, so selectors/inheritance match without the ancestors' layout distorting the block).

Tech stack

Vite + vite-plugin-web-extension, Vue 3.6 (Vapor), vue-jsx-vapor, Tailwind v4, TypeScript, Vitest.

Develop

pnpm install
pnpm dev        # build + watch into dist/
pnpm build      # type-check + production build into dist/
pnpm test       # unit tests (color + geometry utils)
pnpm typecheck  # tsc --noEmit

Then load it in Chrome:

Open chrome://extensions, enable Developer mode.
Load unpacked → select the dist/ folder.
Open any site, click the extension icon (or Alt+Shift+E), and pick an element.

Re-run pnpm build (or keep pnpm dev running) and hit the reload icon on the extension card after changes.

Known limitations

Strict CSP pages: a srcdoc iframe inherits the page's Content-Security-Policy, so on sites that forbid inline styles the isolated block may render imperfectly.
Chrome/Chromium only for now. The plugin's manifest templating makes a Firefox build a feasible follow-up.
Styles that depend on very deep ancestor context or :nth-child among original siblings may differ slightly, since only the direct ancestor chain is reconstructed.

3.3 KiB Raw Blame History Unescape Escape