robonen
32ed0b45f0
- 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.
69 lines
3.3 KiB
Markdown
69 lines
3.3 KiB
Markdown
# 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
|
||
|
||
1. **Activate** — click the toolbar icon or press `Alt+Shift+E`.
|
||
2. **Pick** — a DevTools-style cursor highlights elements on hover; click to select one.
|
||
3. **Isolate** — the page is hidden and the selected block is rendered, centered, on a canvas.
|
||
4. **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.
|
||
5. **Measure** — zoom/pan the canvas, toggle rulers, and click a ruler to drop a guide.
|
||
6. **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`](https://vuejsx.dev/), 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`](https://vite-plugin-web-extension.aklinker1.io/), Vue
|
||
`3.6` (Vapor), `vue-jsx-vapor`, Tailwind v4, TypeScript, Vitest.
|
||
|
||
## Develop
|
||
|
||
```bash
|
||
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:
|
||
|
||
1. Open `chrome://extensions`, enable **Developer mode**.
|
||
2. **Load unpacked** → select the `dist/` folder.
|
||
3. 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.
|