Firefox 瀏覽器附加元件
  • 擴充套件
  • 佈景主題
    • 用於 Firefox
    • 字典與語言套件
    • 其他瀏覽器網站
    • Android 版的附加元件
登入
Web Design Ruler 預覽

Web Design Ruler 作者: LXB-Studio

Essential design tools for web designers: pixel-perfect measurements, font identification, and professional color picking.

0 (0 reviews)0 (0 reviews)
5 位使用者5 位使用者
必須使用 Firefox 才能使用此擴充套件
下載 Firefox 並安裝擴充套件
下載檔案

擴充套件後設資料

畫面擷圖
Welcome PageColor PaletteColor PickerMeasurement ToolRight Click Menu
關於此擴充套件
Web Design Ruler 📏🎨🔠 | The Ultimate Design Assistant

The essential extension for web designers and developers who demand accuracy.

Web Design Ruler combines three powerful tools in one sleek extension, eliminating the need to switch between multiple applications during your design workflow:

🔍 Precise Measurement Tool

Measure any element's width, height, and diagonal dimensions with pixel-perfect accuracy
Get exact spacing and alignment information for any webpage element
Perfect for UI audits, responsive design testing, and detail-oriented layout work

🔤 Font Identifier

Instantly recognize any font used on a webpage with a single click
Discover complete typography details including font family, size, weight, and style
Save time searching for perfect typography matches for your projects

🎨 Color Picker

Extract exact colors from any webpage element
Get complete color values in HEX, RGB, and HSL formats
Maintain perfect color consistency across your designs

Simple, Intuitive, and Powerful
Web Design Ruler integrates seamlessly, accessible via icon click or right-click context menu. No complicated setup or learning curve - just the essential design tools you need, when you need them.

Built with Privacy in Mind

✅ Works completely offline - no internet connection required
✅ No data collection or tracking
✅ Minimal permissions - only accesses your active tab when tools are explicitly activated
✅ No ads, bloatware, or unnecessary features

🆕 What's New in Version 1.1

🎉 Complete UI Redesign

Modern, professional interface with intuitive tab navigation
Cleaner, more responsive design for better user experience
Improved visual feedback and smoother animations

🎭 NEW: Color Palette Manager

Create and save custom color palettes
Import/export palettes as JSON files
Built-in starter palettes (Material Design, Neutrals, LXB Studio)
Save colors from any website to your palettes
Right-click to remove colors, rename palettes with ease

✨ Enhanced Features

Recent Colors: Automatically tracks your last 20 picked colors
Font Memory: Save detected fonts for future reference
Better Color Display: See colors in HEX, RGB, and HSL simultaneously
One-click Copy: Copy any color format instantly
Visual Measurements: See dimensions visualized in real-time

🐛 Bug Fixes & Improvements

Fixed context menu activation issues
Improved tool activation reliability
Better error handling and user notifications
Removed unused magnifier element from color picker
Enhanced keyboard shortcuts (ESC to cancel any tool)

📝 Note
This update represents a major overhaul based on user feedback. We've focused on making Web Design Ruler more powerful while keeping it simple and fast. Thank you for your support!

Version 1.1 Summary:

✨ Complete UI redesign with modern interface
🎭 NEW: Color palette manager with import/export
🎨 Track recent colors and save fonts
🐛 Bug fixes and performance improvements

Made with ❤️ by LXB Studio | Visit webdesignruler.com
由 1 位評論者給出 0 分
登入後即可幫此擴充套件評分
目前沒有評分

已儲存星等

5
0
4
0
3
0
2
0
1
0
還沒有評論
權限與資料了解更多

必要權限:

  • 輸入資料到剪貼簿
  • 向您顯示通知
  • 存取您所有網站中的資料
更多資訊
附加元件網址
  • 首頁
  • 技術支援網站
  • 技術支援信箱
版本
1.1.1
大小
50.36 KB
最近更新
3 個月前 (2025年6月10日)
相關分類
  • 網頁開發
授權條款
保留所有權利
隱私權保護政策
閱讀此附加元件的隱私權保護政策
版本紀錄
  • 瀏覽所有版本
新增至收藏集
檢舉此附加元件
1.1.1 版的發行公告
Security Fix: Removed innerHTML Usage

What was fixed: Replaced all innerHTML assignments with safe DOM manipulation methods using createElement() and appendChild() to prevent XSS vulnerabilities.

Why it matters: Using innerHTML can expose the extension to script injection attacks. The new approach creates DOM elements programmatically, ensuring user input and external data cannot execute as code.

Key changes:
- Created helper functions createElement() and clearElement() for safe DOM manipulation
- All dynamic content now uses textContent instead of innerHTML
- Color swatches, labels, and UI elements are built using proper DOM methods
- No functional changes - the extension works exactly the same, just more securely
This makes the extension compliant with modern security standards and store requirements.
LXB-Studio 製作的更多擴充套件
  • 目前沒有評分

  • 目前沒有評分

  • 目前沒有評分

  • 目前沒有評分

  • 目前沒有評分

  • 目前沒有評分

前往 Mozilla 官網

附加元件

  • 關於
  • Firefox 附加元件部落格
  • 擴充套件工作坊
  • 開發者交流中心
  • 開發者政策
  • 社群部落格
  • 討論區
  • 回報 Bug
  • 評論撰寫指南

瀏覽器

  • Desktop
  • Mobile
  • Enterprise

產品

  • Browsers
  • VPN
  • Relay
  • Monitor
  • Pocket
  • Bluesky (@firefox.com)
  • Instagram (Firefox)
  • YouTube (firefoxchannel)
  • 隱私權
  • Cookie
  • 法律資訊

除另有註明外,本站內容皆採用創用 CC 姓名標示—相同方式分享條款 3.0 或更新版本授權大眾使用。