Measure distances & pick colors on any webpage A minimal, privacy-first Chrome extension built for frontend developers and QA testers.
|
Measure the distance between any two points on a page in pixels. A live |
Grab any pixel on the page using the native EyeDropper API. Displays the value in HEX, RGB, HSL, and RGBA, and automatically copies your chosen format to the clipboard. Picked colors accumulate in the Saved Colors list. |
|
The fastest way to debug CSS layout problems: one click draws a 1px outline around every element on the page. Each tag type (div, section, p, ul, button, img…) gets its own color, so you can tell nested elements apart at a glance. Inspired by Pesticide — much faster than clicking around the DevTools element tree. Click the button again to turn it off. |
|
- 🎯 Auto-copy format — Pre-select your preferred format (HEX / RGB / HSL / RGBA)
- 💾 Saved Colors — Every picked color is stored as a round swatch; click to re-copy (max 18)
- 🌍 Bilingual — Turkish and English (defaults to TR, your choice is persisted)
- 🔒 100% private — No data collected, no network requests, everything lives in local
chrome.storage.local - ⚡ Manifest V3 — Modern service worker architecture
- 📦 Zero dependencies — Vanilla JS, CSS, Chrome APIs — no external libraries
# 1. Clone the repo
git clone https://github.com/<user>/pixeltape.git
# 2. Open chrome://extensions in Chrome
# 3. Enable "Developer mode" in the top right
# 4. Click "Load unpacked" → select the pixeltape folder- Open the PixelTape popup → click the Ruler button
- Your cursor becomes a crosshair — click anywhere on the page
- Until the second click, a live
w: 20px - h: 15pxtooltip follows the cursor - On the second click the measurement is copied to the clipboard automatically
- Click again to start a new measurement — press ESC to exit the mode
- Open the PixelTape popup → choose an Auto-copy format (HEX, RGB, HSL, RGBA)
- Click the Color Picker button → the magnifier appears on the page
- Pick a pixel → the value is copied to the clipboard in your chosen format
- The color is added to Saved Colors — click it any time to re-copy
- Open the PixelTape popup → click the Outline button
- Every element on the page gets a colored outline based on its tag type
- Once you've found the layout issue, click Outline again to turn it off
PixelTape comes with a carefully crafted color palette and typography:
| Element | Value |
|---|---|
| Font | Nunito (400/600/700/800/900) + DM Mono |
| Header Gradient | #e8e0ff → #fce4f5 → #d8f5ee |
| Lavender Accent | #b39ddb / #9575cd / #5c42a8 |
| Pink Accent | #f48fb1 / #ec407a |
| Mint (active) | #4caf96 / #d4f5ec |
| Border Radius | 24px shell · 16px buttons · 14px cards |
pixeltape/
├── manifest.json # Manifest V3 configuration
├── popup.html # Extension popup UI
├── popup.css # Design system styles
├── popup.js # Popup logic + i18n + state
├── content.js # Injected ruler/picker/outline logic
├── content.css # Overlay, tooltip, and marker styles
├── background.js # Service worker — popup open, message relay
├── icons/ # 16 / 48 / 128 px extension icons
└── README.md
PixelTape collects no data and makes no external requests.
- ❌ No analytics
- ❌ No telemetry
- ❌ No remote APIs
- ✅ All data stays in
chrome.storage.local— only in your browser - ✅ Source code is fully open and readable
- Manifest V3 Chrome Extension
- Vanilla JavaScript (no frameworks, no libraries)
- Chrome APIs —
storage,scripting,tabs,action,clipboardWrite - Native EyeDropper API (Chrome 95+)
MIT © PixelTape
🔒 No data collected · 100% private
Made with 💜 for developers & designers