Tiện ích trình duyệt Firefox
  • Tiện ích mở rộng
  • Chủ đề
    • cho Firefox
    • Từ điển & gói ngôn ngữ
    • Các trang web trình duyệt khác
    • Tiện ích cho Android
Đăng nhập
Xem trước Web Design Ruler

Web Design Ruler bởi LXB-Studio

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

0 (0 reviews)0 (0 reviews)
5 người dùng5 người dùng
Bạn sẽ cần Firefox để sử dụng tiện ích mở rộng này
Tải xuống Firefox và tải tiện ích mở rộng
Tải xuống tập tin

Siêu dữ liệu mở rộng

Ảnh chụp màn hình
Welcome PageColor PaletteColor PickerMeasurement ToolRight Click Menu
Về tiện ích mở rộng này
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
Được xếp hạng 0 (bởi 1 người dùng)
Đăng nhập để đánh giá tiện ích này
Chưa có xếp hạng nào

Đã lưu xếp hạng sao

5
0
4
0
3
0
2
0
1
0
Chưa có đánh giá
Quyền hạn và dữ liệuTìm hiểu thêm

Quyền hạn bắt buộc:

  • Nhập dữ liệu vào bộ nhớ tạm
  • Hiển thị thông báo cho bạn
  • Truy cập dữ liệu của bạn trên mọi trang web
Thêm thông tin
Liên kết tiện ích
  • Trang chủ
  • Trang hỗ trợ
  • Email hỗ trợ
Phiên bản
1.1.1
Kích cỡ
50,36 KB
Cập nhật gần nhất
3 tháng trước (10 Thg 06 2025)
Thể loại có liên quan
  • Phát triển Web
Giấy phép
Mọi Quyền Được Bảo Lưu
Chính sách riêng tư
Đọc chính sách riêng tư của tiện ích này
Lịch sử các phiên bản
  • Xem tất cả phiên bản
Thêm vào bộ sưu tập
Báo cáo tiện ích này
Ghi chú phát hành cho phiên bản 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.
Tiện ích mở rộng khác của LXB-Studio
  • Chưa có xếp hạng nào

  • Chưa có xếp hạng nào

  • Chưa có xếp hạng nào

  • Chưa có xếp hạng nào

  • Chưa có xếp hạng nào

  • Chưa có xếp hạng nào

Đi đến trang chủ Mozilla

Tiện ích

  • Giới thiệu
  • Blog tiện ích Firefox
  • Extension Workshop
  • Trung tâm nhà phát triển
  • Chính sách nhà phát triển
  • Blog cộng đồng
  • Diễn đàn
  • Báo cáo một lỗi
  • Hướng dẫn đánh giá

Trình duyệt

  • Desktop
  • Mobile
  • Enterprise

Sản phẩm

  • Browsers
  • VPN
  • Relay
  • Monitor
  • Pocket
  • Bluesky (@firefox.com)
  • Instagram (Firefox)
  • YouTube (firefoxchannel)
  • Riêng tư
  • Cookie
  • Pháp lý

Trừ trường hợp khác đã ghi chú, nội dung trên trang này được cấp phép theo giấy phép Creative Commons Attribution Share-Alike v3.0 hoặc bất kỳ phiên bản nào sau này.