CSS Peeper
👨💻 开发者：csspeeper.com
·
★ 4.7 (2200 条评价)
·
👥 400,000+ 位用户
·
📦 版本
v0.5.6
·
💾 大小 1.85 MiB
🛡️ 权限安全指数
9.8/10
极佳安全 · 设计必备
💬 一句话定位：告别繁琐的审查元素，把任意网页转化为 Figma 式直观设计规范面板
📖 概述与深度评测
中文精编实测🎯 解决什么核心痛点？
网页设计师想要扒一个优秀网站的配色规范、按钮圆角阴影和图片素材，传统 F12 控制台全是层叠样式表与工程化代码，极其不直观。
✨ 核心功能特性拆解
- ● ✅ 自动扫描并提取整个页面的设计调色板 (Color Palette)，一键复制 Hex 色值
- ● ✅ 点击任意按钮或模块，直观展示间距 Padding、Margin、圆角、盒阴影与字体规范
- ● ✅ 素材切片资产面板 (Assets Tab)：一览网页所有图片、SVG 与背景图，支持一键批量打包下载
- ● ✅ 清晰查看网页布局栅格与模块物理尺寸
👍 实测突出优势
- ✓专为设计师量身定做的 UI 交互，比浏览器原生 DevTools 直观十倍
- ✓资产导出功能极其好用，免去右键另存为的繁琐步骤
👎 局限与注意事项
- !仅作为查看与提取工具，不具备在线热修改 CSS 并导出的能力
🛡️ 权限信息与隐私安全审计 (1 项权限)
Manifest V3 静态代码扫描通过
以下权限直接提取自 CSS Peeper (设计师专用 CSS 样式提取与切片导出) 官方安装包内的 manifest.json 声明文件：
activeTab
解析当前页面样式表与素材资产
⚖️ 同类插件横评对比：该选哪一个？
🆚 对比 ColorZilla
专注于颜色吸取与调色板生成
🆚 对比 SVG Grabber
专注于提取 SVG 矢量图
💯 常见问题与离线安装排错 (FAQ)
Q：支持深色模式吗？
A：支持，扩展面板会自动适配系统深色外观，界面非常极客雅致。
Q：离线安装时提示 [程序包无效：CRX_REQUIRED_PROOF_MISSING] 怎么办？
A：这是新版 Chrome/Edge 针对离线拖拽 .crx 的安全限制。最简单的解决办法是：直接点击本页顶部的 「📦 下载 .ZIP 免转换包」，将其解压为一个普通文件夹，然后在浏览器打开 chrome://extensions 开启右上角「开发者模式」，点击左上角「加载已解压的扩展程序」选中该文件夹即可 100% 成功安装！
💬 用户评价与实测留言 (0)
免登录直接分享您的真实使用体验
🔥 本站极客实测反馈 (0)
🎖️ 开发者收录与安全认证徽章 (GitHub Badge)
欢迎将该扩展的实时安全评级徽章嵌入您的 GitHub README 或博客文章中：
[](https://crx8.com/ext/css-peeper)
暂无社区留言，快来抢占第一个沙发吧！