Webclarity (Beta) 作者: Nafiul
Uncover the DNA of any website
扩展元数据
屏幕截图
关于此扩展
WebClarity is a comprehensive web analysis toolkit designed for designers, developers, and SEO professionals to uncover the DNA of any website. Extract design systems, analyze code, and optimize for search engines—all from your browser.
🎨 FOR DESIGNERS
Style Guide Generator: Extract complete typography systems including font families, sizes, weights, line heights, and letter spacing. Automatically categorizes text into Display, Heading, Body, and Button styles. Discover color palettes with brand colors and semantic tokens (background, text, border, icon colors). Export design systems as PDF or HTML documentation.
What Font Inspector: Identify any font on a webpage with a single click. Hover over text to see font family, size, weight, color, and spacing properties. Highlights all instances of the same font style across the page. Toggle between px and rem units for precise measurements.
Assets Finder: Extract and download all images, icons, SVGs, and visual assets from any website. Batch download with custom filenames. Perfect for design inspiration and competitor analysis.
Contrast Checker: Test text and background color combinations for WCAG accessibility compliance. Get instant APCA and traditional contrast ratio scores. Ensure your designs meet AA and AAA accessibility standards.
🧑💻 FOR DEVELOPERS
Element Inspector: Measure spacing, padding, margins, and dimensions with pixel-perfect accuracy. Inspect any element's box model, positioning, and layout properties. Switch between px and rem units. Hover to see real-time measurements with visual overlays.
Responsive Viewer: Preview any website across 50+ device mockups including iPhone, iPad, Android phones, tablets, MacBooks, and desktop displays. Test responsive designs without switching devices. Rotate between portrait and landscape orientations.
Copy Design Tool: Click any element to copy its complete CSS properties including colors, typography, spacing, borders, shadows, and transforms. One-click copy to clipboard for rapid development.
Performance Insights: Analyze page load times, resource sizes, and rendering metrics. Get actionable recommendations to improve website speed and performance.
🔍 FOR SEO PROFESSIONALS
Quick SEO Checker: Instant analysis of meta tags, headings structure, image alt text, and on-page SEO elements. Identify missing or duplicate meta descriptions, improper heading hierarchy, and accessibility issues. Get specific recommendations to improve search rankings.
Technology Detector: Discover what frameworks, libraries, and technologies power any website. Identify CMS platforms, analytics tools, and third-party integrations.
✨ KEY BENEFITS
PERFECT FOR
All features work offline and require no backend services. Your browsing data stays completely private.
🎨 FOR DESIGNERS
Style Guide Generator: Extract complete typography systems including font families, sizes, weights, line heights, and letter spacing. Automatically categorizes text into Display, Heading, Body, and Button styles. Discover color palettes with brand colors and semantic tokens (background, text, border, icon colors). Export design systems as PDF or HTML documentation.
What Font Inspector: Identify any font on a webpage with a single click. Hover over text to see font family, size, weight, color, and spacing properties. Highlights all instances of the same font style across the page. Toggle between px and rem units for precise measurements.
Assets Finder: Extract and download all images, icons, SVGs, and visual assets from any website. Batch download with custom filenames. Perfect for design inspiration and competitor analysis.
Contrast Checker: Test text and background color combinations for WCAG accessibility compliance. Get instant APCA and traditional contrast ratio scores. Ensure your designs meet AA and AAA accessibility standards.
🧑💻 FOR DEVELOPERS
Element Inspector: Measure spacing, padding, margins, and dimensions with pixel-perfect accuracy. Inspect any element's box model, positioning, and layout properties. Switch between px and rem units. Hover to see real-time measurements with visual overlays.
Responsive Viewer: Preview any website across 50+ device mockups including iPhone, iPad, Android phones, tablets, MacBooks, and desktop displays. Test responsive designs without switching devices. Rotate between portrait and landscape orientations.
Copy Design Tool: Click any element to copy its complete CSS properties including colors, typography, spacing, borders, shadows, and transforms. One-click copy to clipboard for rapid development.
Performance Insights: Analyze page load times, resource sizes, and rendering metrics. Get actionable recommendations to improve website speed and performance.
🔍 FOR SEO PROFESSIONALS
Quick SEO Checker: Instant analysis of meta tags, headings structure, image alt text, and on-page SEO elements. Identify missing or duplicate meta descriptions, improper heading hierarchy, and accessibility issues. Get specific recommendations to improve search rankings.
Technology Detector: Discover what frameworks, libraries, and technologies power any website. Identify CMS platforms, analytics tools, and third-party integrations.
✨ KEY BENEFITS
- Privacy-First: All analysis runs locally in your browser. Zero data collection or external transmission.
- Cross-Platform: Works on any website without requiring access or permissions.
- Export Options: Download reports as PDF, HTML, or JSON for documentation and sharing.
- Multi-Language Support: Available in English and Japanese.
- No Account Required: Install and start using immediately.
PERFECT FOR
- UI/UX designers seeking design inspiration
- Frontend developers building component libraries
- Design system teams documenting patterns
- SEO specialists auditing websites
- Web agencies analyzing competitor sites
- Accessibility testers ensuring WCAG compliance
- Students learning web design and development
All features work offline and require no backend services. Your browsing data stays completely private.
评分 0(1 位用户)
权限与数据
必要权限:
- 输入数据到剪贴板
- 拦截任何页面上的内容
- 下载文件和读取与修改浏览器的下载历史
- 获取浏览器标签页
- 获知浏览器导航时的行为状态
- 访问您在所有网站的数据
可选权限:
- 访问您在所有网站的数据
收集的数据:
- 开发者称此扩展无需收集数据。
更多信息
- 版本
- 1.0
- 大小
- 3.75 MB
- 上次更新
- 7 天前 (2025年11月17日)
- 许可证
- MIT 许可证
- 隐私政策
- 阅读此附加组件的隐私政策
- 版本历史
- 添加到收藏集